在前端开发中，使用 GraphQL 可以帮助我们更快速地获取需要的数据。而 @types/graphql-deduplicator npm 包则提供一些额外的工具，帮助我们更好地优化GraphQL的请求和响应。在本文中，我们将介绍如何使用该 npm 包，并讲解其中的一些细节。
安装
在使用 @types/graphql-deduplicator 之前，需要先安装依赖的 npm 包：
npm install graphql npm install graphql-deduplicator npm install @types/graphql-deduplicator
使用
接下来，我们将按照以下步骤来使用 @types/graphql-deduplicator。
引入
首先，需要在项目中引入该包：
import { cacheExchange, Cache } from '@urql/exchange-graphcache';
import { dedupExchange } from 'graphql-deduplicator';这里采用了其他几个依赖包中的内容。具体可以去npm官网查看。
初始化 cache
在使用 graphql-deduplicator 之前，我们需要先对 cache 做一些初始化工作。我们可以使用 @urql/exchange-graphcache 这个 npm 包来实现，而在 Graphcache 中使用 normalize 函数来规范化并缓存 GraphQL 数据。
const cache = new Cache({
// 定义 rules 规则
});定义 rules 规则
@types/graphql-deduplicator 中的关键点是对规则的定义。这是一个非常重要的步骤，它定义了哪些查询应该被缓存，缓存应该保留多久等等。
-- -------------------- ---- -------
----- - ------------- - - ---------------
------ -
-
-- ------ ------ --- -------------------
------ --------------------------
------------- -------
------------ ------
--
-
-- -- ---- -------
------ -----------------------
------------- ---- - -- - ---
------------ ---- - -- - --
--
-
-- ---- ----- -----
------ ----------------------------------
--------------- -----
------------- ---- - -- - --
------------ ---- - ---
--
--
---其中，我们定义了三个不同类型的 rules 规则，如下：
Apollo Client 的传统 cache-normalization，通过参数
query定义缓存的查询语句，并设置timeToLiveMs和staleTimeMs。当数据已经被缓存且未过期时，查询数据将使用缓存。缓存 User 接口的请求结果。同样，通过
query定义缓存语句，并设置timeToLiveMs和staleTimeMs以控制缓存时效。缓存可变 Query 的表单请求。同样地，通过
query定义缓存语句，并将isMutableQuery设置为true来表明此处需要缓存可变数据，之后同样设置timeToLiveMs和staleTimeMs。
设置 cacheExchange
最后，将 cache 和规则通过 cacheExchange 方法进行关联，并对 Graphql 请求进行处理：
createClient({
url: 'https://example.com/graphql',
cache: cacheExchange,
});若使用 apollo-client，也可以如下设置：
const link = ApolloLink.from([
httpLinkWithToken,
dedupExchange({
rules: MyRules,
// 额外的自定义配置
extraConfig: { fetchFullResult: true },
}),
]);示例代码
下面是完整的代码示例：
-- -------------------- ---- -------
------ - ------------- -------------- ------------- - ---- -------
------ - -------------- ----- - ---- ----------------------------
------ - ------------- - ---- -----------------------
----- ----- - --- -------
-- -- ----- --
---
-- ---------
----- ------- - -
-
-- ------ ------ -----
------ --------------------------
------------- -------
------------ ------
--
-
-- -- ---- -------
------ -----------------------
------------- ---- - -- - ---
------------ ---- - -- - --
--
-
-- ---- ----- -----
------ ----------------------------------
--------------- -----
------------- ---- - -- - --
------------ ---- - ---
--
--
----- - ------------- - - ---------------
------ --------
---
----- ------ - --------------
---- ------------------------------
------ --------------
---
----- --- - -- -- -
----- -------- -------- - ----------
------ -
-
------ -
-----
-
-
--
---
------ -
--
------------ -- -
--
-----------------------------------
------- ----------------------------------
---
--
------------- -- --------- --------- ---- ------------
---
--
--
----------------
--------- ---------------
---- --
------------
-------------------------------
--总结
本文介绍了如何使用 @types/graphql-deduplicator，以及其中的一些关键点。正确地使用该 npm 包能够帮助我们更好地优化 GraphQL 请求和响应，从而更好地提高我们的应用程序性能。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedae72b5cbfe1ea0610e4a