npm 包 @shopify/webpack-persisted-graphql-plugin 使用教程

概述

@shopify/webpack-persisted-graphql-plugin 是一个 Webpack 插件，它可以帮助前端开发人员在开发过程中使用 GraphQL 进行 API 数据查询，在开发过程中保存查询结果到本地，以便在下一次开发过程中实现数据的持久化访问，提高开发效率。

安装

安装 @shopify/webpack-persisted-graphql-plugin 很简单，只需要使用 npm 或 yarn 进行安装即可：

--- ------- ---------- -----------------------------------------

或者：

---- --- ----- -----------------------------------------

配置

使用插件需要在 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

阅读全文

猜你喜欢

  • npm 包 seneca-store-test 使用教程

    介绍 npm 是 Node.js 的包管理工具，提供了丰富的第三方包，可以为前端开发提供很大的便利，其中包括 seneca-store-test 这个包，它是一个测试用的 seneca 存储后端。

    4 年前
  • npm 包 patrun 使用教程

    在前端开发过程中，我们通常会用到一些第三方库与依赖包，为了更好地管理这些包的安装更新与版本控制，Node.js 提供了 npm 包管理器。patrun 是一款用于匹配和查询 JavaScript 对象...

    4 年前
  • npm 包 seneca-transport-test 使用教程

    前言 在前端开发中，我们经常会使用 npm 包来完成各种复杂的任务。如何正确使用这些 npm 包，是每个前端开发者需要掌握的技能。在本篇文章中，我将介绍如何使用 npm 包 seneca-transp...

    4 年前
  • npm 包 gate-executor 使用教程

    随着前端技术的发展，前端开发者越来越多地使用 Node.js 平台来构建 Web 应用程序。在这个过程中，npm 成为了前端开发的重要一环。npm（Node Package Manager）是 Nod...

    4 年前
  • npm包norma使用教程

    什么是npm包? npm是Node Package Manager的简称，是一个用于管理Node.js模块的命令行工具。Node.js开发者可以通过npm安装、分享、查找和管理其他开发者编写的模块。

    4 年前
  • npm包nua使用教程

    前言 在前端开发中，我们经常需要对字符串进行处理和转换，而nua就是一个非常优秀的npm包，可以方便地操作字符串。下面我们将详细介绍如何使用nua以及它的一些高级用法。

    4 年前
  • npm 包 strict-event-emitter-types 使用教程

    在前端开发中，事件驱动是常见的开发模式。而在 TypeScript 中，由于类型系统的限制，需要对事件的类型进行严格的定义。为了解决这个问题，我们可以使用 npm 包 strict-event-emi...

    4 年前
  • npm 包 ordu 使用教程

    如果你正在进行前端开发工作，你一定需要熟悉 npm 包管理工具。其中，一个十分有用的 npm 包就是 ordu，它是一个 JavaScript 函数库，提供了很多实用的工具函数，有助于提高你的开发效率...

    4 年前
  • npm 包 seneca-basic 使用教程

    在前端开发中，我们常常会需要使用一些模块化的工具库来帮助我们完成一些繁琐的任务。而 npm 包就是其中一个非常重要的工具。今天，我们将介绍一个非常实用的 npm 包 seneca-basic，并提供详...

    4 年前
  • NPM 包 Seneca-Repl 的使用教程

    简介 Seneca-Repl 是一款为 Seneca 框架设计的 REPL（Read-Eval-Print Loop，交互式解释器）工具。它允许您在命令行中以交互方式与 Seneca 进行通信，并调试...

    4 年前
  • npm 包 rolling-stats 使用教程

    rolling-stats 是一个专门用于计算时间序列数据的 npm 包。可以方便地计算包括平均值、方差、标准差、最大值、最小值、百分位数等统计指标。如果你需要进行时间序列数据分析，那么这个包是必不可...

    4 年前
  • npm包@types/inversify-devtools使用教程

    在编写 TypeScript 和 JavaScript 项目时，我们经常会使用依赖注入来管理代码中的依赖关系。InversifyJS是一款优秀的依赖注入框架，它能使我们的代码更加可维护和可扩展。

    4 年前
  • npm 包 eraro 使用教程

    eraro 是一个很实用的 npm 包，它可以帮助我们在 Node.js 的项目中快速构建一个错误对象，并输出日志。本文将详细介绍该 npm 包的使用方法，并提供示例代码，希望能够为大家在前端开发过程...

    4 年前
  • npm 包 use-plugin 使用教程

    什么是 npm 包 use-plugin npm 包 use-plugin 是一个可以帮助我们更好地在 React 项目中使用插件的工具。借助于 use-plugin，我们可以让我们的 React 组...

    4 年前
  • npm 包 @seneca/test-plugin 使用教程

    在前端开发中，我们经常需要使用一些第三方的库来实现一些功能。npm 是一个非常常用的第三方包管理工具，它提供了大量高质量的包供我们使用。在这篇文章中，我们将会介绍一个名为 @seneca/test-p...

    4 年前
  • npm 包 lab-transform-typescript 使用教程

    在实际的前端开发中，使用 TypeScript 已经成为了一种趋势。然而，当我们使用 Lab 来进行单元测试时，我们发现 Lab 并不支持 TypeScript，这给我们的单元测试带来了一些不便之处。

    4 年前
  • npm 包 @fluent/dedent 使用教程

    在前端开发中，我们经常需要在字符串中插入多行文本。通常情况下，我们需要手动添加缩进，这非常麻烦。此时，我们可以使用 @fluent/dedent 这个 npm 包来解决这个问题。

    4 年前
  • npm 包 seneca-error-test 使用教程

    简介 Seneca-Error-Test 是一个能够帮助开发者检测并捕获错误的 npm 包。它可以帮助你基于 seneca 服务框架构建复杂的应用程序，从而更好地维护你的代码并提高你的编程效率。

    4 年前
  • npm 包 json-merge-patch 使用教程

    什么是 json-merge-patch？ json-merge-patch 是一种 JSON 合并补丁的格式，用于描述如何将两个或多个 JSON 片段合并为单个 JSON 对象。

    4 年前
  • 使用 npm 包 seneca-joi

    seneca-joi 是一个能够对 seneca 插件的输入和输出进行验证的 npm 包，它可以确保输入和输出符合期望，从而提高应用程序的可靠性。本文将介绍如何安装和使用 seneca-joi 进行输...

    4 年前

相关推荐

    暂无文章