graphql-request：满足 API 需求的轻量级架构

如果你正在深入 API 世界并寻找一种高效的方法来处理 GraphQL 查询，那么你来对地方了。今天，我们讨论的是 graphql-request，一个简约但功能强大的库，在 API 社区中掀起了波澜。无论是经验丰富的开发还是新手开发，本指南都将介绍有关 graphql-request 所需了解的所有信息。

🦊

你准备好增强你的 GraphQL 开发了吗？立即免费下载 Apifox，增强你的 API 管理和测试体验！通过与 GraphQL 无缝集成，Apifox 提供强大的测试环境、自动文档生成和高效的监控工具，将你的 GraphQL 查询提升到一个新的水平 🚀

什么是 graphql request？

graphql request 是一个轻量级库，旨在简化 GraphQL 请求的发出。它是一个简单的客户端，封装了 GraphQL API，能够轻松发送查询和变更。与庞大的库不同，graphql request 注重最小化和高效，非常适合简单性和性能至关重要的项目。

为什么选择 graphql request？

小而精：没有不必要的功能，做到了它应该做的事情，并且做得很好。
易于使用：简单的语法使，非常容易学习和实现。
灵活性：非常适合小型项目和大型应用程序。
效率高：更快的性能和更低的资源消耗。

这些功能使 graphql request 成为希望保持简单高效的开发人员的理想选择。让我们深入探讨如何在项目中利用这个工具。

graphql request 入门

首先，在项目中设置 GraphQL 请求，无论开始一个新项目还是集成到现有项目中，都很简单。

安装

要安装 graphql request，需要 npm 或 YARN。

打开终端并运行以下命令：

npm install graphql-request

或者使用 YARN：

yarn add graphql-request

现在我们的准备工作已经做好了，可以开始在项目中使用 graphql request。

基本用法

使用 graphql request 非常简单。这里有一个入门的基本示例：

import { request, gql } from 'graphql-request';
const endpoint = 'https://api.spacex.land/GraphQL/';
const query = gql`
  {
    launchesPast(limit: 5) {
      mission_name
      launch_date_utc
      rocket {
        rocket_name
      }
      links {
        video_link
      }
    }
  }
`;
request(endpoint, query).then((data) => console.log(data));

在此示例中，我们查询 SpaceX GraphQL API 以获取有关过去发射的信息。 gql 标记用于解析查询， request 函数将其发送到指定的端点，然后响应将记录到控制台。

graphql request 高级功能和用法

已经介绍了基础知识，现在开始探索 graphql request 真正发挥作用的一些高级功能和场景。

Query 变量

GraphQL 查询通常需要变量。 graphql request 可以无缝地处理这个问题。

以下是在查询中包含变量的方法：

const query = gql`
  query getLaunches(
$limit: Int!) {
    launchesPast(limit: $
limit) {
      mission_name
      launch_date_utc
      rocket {
        rocket_name
      }
      links {
        video_link
      }
    }
  }
`;
const variables = {
  limit: 3,
};
request(endpoint, query, variables).then((data) => console.log(data));

在此示例中，我们传递一个 limit 变量来控制查询返回的过去启动的次数，使查询更加动态和强大。

错误处理

没有人喜欢错误，但却是写代码的重要部分。

graphql request 使错误处理变得简单：

request(endpoint, query, variables)
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

通过将 .catch 方法链接到请求，可以轻松处理出现的任何错误。

设置 Headers

可以设置标头以进行身份验证，graphql-request 可以毫不费力地做到这一点：

const headers = {
  Authorization: 'Bearer YOUR_ACCESS_TOKEN',
};
request(endpoint, query, variables, headers).then((data) => console.log(data));

这在使用需要身份验证的 API 时特别有用。

如何在 Apifox 中创建 GraphQL 请求

如果你使用过 Apifox 等工具，那你肯定知道与 graphql request 集成后有多方便。Apifox 是用于 API 管理和测试的强大工具，将其与 GraphQL 请求相结合可以简化工作流程。

要在项目中创建新的 GraphQL 请求，需要在「Body」中选择「GraphQL」。

在「运行」tab 中输入 URL，可以看到 Query 旁显示「已获取 Schema」，如果未自动获取，可以点击旁边的手动获取按钮，启用查询表达式的“代码补全”功能，辅助输入查询语句。

Query 语句支持使用 GraphQL 变量进行请求。具体使用请参考 GraphQL 语法。

GraphQL 真实使用场景

为了真正了解 graphql request 的强大功能，让我们看一些现实世界的用例。

单页应用程序（SPA）

对于 SPA，性能是关键。graphql request 是轻量级的，非常适合需要最大限度减少开销的环境。通过使用 GraphQL ，可以高效地获取数据并保持应用程序平稳运行。

服务器端渲染（SSR）

在 SSR 场景中，数据在提供页面时时刻准备就绪。graphql request 不仅速度快，且易用，所以是服务器端获取数据的绝佳选择。无论是使用 Next.js、Nuxt.js 还是其他 SSR 框架，GraphQL 都可以无缝地融入数据获取策略。

移动应用程序

由于网络速度和设备功能等限制，移动应用程序通常需要尽可能高效。graphql request 的最小占用量可确保应用程序保持响应速度和效率，从而提供更好的用户体验。

GraphQL 最佳实践

为了充分利用 graphql request，有一些最佳实践：

模块化 Query

通过模块化来保持 query 井井有条，使代码库更易于维护和理解。

// queries.js
import { gql } from 'graphql-request';
export const GET_LAUNCHES = gql`
  {
    launchesPast(limit: 5) {
      mission_name
      launch_date_utc
      rocket {
        rocket_name
      }
      links {
        video_link
      }
    }
  }
`;
// main.js
import { request } from 'graphql-request';
import { GET_LAUNCHES } from './queries';
const endpoint = 'https://api.spacex.land/GraphQL/';
request(endpoint, GET_LAUNCHES).then((data) => console.log(data));

错误记录

实施强大的错误日志记录以快速识别和修复问题对于维护应用程序的可靠性至关重要。

request(endpoint, query)
  .then((data) => console.log(data))
  .catch((error) => {
    console.error('graphql request failed:', error);
    // Additional logging logic
  });

使用 TypeScript

使用 TypeScript，利用其类型检查功能在开发过程的早期捕获错误。

import { request, gql } from 'graphql-request';
const query = gql`
  {
    launchesPast(limit: 5) {
      mission_name
      launch_date_utc
      rocket {
        rocket_name
      }
      links {
        video_link
      }
    }
  }
`;
interface Launch {
  mission_name: string;
  launch_date_utc: string;
  rocket: {
    rocket_name: string;
  };
  links: {
    video_link: string;
  };
}
request<{ launchesPast: Launch[] }>(endpoint, query)
  .
then((data) => console.log(data))
  .catch((error) => console.error(error));

总结

graphql request 是一个强大、高效且易于使用的库，可以极大地简化 GraphQL 查询。无论是处理小型个人项目还是大型应用程序，它都能提供我们所需的性能和灵活性。

通过将 graphql request 与 Apifox 等工具集成，你可以增强开发工作流程，从而更轻松地测试、记录和管理 API。通过从 SPA 到移动应用程序的实际用例，graphql request 被证明是任何开发人员工具包中的多功能工具。

还在等什么？在你的下一个项目中尝试 GraphQL 并亲自体验其中的好处吧！

graphql-request：满足 API 需求的轻量级架构