本文将介绍如何使用 npm 包 react-apollo 实现 GraphQL 在 React 应用中的数据管理。
什么是 react-apollo？
react-apollo 是一个为 React 应用提供数据管理的 npm 包，它与 Apollo Client 配合使用，可以使得 React 应用在处理 GraphQL 数据时变得更加简单和高效。
安装 react-apollo
在开始使用 react-apollo 前，需要先安装它。你可以在终端中运行以下命令来安装：
--- ------- ------ ------------ - -- ---- --- ------------
创建一个 Apollo Client
为了使用 react-apollo，我们首先需要创建一个 Apollo Client，可以在应用入口处进行创建：
------ - ------------- ------------- - ---- ----------------- ----- ------ - --- -------------- ---- ------------------------------------ ------ --- ---------------- ---
在上述代码中，我们使用 ApolloClient 和 InMemoryCache 来创建一个 Apollo Client。其中，uri 参数指定了 GraphQL API 的地址，cache 参数指定了数据缓存的方式。
在组件中使用 Query
一旦我们有了一个 Apollo Client，就可以在组件中使用 Query 来获取 GraphQL 数据了。例如，我们可以创建一个组件来显示所有用户：
------ - ---- -------- - ---- -----------------
----- --------------- - ----
----- -
-------- -
--
----
-
-
--
-------- ---------- -
----- - -------- ------ ---- - - --------------------------
-- --------- -
------ ------------------
-
-- ------- -
------ --------- --------------------
-
------ -
----
----------------------- -- -
--- ------------------------------
---
-----
--
-在上述代码中，我们使用 useQuery hook 来发送 GraphQL 查询，并在组件中渲染返回的数据。其中，ALL_USERS_QUERY 是一个 GraphQL 查询，它将返回所有用户的 id 和 name。
在组件中使用 Mutation
除了获取数据外，我们还可以使用 Mutation 来修改数据。例如，我们可以创建一个表单来添加新用户：
------ - ---- ----------- - ---- -----------------
----- ----------------- - ----
-------- -------------- -------- -
------------- ------ -
--
----
-
-
--
-------- ------------- -
----- ------ -------- - -------------
----- --------- - ------- -- - -------------------------------
----- ------------ - ----- ----- -- -
-----------------------
----- ---------
---------- - ---- --
------------- - ----- - -------- ------- - -- -
--------------
------- -
---------------------- - --- -
----- ------ - ---------------------
----- --------
--------- ----
-------- ------- -- ---- -
--
----
-
--
---
------ ------------------ --------
--
--
---
--
---
------------
--
------ -
----- ------------------------
------
-----------
------------
--------------- -- ----------------------------
------------------ - -----
--
------- ------------- -------------------
-------- - ----------- - -------
---------
-------
--
-在上述代码中，我们使用 useMutation hook 来发送 GraphQL 变更，并在提交表单后更新缓存。其中，ADD_USER_MUTATION 是一个 GraphQL 变更，它将添加一个新用户，并返回该用户的 id 和 name。
总结
通过 react-apollo 和 Apollo Client 的帮助，我们可以在 React 应用中更加方便和高效地管理 GraphQL 数据。在本文中，我们介绍了如何创建一个 Apollo Client，并在组件中使用 Query 和 Mutation hooks 来
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/54828