随着 Web 应用程序的复杂性增加，处理和管理数据变得更加困难。GraphQL 是一个强大的查询语言和运行时，可以帮助开发人员高效地管理数据。与传统的 RESTful API 相比，GraphQL 具有更高的灵活性和通用性，能够让我们更好地处理 Web 应用程序的数据。
在本文中，我们将探讨如何在 React 中使用 GraphQL 来管理数据。本文假设您已经熟悉了 React 和 GraphQL 的基础知识。
使用 Apollo Client 进行数据管理
我们可以使用 Apollo Client 来在 React 中管理数据。Apollo Client 是一个流行的 GraphQL 客户端库，它提供了许多有用的功能，如数据缓存和支持 WebSocket。Apollo Client 使得 React 中的 GraphQL 集成变得更加容易。
安装 Apollo Client
我们需要安装 Apollo Client 的 React 插件 @apollo/client。在您的 React 项目中运行以下命令：
npm install @apollo/client
Apollo Provider
为了使用 Apollo Client，我们将需要在 React 应用程序的根级别创建一个 ApolloProvider。ApolloProvider 组件会将 Apollo Client 的实例作为上下文传递给整个应用程序：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ------------
------ - ------------- -------------- -------------- - ---- -----------------
----- ------ - --- --------------
---- ----------------------------------------
------ --- ---------------
---
-------
--------------- ----------------
---- --
------------------
-------------------------------
--在这个例子中，我们使用了 ApolloClient 类创建了一个新的客户端实例。构造函数接受一个 uri 参数和一个缓存实例。uri 参数是指向 GraphQL API 的 URL。InMemoryCache 是一个内置的缓存实现，用于将数据保存在客户端内存中。
查询数据
我们可以使用 useQuery hook 或 Query 组件从 GraphQL API 中查询数据。下面是一个例子，展示了如何使用 useQuery hook：
-- -------------------- ---- -------
------ - --------- --- - ---- -----------------
----- -------------- - ----
----- ---------------- -
--------------- ------ -
--------
----
-
-
--
-------- --------------- -
----- - -------- ------ ---- - - -------------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ ----------------- --------- ---- -- -- -
---- ---------------
-------------- ----------
------
---
-在这个例子中，我们使用了 useQuery hook 查询 GetExchangeRates GraphQL 查询。我们还定义了一个 EXCHANGE_RATES 常量，该常量包含 GetExchangeRates 查询的文本。useQuery 返回 loading、error 和 data 对象，然后我们可以将数据使用 React 组件的方式进行渲染。
变更数据
为了从客户端修改数据，我们可以使用 useMutation hook 或 Mutation 组件。下面是一个例子，展示了如何使用 useMutation hook：
-- -------------------- ---- -------
------ - ------------ --- - ---- -----------------
----- ----------- - ----
-------- ------------------ -------- ------------- -------- -
----------------- ------- ------- ------------ -------------- -
--
-----
-----------
-
-
--
-------- ------------ -
--- ----------- -----------------
----- ------------ - -------------------------
------ -
-----
-----
----------- -- -
-------------------
------------
---------- -
------ -----------------
------------ ----------------------
-
---
---------------- - ---
---------------------- - ---
--
-
------
--------- -- -
---------- - -----
--
-------------------
--
------
--------- -- -
---------------- - -----
--
-------------------------
--
------- ----------------- -------------
-------
------
--
-在这个例子中，我们使用了 useMutation hook 创建了一个 createTodo 变更操作。我们在表单的 onSubmit 回调中调用了 createTodo，并将表单输入值传递给 createTodo 的 variables 参数。
缓存数据
Apollo Client 提供了一个强大的缓存实现，可以显著提高应用程序的性能。缓存会自动缓存查询结果，并在以后的查询中重用结果。这意味着如果我们发出相同的查询，客户端将不必再次从远程服务器获取数据。
配置缓存
要使用 Apollo Client 的缓存实现，我们需要在 ApolloClient 实例化中传入一个缓存实例。在我们的示例中，我们将 new InMemoryCache() 传递给 cache 参数：
const client = new ApolloClient({
uri: 'https://my-graphql-server.com/graphql',
cache: new InMemoryCache()
});正确地更新缓存
使用 Apollo Client 的缓存实现时，我们必须小心地处理数据变更。如果不正确地更新缓存，我们的应用程序可能会出现意外的行为，例如不更新UI或错误的数据显示。在下面的示例中，我们将查询的结果添加到缓存中：
-- -------------------- ---- -------
------ - ------------ --- - ---- -----------------
------ - ---------- - ---- ------------
----- ----------- - ----
-------- ------------------ -------- ------------- -------- -
----------------- ------- ------- ------------ -------------- -
--
-----
-----------
-
-
--
-------- ------------ -
--- ----------- -----------------
----- ------------ - ------------------------ -
------------- - ----- - ---------- - -- -
----- - ----- - - ----------------- ------ ---------- ---
------------------
------ -----------
----- - ------ -------------------------- -
---
-
---
------ -
-----
-----
----------- -- -
-------------------
------------
---------- -
------ -----------------
------------ ----------------------
-
---
---------------- - ---
---------------------- - ---
--
-
------
--------- -- -
---------- - -----
--
-------------------
--
------
--------- -- -
---------------- - -----
--
-------------------------
--
------- ----------------- -------------
-------
------
--
-在这个例子中，我们使用了 update 选项来更新缓存。我们首先调用 readQuery 来获取当前已存在的缓存数据。然后，我们在 writeQuery 中使用 concat 将新创建的 todo 追加到缓存中。
结论
在本文中，我们探讨了如何在 React 中使用 GraphQL 和 Apollo Client，以高效地管理和处理数据。我们了解了如何设置 Apollo Client，并使用 useQuery 和 useMutation hooks 进行查询和变更数据。我们还看到了如何使用 Apollo Client 的缓存实现，以提高应用程序的性能。
如果您希望深入了解这个主题，请一定参考官方文档和其他资源。GraphQL 的生态系统正在发展非常迅速，并且有着无限的发展潜力。在您的下一个项目中，考虑使用 GraphQL 和 Apollo Client，以更好地处理和管理数据！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672aa036ddd3a70eb6d062f6