在现代的 Web 开发中，使用 GraphQL 服务来获取数据十分普遍而且便利。而 Apollo Client 是一个用于构建高性能、完整的 GraphQL 客户端的库，它提供了简单易用的工具，帮助你在 Web 应用程序中管理 GraphQL 查询的状态。在这篇文章中，我们将讨论如何在 Next.js 应用中使用 Apollo Client。
安装 Apollo Client
首先，在你的 Next.js 应用中安装 Apollo Client：
npm install apollo-boost react-apollo graphql
以上命令会安装 Apollo Client 的最新版本，以及用于在 React 中使用 Apollo Client 的库react-apollo。
配置 Apollo Client
在应用程序中，你将需要创建一个 Apollo Client 的实例，其中包括定义了 GraphQL 服务端访问地址（通常称为 GraphQL endpoint）以及一些其他选项的配置。以下是一个简单的配置示例：
import ApolloClient from 'apollo-boost'; const client = new ApolloClient({ uri: 'http://localhost:4000/graphql', });
该代码创建了一个名为 client 的新实例，使用 uri 配置项指定了 GraphQL endpoint URL。
在组件中使用 Apollo Client
Apollo Client 可以和任意一种 JavaScript UI 库进行集成，包括 React、Vue 和 Angular。在这里，我们将介绍如何在 Next.js 的 React 组件中使用 Apollo Client。
Querying
React 组件中使用 Apollo Client 的关键是 Query 组件。Query 组件可以通过配置自动获取数据，而不必你自己手动发送 GraphQL 查询。
以下是一个简单的例子，展示如何使用 Query 组件从 GraphQL 服务器获取数据：
-- -------------------- ---- ------- ------ - ----- - ---- --------------- ------ --- ---- -------------- ----- --------- - ---- ----- - ----- - ----- ------ - - -- ----- ----- - -- -- - ------ ------------------ --- -------- ------ ---- -- -- - -- --------- ------ ------------- -- ------- ------ ------- ------------------ ------ - ---- ------------------ ------ ------ -- -- - --- ------------ ------------------------ -- -------- ----- --- ----- -- -- -------- - ------ ------- ------展开代码
以上代码定义了一个 GraphQL 查询 GET_BOOKS，其返回了一些图书的 title 和 author。
通过在 Query 组件的 query 属性中指定查询，你就可以使用查询中返回的数据来渲染组件。Query 组件的渲染函数包括以下参数：
loading：如果正在加载数据，则为true。error：如果获取数据时出现错误，则包含错误信息。data：如果数据已成功获取，则包含获取到的数据。
在上述示例中，如果数据未加载，则显示 "Loading..."；如果获取数据时出现错误，则显示错误信息。如果成功获取数据，则将每个书籍的 title 和 author 显示在一个无序列表中。
Mutations
除了获取数据外，还可以使用 Apollo Client 将数据写入 GraphQL 服务器。这可以通过使用 Mutation 组件完成。
以下是一个简单的例子，展示如何使用 Mutation 组件将新的书籍添加到服务器：
-- -------------------- ---- ------- ------ - -------- - ---- --------------- ------ --- ---- -------------- ----- -------- - ---- -------- --------------- -------- -------- -------- - -------------- ------- ------- -------- - ----- ------ - - -- ----- ------- - -- -- - --- ------ ------- ------ - --------- -------------------- ---------- - ---- -- -- - ----- ----- ------------- -- - ------------------- --------- ---------- - ------ ------------ ------- ------------ - --- ----------- - --- ------------ - --- -- - ------ ----------- ----------------- ------ ----------- -- - ----- - ----- -- -- ------ ----------- ------------------- ----- ----------- -- - ------ - ----- -- -- ------- ----------------- ------------- ------- ------ -- ----------- -- -- ------ ------- --------展开代码
以上代码定义了一个 Mutation 组件，其中的 mutation 属性指定了将书籍添加到服务器的 GraphQL mutation。
可以看到，在组件中定义了两个输入框，分别用于输入书籍的 title 和 author。当表单被提交时，addBook 函数会被调用，并将书籍信息作为变量传递给 ADD_BOOK GraphQL mutation。
小结
在这篇文章中，我们介绍了如何在 Next.js 应用中使用 Apollo Client。具体而言，我们演示了如何安装 Apollo Client、配置 Apollo Client 和在 React 组件中使用 Apollo Client 从 GraphQL 服务器获取数据和将数据写入服务器。
这只是一个入门级别的介绍，如果你想要更深入地了解 Apollo Client，请参阅官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bf48e70c976d473a3d297d
