随着现代 Web 应用程序的日益复杂和数据密集型，客户端缓存成为保持应用程序快速和响应的重要部分。GraphQL 作为一种现代的数据查询语言，它的优越性能以及对数据的细粒度控制是通常 REST API 所不能比拟的。本文将介绍一些 GraphQL 最佳实践，包括如何正确地利用客户端缓存来提高应用性能。
GraphQL 中的客户端缓存
GraphQL 不允许客户端直接对数据进行缓存。GraphQL 查询的响应数据是不可缓存的，因为查询可能是动态的，它可能随时返回新的数据。同样，GraphQL 中的 Mutation(变更)查询是不用缓存的，因为它们可能更改了数据，并且这些更改需要相应地反映在 UI 中。
唯一可以缓存的 GraphQL 查询是 Query，它允许我们从服务器获取静态数据，这些数据可以被安全地缓存在客户端内存或浏览器缓存中。
在 GraphQL 查询中，我们可以选择性地指定需要获取的字段，也可以对查询结果进行深度操作，这使我们在数据的缓存中能够实现更加精细的减缓。而且在 GraphQL 中，每个字段都能够确切表示一个数据端点，这使我们能够更好地利用缓存。
实施 GraphQL 客户端缓存
为了实现 GraphQL 客户端缓存，我们可以使用一些现代的客户端缓存解决方案。下面是一些值得推荐的 GraphQL 客户端缓存库：
1. Apollo Cache
推荐使用 Apollo Cache。它是由 Apollo 开发的 GraphQL 客户端缓存库。它提供了三种缓存策略：cache-first，cache-only 和 cache-and-network。它可以安全地将数据存储在浏览器缓存中，并且可以使用 key-value 存储机制使我们更好地管理查询结果。下面是 Apollo Cache 的示例代码：
import { InMemoryCache } from 'apollo-cache-inmemory';
import ApolloClient from 'apollo-client';
const client = new ApolloClient({
cache: new InMemoryCache(),
uri: 'http://localhost:4000/graphql',
});2. Relay
Relay 是由 Facebook 开发的一个 GraphQL 客户端框架。它具有直观的缓存 API，支持 relay-store 和 relay-network-layer，这对于缓存和网络请求的管理非常重要。下面是 Relay 的示例代码：
-- -------------------- ---- -------
------ - ------------ -------- ------------- ----- - ---- ----------------
----- ------- - -------------------------- ---------- --
----------------- -
------- -------
-------- - --------------- ------------------ --
----- ----------------
------ ---------------
----------
---
---------------- -- ------------------
----- ------ - --- ---------------
----- ----- - --- --------------
----- ----------- - --- -------------
--------
------
---示例代码
以下是一个实际的缓存操作代码示例，它使用 Apollo Cache 和 React。
首先，我们需要定义 GraphQL 查询。这个查询是一个 Query 类型，所以我们可以安全使用缓存。
-- -------------------- ---- -------
------ --- ---- --------------
------ ----- --------- - ----
----- ---------------- -------- -
------------ ------- -
-----
------
-
-
--我们还需要配置 Apollo Client。下面是如何创建 Apollo Client 的示例代码。
-- -------------------- ---- ------- ------ ------------ ---- ---------------- ------ - -------------- ----------------------- - ---- ------------------------ ------ - -------- - ---- ------------------- ----- ----- - --- --------------- ----------------- -------- -- -------------------------------- --- ----- ------ - --- -------------- ------ ----- --- ----------- ---
现在我们需要将此 client 传递到 React 中。使用 react-apollo 包挂载组件到 client 上。下面是如何创建一个缓存操作的组件的 示例代码。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------------
------ - --------- - ---- ------------
----- -------- - -- ----- -- -- -
------ ----------------- ------------ ----- ---
--- ----- -------- ----- -- -- -
-- --------- -
------ ----------------------
-
-- ------- -
------ --------------------
-
------ -
----
------------------ ------ ------ -- -- -
--- ------------
----------------
----- ------------
-----
---
-----
--
--
--------
--
------ ------- ---------这个组件将自动缓存数据，因为我们通过 Query 组件从 Apollo Client 获取书籍信息，并且我们用一个回调函数来构建 UI。
结论
GraphQL 客户端缓存有助于提高应用程序的性能和响应速度。通过精细的数据查询，我们可以根据需要缓存最新的数据，并在需要时从缓存中取回数据。Apollo Cache 和 Relay 都是强大的 GraphQL 客户端缓存库。我们应该根据自己的应用程序需求选择合适的缓存库。
本文介绍了使用 Apollo Cache 和 React 实现 GraphQL 客户端缓存的示例代码。希望这篇文章能够为你了解 GraphQL 客户端缓存提供帮助和指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a6195d91dce0dc880fba4