前言：在前端开发中，GraphQL 是一个很常见的工具，常常用来处理客户端与服务器之间的 API 调用。但是在开发过程中，GraphQL 查询的数据通常是现场获取的，导致网络请求较多，效率较低。而 @benjie/persistgraphql-webpack-plugin 这个 npm 包就是通过 webpack 将 GraphQL 查询语句与响应结果一起打包为 json 文件来进行持久化缓存，从而提高客户端与服务器之间通信的效率。
安装
该 npm 包需要安装并运行在 webpack 开发环境下。
npm install --save-dev @benjie/persistgraphql-webpack-plugin
如何使用
第一步 - 将 GraphQL 查询语句操作进行持久化
在 webpack 配置文件中添加 persistgraphql-webpack-plugin：
const PersistGraphQLPlugin = require('@benjie/persistgraphql-webpack-plugin');
const path = require('path');
const plugins = [new PersistGraphQLPlugin({
filename: path.join(__dirname, './persisted_queries.json'), // 将 GraphQL 操作语句持久化为此文件
})];第二步 - 在前端代码中使用持久化 GraphQL 查询语句
在前端代码中使用 apollo-boost 客户端构造函数：
-- -------------------- ---- -------
------ - ------------ - ---- ---------------
------ - ------------- - ---- ------------------------
------ - ------------------------ - ---- --------------------------------
------ - ------------ - ---- -----------------------
----- ---- - -------------------------- -- -------
----------------------- ----- -- -- --- --------
------------- ----- -- -
----- ------ - ---------------------------------------
----------------------------
------ ---------------------
--
---
----- ----- - --- ----------------
--------------
------ -- ----
-------- -------------------- -- ----
---
----- ------ - --- -------------- -- -----
---- --------------------------------
------
---第三步 - 运行 webpack 将持久化查询操作打包为 json 文件
webpack --config=path/to/webpack.conf.js
注意事项
为了避免重复打包，请勿将持久化 json 文件与业务代码放在同一个目录下
建议将其放置在独立的目录下，以免重复打包，同时也可以避免因部署新代码时重复网络请求而导致带宽资源浪费。
为避免因哈希长度而导致一些查询无法处理，请确保哈希值的长度足够大
建议采用 sha256 哈希算法，因为其比较安全。
需要建立持久化缓存的 GraphQL 操作与相应的响应需要经常测试和调试
需要频繁对持久化的 GraphQL 请求与响应进行测试，及时发现问题并修复。
结语
通过持久化 GraphQL 查询语句与响应结果，@benjie/persistgraphql-webpack-plugin 可以大幅提高客户端与服务器之间通信的效率，从而提升前端开发中的开发效率。在使用过程中，需要注意事项并进行频繁测试，以保证持久化缓存的正常使用，为后续开发者提供方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572e481e8991b448e913b