概述
@shopify/webpack-persisted-graphql-plugin 是一个 Webpack 插件，它可以帮助前端开发人员在开发过程中使用 GraphQL 进行 API 数据查询，在开发过程中保存查询结果到本地，以便在下一次开发过程中实现数据的持久化访问，提高开发效率。
安装
安装 @shopify/webpack-persisted-graphql-plugin 很简单，只需要使用 npm 或 yarn 进行安装即可：
npm install --save-dev @shopify/webpack-persisted-graphql-plugin
或者：
yarn add --dev @shopify/webpack-persisted-graphql-plugin
配置
使用插件需要在 webpack.config.js 中进行配置。配置分为两部分：声明插件和声明 GraphQL 查询。
-- -------------------- ---- -------
-- -----------------
----- ----------------------------- - -----------------------------------------------------
-------------- - -
-- ---
-------- -
--- -----------------------------
-- ----------
---
-- ---
--
------- -
------ -
-
----- -------------------
-------- ---------------
------- ---------------------
--
--
--
--插件配置项
| 配置项 | 说明 | 类型 | 默认值 |
|---|---|---|---|
context |
用于生成查询 ID 的上下文对象 | ?Object |
{} |
fileName |
保存查询结果的文件名 | ?string |
query-cache.json |
persistedQueryReplacer |
用于替换查询模板中的变量 | (name: string) => mixed |
null |
persistedQueryDir |
保存查询结果的目录 | string |
process.cwd() |
useExplicitId |
手动指定查询 ID | boolean |
false |
GraphQL 配置项
GraphQL 查询的声明方式有不同的方式。我们可以使用 .graphql 或 .gql 文件，或使用 import 和 require 语句来声明 GraphQL 查询。具体实现方法如下：
-- -------------------- ---- ------- -- --------------------- ----- ------- - -- --- - -- -------- ------ ----- ---- -------------------------- -- ----- ----- ----- - -------------------------------
在 Webpack 配置文件中，我们需要将 .graphql 或 .gql 文件进行处理，以便 Webpack 将它们视为正确的模块。我们可以使用 graphql-tag/loader 对 GraphQL 查询进行转换。例如：
-- -------------------- ---- -------
------- -
------ -
-
----- -------------------
-------- ---------------
------- ---------------------
--
--
--至此，配置就完成了，我们可以开始使用 @shopify/webpack-persisted-graphql-plugin 了。
使用
生成查询 ID
通过 @shopify/webpack-persisted-graphql-plugin，我们可以很方便地为 GraphQL 查询生成 ID。我们可以将查询 ID 保存在本地，以便我们在下一次查询相同数据时可以直接使用 ID，而无需重新查询。下面我们对查询进行 ID 生成：
-- -------------------- ---- -------
------ ------------------- ---- ----------
------ --- ---- --------------
------ ---------- ---- ----------------
----- ------ - ------------------------------
----- -------- - ----
----- ------------ ---- -
-------- ---- -
--
-
-
--
----- ------- - -------------------------- - --- - --------------------------------------在上面的代码中，我们传入了一个查询模板和一个 schema 对象，使用 hash 函数生成了一个查询 ID。这个 ID 可以用于查询结果的缓存，以便在下一次查询相同数据时，可以直接使用缓存结果。
缓存查询结果
我们可以使用插件将查询结果缓存到本地。当下次查询相同数据时，可以直接从本地加载查询结果，而无需重新查询。具体的代码实现如下：
-- -------------------- ---- -------
-- ----------------
------ ---------- ---- ----------------
------ ------- -------- ------------------- ------ - ---- -
--- -
----- ---------- - --------------------------------------
----- --------- - --------------------
-- ------------ -
------ -----
-
----- ------ - ----------
------ -----
- ----- ------- -
---------------------
------ -----
-
-
------ -------- ------------------------- ------ ---- -
--- -
----- ---------- - --------------------------------------
----- -------- - ----------------- ----------- -
---------- -------
---
---------------------------------------------- ------------------------ ----- ----
- ----- ------- -
---------------------
-
-
-- ------
------ ------------------- ---- ----------
------ --- ---- --------------
------ --------- ---- ----------
------ ------- ---- -------------
------ ---------- ---- ----------------
------ --------- ---- ------------------
----- ------ - ------------------------------
----- -------- - --------- -- ------
----- ------- - ----------
----- --------- - -------------------
-- ------------ -
---------------- --------- --------- -------
-------------- -- -
------------------------- ------
------------------ ------ ----- -- ----- --------
---
- ---- -
------------------ ----- ------ ---- ----- --------
-在上述示例代码中，我们首先使用 loadQuery 函数从本地读取查询结果。该函数将查询 ID 作为参数，读取 query-cache.json 文件，并返回缓存在本地的查询结果。
如果本地没有查询结果的缓存，我们可以使用 GraphQL 的 execute 函数执行查询，将结果缓存到本地。
指定查询 ID
在一些情况下，我们需要手动指定查询 ID。这时，将 useExplicitId 配置项设为 true，然后将查询 ID 作为插件的 queryId 参数传入。例如：
-- -------------------- ---- -------
-- -----------------
----- ----------------------------- - -----------------------------------------------------
-------------- - -
-- ---
-------- -
--- -----------------------------
-------------- -----
-------- ----------
---
-- ---
--
------- -
------ -
-
----- -------------------
-------- ---------------
------- ---------------------
--
--
--
--结尾
本文展示了如何使用 @shopify/webpack-persisted-graphql-plugin 插件将 GraphQL 查询结果缓存到本地，并在下一次查询相同数据时使用缓存结果，提高开发效率。在使用插件时，需要注意插件的配置以及 GraphQL 查询的声明方式。本文提供了完整的实例代码，希望能对大家在前端开发中使用 GraphQL 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3cd9aedbf7be33b25670cd