GraphQL 是一个类似于 REST 的 API 查询语言，它可以让开发者更灵活地请求数据，并且可以通过一个请求获取到多个资源。在前端领域中，Apollo Client 是一个流行的 GraphQL 客户端库，它提供了一系列强大的工具帮助我们访问 GraphQL API，本文将介绍如何使用 Apollo Client 访问 GraphQL API。
安装 Apollo Client
首先，我们需要在项目中安装 Apollo Client：
npm install @apollo/client graphql
创建一个 GraphQL Client
在我们可以访问任何 GraphQL API 之前，我们需要创建一个 Apollo Client 实例。在创建 Apollo Client 实例之前，我们需要向它提供 GraphQL API 的地址，这个地址通常称为 GraphQL 端点，示例如下：
import { ApolloClient, InMemoryCache } from '@apollo/client'; const client = new ApolloClient({ uri: 'https://your-graphql-endpoint.com', cache: new InMemoryCache(), });
在上面的例子中，我们创建了一个 Apollo Client 实例，并向它提供了 GraphQL API 的地址。此外，我们还创建了一个缓存实例，该实例将保存通过 Apollo Client 请求的数据。
查询数据
通过 Apollo Client 查询 GraphQL API 是非常容易的。我们可以通过内置的 useQuery 钩子来查询数据，并且还可以使用 gql 函数来构建我们的查询。例如，下面的代码查询 GitHub API 中的前 10 名仓库：
-- -------------------- ---- ------- ------ - --------- --- - ---- ----------------- ----- ---------------- - ---- - ------ - ------------------- --- - ----- - ---- --- - - - - -- -------- -------------- - ----- - -------- ------ ---- - - --------------------------- -- --------- ------ ------------------ -- ------- ------ -------- ------- ------ - ---- ------------------------------------------------ -- - --- ---------------------- -- ------------------------------------------- ----- --- ----- -- -展开代码
我们首先使用 useQuery 钩子和 gql 函数来构建我们的查询。然后，我们可以在 Repositories 组件中使用查询数据。如果正在加载数据，我们将显示一个“Loading…”文本。如果发生错误，将显示“Error :(”文本。最后，如果成功获取数据，我们将在页面上呈现前 10 名仓库的名称和 URL。
更新数据
通过 Apollo Client 更新 GraphQL API 中的数据也很容易。在 Apollo Client 中，我们可以通过内置的 useMutation 钩子来创建一个 mutation，然后使用返回的函数来提交 mutation，示例如下：
-- -------------------- ---- ------- ------ - ------------ --- - ---- ----------------- ----- -------- - ---- -------- -------------- -------- - ------------- ------ - -- ---- - - -- -------- --------- - --- ------ ----- --------- - ---- -- - ---------------------- ------ - ----- ----- ------------- -- - ------------------- --------- ---------- - ----- ----------- - --- ----------- - --- -- - ------ ----------- -- - ----- - ----- -- -- ------- ----------------- ------------- ------- ----- - --------------- ------ ----------------------- - ----- ------ -- -展开代码
在上面的示例中，我们首先定义了一个名为 ADD_TODO 的 mutation，该 mutation 接受一个名为 text 的字符串参数，并创建一个新的 todo。然后，我们在 AddTodo 组件中定义一个 ref，这将用于获取表单中输入的值。接着，我们使用 useMutation 钩子来创建一个 mutation，然后在表单提交时调用该 mutation。最后，我们还使用 Apollo Client 返回的 data 属性来显示添加的 todo。
指导意义
在本文中，我们介绍了如何使用 Apollo Client 客户端访问 GraphQL API。使用 Apollo Client，我们可以轻松地查询和更新 GraphQL API 中的数据。如果您正在开发一个需要从 GraphQL API 获取数据的应用程序，那么 Apollo Client 将成为您的首选 GraphQL 客户端库之一。此外，Apollo Client 支持许多先进的功能，例如要素和本地状态管理，以及近乎于实时的查询结果推送等。感谢您阅读本文，希望您能够从中学到一些有用的知识。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c00a6e314edc26846142c3
