graphql-request使用指南：快速掌握轻量级GraphQL客户端

【免费下载链接】graphql-request项目地址: https://gitcode.com/gh_mirrors/gra/graphql-request

graphql-request是一个专为TypeScript设计的轻量级GraphQL客户端库，它以极简的API设计为核心，为开发者提供了在Node.js和浏览器环境中发送GraphQL请求的高效解决方案。作为GraphQL客户端领域的轻量级选择，这个TypeScript库让GraphQL查询变得异常简单。

5分钟快速入门

让我们从最基础的使用开始，帮助你快速上手graphql-request。

第一步：安装依赖

在你的项目中安装graphql-request及其必要的依赖：

npm install graphql-request graphql

第二步：发送第一个查询

使用最简洁的方式发送GraphQL查询：

import { request, gql } from 'graphql-request'; // 定义GraphQL查询文档 const query = gql` query GetCompanyInfo { company { name ceo founded } } `; // 发送请求 const result = await request('https://api.spacex.land/graphql/', query); console.log(result.company.name); // SpaceX

第三步：创建客户端实例

对于需要重复使用的场景，创建GraphQLClient实例更加高效：

import { GraphQLClient, gql } from 'graphql-request'; // 创建客户端实例 const client = new GraphQLClient('https://api.spacex.land/graphql/'); // 使用客户端发送请求 const companyInfo = await client.request(query);

核心功能详解

1. 查询与变更操作

graphql-request完美支持GraphQL的查询和变更操作：

// 查询操作 const getUserQuery = gql` query GetUser($id: ID!) { user(id: $id) { name email } } `; // 带变量的查询 const userData = await client.request(getUserQuery, { id: '123' }); // 变更操作 const createUserMutation = gql` mutation CreateUser($input: CreateUserInput!) { createUser(input: $input) { id name } } `; // 执行变更 const newUser = await client.request(createUserMutation, { input: { name: 'John', email: 'john@example.com' } });

2. 请求头管理

在实际项目中，我们经常需要为请求添加认证信息或其他自定义头部：

// 静态请求头 const client = new GraphQLClient(endpoint, { headers: { 'Authorization': 'Bearer your-token-here', 'Content-Type': 'application/json' } }); // 动态请求头（每次请求可以不同） const result = await client.request(query, variables, { 'X-Custom-Header': 'custom-value' });

3. 错误处理策略

graphql-request提供了灵活的错误处理机制：

// 默认策略：遇到错误就抛出 try { const data = await client.request(query); } catch (error) { console.error('GraphQL请求失败:', error); } // 忽略错误策略 const clientWithIgnorePolicy = new GraphQLClient(endpoint, { errorPolicy: 'ignore' }); // 返回所有结果策略（包含错误和数据） const { data, errors } = await client.rawRequest(query); if (errors) { console.warn('GraphQL请求包含错误:', errors); }

4. 批量请求支持

为了提高性能，graphql-request支持批量发送多个GraphQL请求：

// 批量请求 const requests = [ { document: query1, variables: vars1 }, { document: query2, variables: vars2 }, { document: mutation1, variables: mutationVars } ]; const batchResults = await client.batchRequests(requests);

实战案例展示

案例一：用户管理系统

假设我们正在构建一个用户管理系统，需要实现用户查询、创建和更新功能：

class UserService { private client: GraphQLClient; constructor(endpoint: string) { this.client = new GraphQLClient(endpoint); } // 查询用户列表 async getUsers(page: number, limit: number) { const query = gql` query GetUsers($page: Int!, $limit: Int!) { users(page: $page, limit: $limit) { id name email createdAt } } `; return await this.client.request(query, { page, limit }); } // 更新用户信息 async updateUser(id: string, userData: any) { const mutation = gql` mutation UpdateUser($id: ID!, $input: UpdateUserInput!) { updateUser(id: $id, input: $input) { id name email } } `; return await this.client.request(mutation, { id, input: userData }); } }

案例二：电商商品查询

在电商场景中，我们需要高效地查询商品信息：

// 商品查询服务 const productQuery = gql` query GetProducts($category: String, $search: String) { products(category: $category, search: $search) { id name price description images { url alt } inventory { stock available } } } `; // 使用缓存优化重复查询 let cachedProducts: any = null; async function getProducts(category?: string, search?: string) { if (!cachedProducts) { cachedProducts = await client.request(productQuery, { category, search }); } return cachedProducts; }

案例三：实时数据监控

对于需要实时监控数据的应用：

// 实时数据监控 const statsQuery = gql` query GetRealTimeStats { systemStats { cpuUsage memoryUsage activeUsers requestsPerMinute } } `; // 使用轮询获取实时数据 async function startRealTimeMonitoring(interval: number = 5000) { setInterval(async () => { try { const stats = await client.request(statsQuery); updateDashboard(stats); } catch (error) { console.error('监控数据获取失败:', error); } }, interval); }

高级技巧与最佳实践

性能优化策略

请求合并：将多个相关查询合并为一个批量请求
文档缓存：对重复使用的GraphQL文档进行缓存
连接复用：在可能的情况下复用HTTP连接

错误处理最佳实践

// 统一的错误处理封装 async function safeGraphQLRequest( document: string, variables?: any, headers?: any ) { try { const data = await client.request(document, variables, headers); return { success: true, data }; } catch (error) { console.error('GraphQL请求错误:', error); return { success: false, error: error.message, details: error.response?.errors }; } }

TypeScript类型安全

充分利用graphql-request的类型安全特性：

// 类型安全的查询定义 interface User { id: string; name: string; email: string; } interface GetUsersResponse { users: User[]; } const response = await client.request<GetUsersResponse>(userQuery); // 现在response.users有完整的类型提示

中间件使用

通过中间件实现统一的请求处理逻辑：

// 请求日志中间件 client.setMiddleware([ { request: async (request) => { console.log('发送GraphQL请求:', request.document); return request; }, response: async (response) => { console.log('收到GraphQL响应:', response); return response; } } ]);