GraphQL 是一种用于 API 的查询语言，它能够提供更高效、强大和灵活的数据查询。然而，当我们在前端应用中使用 GraphQL 时，我们通常还需要对数据进行本地状态管理。在这篇文章中，我将分享一些 GraphQL 的本地状态管理技巧，帮助你更好地管理和使用 GraphQL 查询结果。
为什么需要本地状态管理
首先，让我们看一下为什么我们需要本地状态管理。使用 GraphQL 查询 API 可以很容易地获取数据，也可以控制数据的粒度。但与此同时，我们通常需要对这些查询结果进行一些操作，比如过滤、排序、分页等。这时，我们就需要将这些查询结果存储在本地，以便更好地管理和操作它们。
另外，当我们需要在应用中进行一些交互时，本地状态管理也非常有用。比如说，在一个电商应用中，我们需要将一组商品添加到购物车中，这时就需要将这些商品的信息存储在本地。本地状态管理可以帮助我们处理这些场景，让应用更加流畅和交互友好。
下面，我将介绍一些 GraphQL 的本地状态管理技巧，帮助你更好地管理和使用 GraphQL 查询结果。
使用 Apollo Client
Apollo Client 是一个用于 JavaScript 的 GraphQL 客户端，提供了本地状态管理的能力。它可以帮助我们管理应用中的 GraphQL 查询结果，并提供一些方便的 API 来进行查询、数据变更等操作。
首先，我们需要创建一个 Apollo Client 实例，并将它传递给应用的根组件。这样，我们就可以在整个应用中使用这个实例，并将查询结果存储在它的缓存中。
-- -------------------- ---- -------
------ - ------------- ------------- - ---- -----------------
----- ------ - --- --------------
---- -----------------------------------
------ --- ----------------
---
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--接下来，我们可以使用 Apollo Client 提供的 useQuery、useMutation 等钩子来进行查询、数据变更等操作。这些钩子会从 Apollo Client 的缓存中获取数据，并提供方便的 API 来进行数据操作。比如说，下面的代码展示了如何使用 useQuery 钩子来获取一个文章列表：
-- -------------------- ---- -------
------ - -------- - ---- -----------------
------ - --- - ---- -----------------
----- -------------- - ----
----- -
-------- -
--
-----
-------
-
-
--
-------- -------------- -
----- - -------- ------ ---- - - -------------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
----
-------------------------- -- -
--- -----------------
------------------------
------------------------
-----
---
-----
--
-在这个例子中，我们使用 useQuery 钩子来获取文章列表。useQuery 钩子会先从 Apollo Client 的缓存中获取数据。如果没有找到缓存数据，它就会向后端发送一个 GraphQL 查询，并将查询结果存储在缓存中。我们可以在组件中直接访问查询结果，并进行渲染操作。
缓存数据正规化
当我们使用 Apollo Client 管理查询结果时，它会将查询结果存储在一个缓存中。这个缓存类似于一个数据库，它会将查询结果按照 id 进行索引，并将查询结果正规化存储。这样，我们就可以在查询结果中直接进行访问，而不需要深入嵌套的查询结果中获取数据。
比如说，下面的代码展示了一个包含文章和评论的查询结果。我们可以看到，缓存中将文章和评论分别存储在不同的对象中，按照 id 进行索引。
-- -------------------- ---- -------
-
----------- -
----------- --------
------------------------------- ------------------------------- -
- ------ ----------- --
- ------ ----------- -
--
-------------------- - ------ ----------- --
-------------------- - ------ ----------- -
--
------------ -
----------- ----------
--- --
------ ------ ---------
-------- ----- -- -- ----- ------- ----------
--------- -- ------ ----------- --
--
------------ -
----------- ----------
--- --
------ -------- --- ------
-------- ------ --- -- ------ --- -------
--------- -- ------ ----------- -- - ------ ----------- --
--
------------ - ----------- ---------- --- -- -------- ------ --------- --
------------ - ----------- ---------- --- -- -------- ------------ ------------ --
------------ - ----------- ---------- --- -- -------- ------- --- --------- -
-这种缓存数据正规化带来了很多好处。首先，它提高了访问缓存数据的效率。我们可以直接访问缓存对象，并通过 id 获取具体的数据，而不需要逐层深入查询结果中。
此外，缓存数据正规化还可以帮助我们进行数据更新。当我们对查询结果进行更新时，Apollo Client 会自动更新缓存中对应的数据，并使得我们可以在组件中直接访问最新的数据。比如说，下面的代码展示了如何使用 useMutation 钩子来添加一个评论。
-- -------------------- ---- -------
------ - ----------- - ---- -----------------
------ - --- - ---- -----------------
----- -------------------- - ----
-------- ---------------------- ---- --------- -------- -
--------------------- ----------- -------- --------- -
--
-------
-
-
--
-------- ---------------- --------- -- -
----- --------- ----------- - -------------
----- ------------ - --------------------------------- -
------------- - ----- - ---------- - -- -
--------------
--- ---------------- ----------- ---------- --- --------- ---
------- -
------------------------- - --- -
----- ------------- - ---------------------
----- -----------
--------- ----
-------- ---------- -- ------- -
--
-------
-
-
---
------ --------------------- ---------------
-
-
---
-
---
-------- --------------- -
-------------------
------------ ---------- - ---------- ------- - ---
---------------
-
------ -
----- ------------------------
------ ----------- --------------- ----------- -- --------------------------- --
------- ----------------- ----------------
-------
--
-在这个例子中，我们使用 useMutation 钩子来添加一个评论。useMutation 钩子会调用后端 GraphQL API，然后将查询结果存储在缓存中。我们通过 cache.modify API 来更新缓存数据。这里，我们通过 cache.identify API 来获取文章对象的 id，并通过 cache.writeFragment API 来添加新的评论数据。这样，我们就可以在组件中直接访问最新的评论数据。
使用 DataContext
除了使用 Apollo Client 进行本地状态管理之外，我们还可以使用 React 的 useContext 钩子和 createContext API 来实现本地状态管理。这种方式的好处是它更加轻量，并且更适合一些简单的应用场景。
首先，我们需要使用 createContext API 来创建一个 DataContext，用于存储应用中的数据。然后，我们可以通过 useContext 钩子来访问 DataContext 中存储的数据。
-- -------------------- ---- -------
------ - -------------- ----------- -------- - ---- --------
----- ----------- - ----------------
-------- ------------- -
----- ------ -------- - -------------
------ -
--------------------- -------- ----- ------- ---
--------------- --
-----------------------
--
-
-------- ---------------- -
----- - ----- ------- - - ------------------------
-------- ----------- -
----------------- ----------------
-
------ -
-----
----
-------------- -- -
--- ----------------------
---
-----
------- --------------------------------
------
--
-在这个例子中，我们创建了一个 DataContext，用于存储数据。我们可以通过 useContext(DataContext) 钩子来访问 DataContext 中存储的数据。在 ChildComponent 组件中，我们可以通过 setData 方法来更新数据，并在组件中渲染最新的数据。
结论
GraphQL 是一种强大的 API 查询语言，在前端应用中使用 GraphQL 可以方便地获取数据和控制数据的粒度。然而，当我们需要对查询结果进行操作时，本地状态管理就非常重要了。在本文中，我们介绍了一些 GraphQL 的本地状态管理技巧，帮助你更好地管理和使用 GraphQL 查询结果。当然，这些技巧只是冰山一角，你可以深入学习 GraphQL 和 Apollo Client，并掌握更多的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671b1b459babaf620fa7fd3a