GraphQL 是一种快速、高效、灵活的查询语言,用于构建 API。它提供了一种强大的方式来描述数据的形状,使得客户端可以精确地指定需要从 API 中获取的数据。Apollo Client 是一个用于 React 应用程序的完整 GraphQL 客户端,用于管理查询和本地状态。在本文中,我们将介绍如何在 React 应用程序中使用 Apollo Client 和 GraphQL,并提供一些示例代码,以帮助您更好地理解这些概念。
1. 安装和设置 Apollo Client
要在 React 中使用 Apollo Client,首先需要安装它。可以通过以下命令在项目中安装它:
npm install apollo-boost react-apollo graphql
这将安装 Apollo Boost,它是一个官方推荐的 Apollo 客户端。它结合了一些常见的组件,使设置变得更加容易。它还使用了最常见的默认设置,以便尽快使用。
接下来,您需要为客户端创建一个实例。在 React 中,您可以将它放在 index.js 文件中。下面是一个基本的 Apollo 客户端实例的代码示例:
-- -------------------- ---- ------- ------ ------------ ---- --------------- ------ - -------------- - ---- --------------- ----- ------ - --- -------------- ---- ------------------------- --- ---------------- --------------- ---------------- ---- -- ------------------ ------------------------------- --
在上面的代码中,ApolloProvider 组件是必要的,因为它会将客户端传递给所有其他组件。client
是一个 ApolloClient 的实例,其中 uri 是您的 GraphQL 服务的 URL。
2. 查询数据
一旦设置好 Apollo Client,就可以使用 GraphQL 查询数据了。要执行查询,您需要编写 GraphQL 查询语句。查询语句指定要从服务器获取的数据,以及如何组织和筛选这些数据。
下面是一个基本的 GraphQL 查询的代码示例:
-- -------------------- ---- ------- ------ - --- - ---- --------------- ------ - ----- - ---- --------------- ----- ------------- - ---- ----- - ----- - -- ----- ---- - - -- ----- -------- - -- -- - ------ ---------------------- --- -------- ------ ---- -- -- - -- --------- ------ ------------------ -- ------- ------ -------- ------- ----- ----- - ----------- ------ - ---- --------------- -- - --- -------------- --------------------- ------------------ ----- --- ----- - -- -------- --
在上面的代码中,GET_ALL_POSTS 是一个 GraphQL 查询语句,用于从服务器获取所有帖子的 ID、标题和正文字段。使用 Query 组件将查询传递给 Apollo Client 并执行查询。当加载数据时,需要显示适当的信息。
3. 编写变异
GraphQL 变异用于更新或删除数据。变异指定要更改的数据及其新值。下面是一个基本的 GraphQL 变异的示例代码:
-- -------------------- ---- ------- ------ - --- - ---- --------------- ------ - -------- - ---- --------------- ----- -------- - ---- -------- --------------- -------- ------ -------- - -------------- ------- ----- ------ - -- ----- ---- - - -- ----- ----------- - -- -- - --- ----------- ---------- ------ - --------- -------------------- ---------- - ---- -- -- - ----- ----------- -- - ------------------- --------- ---------- - ------ ----------------- ----- --------------- - --- ---------------- - --- --------------- - --- --- ------ --------- -- - ---------- - ----- -- -- --------- --------- -- - --------- - ----- -------------- ------- ----------------- ------------- ------- -- ----------- -- --
在上面的代码中,ADD_POST 是一个 GraphQL 变异,用于添加新的帖子。使用 Mutation 组件将变异传递给 Apollo Client 并执行变异。表单的 onSubmit 函数触发变异,并将表单的数据传递给变异。添加帖子后,表单将清空。
4. 使用本地状态
Apollo Client 还允许您管理本地状态。您可以使用它来存储和访问应用程序的状态,而无需将其存储在服务器上。下面是一个使用本地状态的示例代码:
-- -------------------- ---- ------- ------ - --- - ---- --------------- ------ - ------ -------- - ---- --------------- ----- ----------- - ---- ----- - ------- ------- - -- ----- ----------------- - ---- -------- ---------------- - ---------------- ------- - -- ----- ------- - -- -- - ---------------- ------ -------------------- --- ---- -- -- ----------- ------------------- -------- --------- ----------------------------- ----------------- -- - ------- ----------- -- -------------------------------------- -- ----------- ----------------- - ----- ------ - --- -------------- ---- -------------------------- ------ --- ---------------- ---------- - --------- - ----------------- --- --- - ----- -- -- - ----- - ------- - - ----------------- ------ ----------- --- ----- ---------- - ------- - -- ------------------ ------ ------------ ----- - -------- ---------- - --- - - - ---
在上面的代码中,GET_COUNTER 查询本地状态中的 counter 值,并显示它。INCREMENT_COUNTER 变异增加 counter 的值。在本地 Apollo Client 中,您需要提供 resolvers,在其中描述如何执行变异。在上面的 resolvers 中,incrementCounter 变异读取当前值,增加它并写入回客户端。
结论
在本文中,我们介绍了如何在 React 中使用 Apollo Client 和 GraphQL。我们讨论了如何查询数据、编写变异和使用本地状态。通过使用 Apollo Client 和 GraphQL,您可以提高应用程序的开发效率并改善用户体验。我们希望这篇文章可以帮助您更好地理解这些概念,并在应用程序中使用它们。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/672010aa2e7021665e009361