使用 apollo-link-http 的 npm 包教程

简介

Apollo Link 是一个轻量且可扩展的工具，用于管理 GraphQL 应用程序中的网络请求。其中最常用的链接之一是 apollo-link-http，它提供了将 GraphQL 请求发送到 HTTP 服务器的功能。

在本文中，我们将详细介绍如何使用 apollo-link-http，并提供一些示例代码，以帮助您更好地理解和应用该库。

安装

首先，您需要在项目中安装 apollo-link-http。可以使用 npm 进行安装：

npm install apollo-link-http

基础用法

假设您已经有了一个 GraphQL 客户端，并且想要使用 apollo-link-http 将请求发送到服务器。那么，首先需要创建一个 Apollo Link 实例：

import { createHttpLink } from 'apollo-link-http';

const httpLink = createHttpLink({
  uri: 'https://api.example.com/graphql'
});

在这个例子中，我们创建一个名为 httpLink 的实例，并指定了要发送请求的 URI。如果您的服务器需要身份验证信息，则可以在选项中提供相应的配置。

接下来，将创建的 httpLink 实例传递给现有的 Apollo Client 实例即可：

import ApolloClient from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';

const cache = new InMemoryCache();
const client = new ApolloClient({
  link: httpLink,
  cache
});

这里我们创建了一个名为 client 的 Apollo Client 实例，并将 httpLink 作为链接传递给它。我们还指定了一个名为 cache 的内存缓存实例，以便在客户端中保存从服务器获取的数据。

现在，您可以使用 client 实例执行 GraphQL 查询和变异了：

-- -------------------- ---- -------
------ --- ---- --------------

----- ----- - ----
  -
    -------- ------ -
      ----
      -----
    -
  -
--

-------------- ----- -------------- -- ---------------------

上面的代码示例执行了一个名为 query 的 GraphQL 查询，该查询请求用户 ID 为 123 的名称和电子邮件地址。在成功执行查询后，结果将打印在控制台中。

进阶用法

除了基本用法之外，apollo-link-http 还提供了一些高级选项，用于配置请求的行为。下面是一些示例：

更改 HTTP 方法

默认情况下，apollo-link-http 将使用 POST 方法发送 GraphQL 请求。如果您需要使用其他方法（例如 GET 或 PUT），则可以通过选项进行配置：

const httpLink = createHttpLink({
  uri: 'https://api.example.com/graphql',
  fetchOptions: {
    method: 'GET'
  }
});

在这个例子中，我们将 fetchOptions 中的 method 字段设置为 GET，以便使用 GET 方法发送请求。您还可以在 headers 中添加自定义头信息。

配置批量请求

如果您的客户端需要同时发送多个 GraphQL 请求，请使用 apollo-link-batch-http。该库可将多个请求合并成单个 HTTP POST 请求，从而提高性能和效率。

import { createBatchingHttpLink } from 'apollo-link-batch-http';

const batchingHttpLink = createBatchingHttpLink({
  uri: 'https://api.example.com/graphql'
});

在这个例子中，我们使用 createBatchingHttpLink 创建了一个名为 batchingHttpLink 的 batching 链接，并将 URI 指定为服务器端的 GraphQL API。

结论

至此，我们已经详细介绍了如何使用 apollo-link-http 库来管理 GraphQL 应用程序中的网络请求。除了基本用法之外，还有一些高级选项可供配置，以满足各种需求。

通过使用这些链接，您可以轻松地

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/54899