npm包@graphql-toolkit/graphql-tag-pluck使用教程

GraphQL是一种查询语言，它使客户端能够精确地指定它所需的数据，而不会收到超出需要的或没有足够信息的响应。GraphQL工具包是一个开源JavaScript库，它提供了用于构建和操作GraphQL服务器的工具和库。

在使用GraphQL的过程中，我们通常需要将GraphQL查询和变量传递给服务器，这就需要我们将GraphQL查询和变量放入一个字符串中发送。然而，如果一个应用程序包含了多个GraphQL的查询和变量，那么我们如何快速、简便地找到这些查询和变量呢？这就是npm包@graphql-toolkit/graphql-tag-pluck的作用。

@graphql-toolkit/graphql-tag-pluck是一个用于从JavaScript文件中提取GraphQL查询和变量的npm包。它可以把所有的GraphQL查询和变量提取出来，然后将它们转换成字符串形式，以方便我们在应用程序的其他部分中使用。

接下来，我们将详细介绍如何在前端项目中使用@graphql-toolkit/graphql-tag-pluck。

1. 安装@graphql-toolkit/graphql-tag-plucknpm包

使用npm命令行工具进行安装：

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

2. 在项目中使用@graphql-toolkit/graphql-tag-pluck

@graphql-toolkit/graphql-tag-pluck有两个方法可以从JavaScript文件中提取GraphQL查询和变量：pluckFromFile和pluckFromCode。

2.1 使用pluckFromFile

pluckFromFile方法从文件中提取GraphQL查询和变量。

例如以下示例代码：

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

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

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

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

可以使用pluckFromFile方法来提取查询和变量：

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

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

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

输出示例：

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

2.2 使用pluckFromCode

pluckFromCode方法从代码中提取GraphQL查询和变量。

例如以下示例代码：

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

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

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

可以使用pluckFromCode方法来提取查询和变量：

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

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

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

输出示例：

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

3. 解析提取出的GraphQL查询和变量

由于@graphql-toolkit/graphql-tag-pluck返回的是字符串形式的GraphQL查询和变量，我们需要将这些字符串解析成GraphQL AST对象，以便我们可以对它们进行查询。我们可以使用graphql-tag库中的gql方法来完成这个过程。

例如：

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

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

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

输出示例：

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

结论

@graphql-toolkit/graphql-tag-pluck是一个十分实用的npm包，它可以使我们在前端项目中更便捷地从JavaScript文件中提取出GraphQL查询和变量。在项目开发过程中，使用@graphql-toolkit/graphql-tag-pluck可以有效地减少人工查找的时间和提高开发效率。

希望本篇文章对读者们有所帮助，对GraphQL的学习和开发工作有所帮助！

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f38782edbf7be33b2566f68

阅读全文

猜你喜欢

  • npm 包 mrm-task-styleguidist 使用教程

    简介 mrm-task-styleguidist 是一个 MRM（Mrm 可重复使用模块）任务，它提供了一种简单的方式来引入 styleguidist 到你的 React 项目中。

    4 年前
  • npm 包 mrm-task-stylelint 使用教程

    前言 在前端开发中，我们不可避免地会涉及到样式表文件的编写。然而，由于样式表文件通常比较庞大，而且内容比较复杂，因此编写样式表文件也经常面临一些问题。例如：代码可读性问题、团队统一代码规范问题等等。

    4 年前
  • 使用 mrm-task-travis 简化 Travis CI 配置

    在现代前端开发中，持续集成是必不可少的一环。而 Travis CI 是一款广泛使用的持续集成工具之一。但是，要配置 Travis CI 可以是一项非常繁琐的任务。好在有 npm 包 mrm-task-...

    4 年前
  • NPM 包 mrm-task-typescript 使用教程

    在前端开发中，使用 TypeScript（类型化的 JavaScript）可以大大提高代码的可读性和可维护性，同时也能帮助开发者更早地发现代码中的潜在问题。但是，在使用 TypeScript 的时候，...

    4 年前
  • npm 包 mrm-preset-default 使用教程

    npm 是 Node.js 的包管理器，通过它我们可以方便地管理和使用大量的开源 JavaScript 库和工具包。其中一个经常用到的包是 mrm-preset-default，它是一个基于 Mrm ...

    4 年前
  • npm 包 mapnik-vector-tile 使用教程

    前言 随着互联网的发展，Web 地图技术已经成为了一个非常常见的需求，同时地理数据的呈现和渲染技术也成为了前端领域一个重要的分支。npm 包 mapnik-vector-tile 提供了一个强大的工具...

    4 年前
  • npm 包 pon-task-command 使用教程

    npm 包 pon-task-command 是一款非常实用的前端工具包，可以帮助开发者在项目中更加方便地运行命令行任务，提高开发效率。本文将详细介绍该 npm 包的使用方法，包括安装、配置和常见命令...

    4 年前
  • npm 包 `pon-task-coz` 使用教程

    pon-task-coz 是一个基于 coz 的任务执行器。它可以帮助我们在前端项目中生成代码质量报告，以便于进行代码质量检查与改进。 安装 使用 npm 进行安装： --- - ----------...

    4 年前
  • npm 包 pon-task-fmtjson 使用教程

    在前端开发过程中，我们经常需要处理 JSON 数据。然而，有时在处理 JSON 数据时会出现不规范的格式，这会导致后续的处理出现问题。为此，我们需要对 JSON 数据进行格式化，使其规范化，易于阅读和...

    4 年前
  • npm 包 @the-/const-code 使用教程

    前言 在前端开发中，我们经常需要定义一些常量，比如 API 的地址、一些错误码等。如果直接在代码中使用字符串或数字来定义这些常量，可能会出现多个地方定义不一致或者修改时不方便的问题。

    4 年前
  • npm 包 @the-/util-file 使用教程

    本教程将详细介绍如何使用 @the-/util-file 这个 npm 包，以及如何使用它来处理文件相关的操作，包括读取、写入、复制、重命名、删除等操作。 什么是 @the-/util-file ...

    4 年前
  • npm 包 pon-task-mocha 使用教程

    在前端开发中，我们通常需要进行单元测试或集成测试来确保代码的质量和正确性。而 mocha 是一个常见的 JavaScript 测试框架，它提供了一套简单易用的 API 和强大的插件生态系统，广受开发者...

    4 年前
  • npm 包 @the-/util-path 使用教程

    在前端开发中，路径处理是一项非常重要的工作。好的路径处理方法可以使开发过程更加高效和简便，同时也能提高应用程序的质量。@the-/util-path 是一款非常好用的路径处理工具，通过本文，将为大家介...

    4 年前
  • npm 包 pon-task-pondoc 使用教程

    介绍 对于前端开发者，文档生成难题一直是一个不小的问题。而使用 npm 包 pon-task-pondoc 可以轻松地解决这个问题。 pon-task-pondoc 是一个使用 Pondoc 生成文...

    4 年前
  • npm 包 compressed-extensions 使用教程

    前言 在 Web 前端开发中，为了提高网页性能和用户体验，压缩文件是不可或缺的一部分。在压缩文件中，我们经常会用到不同的文件格式，如 gzip、brotli、deflate 等。

    4 年前
  • npm 包 css-color-keywords 使用教程

    css-color-keywords 是一款非常方便的 npm 包，它可以将你所需要的 CSS 颜色关键字转换为十六进制的色值。本文将会介绍如何安装和使用这个 npm 包，并提供一些实用的示例代码。

    4 年前
  • npm 包 font-extensions 使用教程

    介绍 font-extensions 是一个 npm 包，它可以帮助我们生成各种格式的字体文件，包括 ttf、eot、woff2、woff、svg 五种格式。它的使用简单，而且功能强大，可以大大减轻前...

    4 年前
  • 使用npm包http-verbs的教程

    Http-verbs是一个基于Node.js的npm包，它的作用是在Node.js程序中，以一种可读性高的方式发送HTTP请求。在本文中，我们将会深入地探讨这个技术，教你如何使用Http-verbs。

    4 年前
  • npm 包 requestidlecallback 使用教程

    前言 requestidlecallback 是一个非常有用的 npm 包，它可以在浏览器的空闲时段运行代码，以提高性能和效率。在本文中，我们将介绍如何使用 requestidlecallback 包...

    4 年前
  • npm 包 pon-task-browser 使用教程

    npm 是 Node.js 的包管理器，pon-task-browser 是一个用于前端自动化构建的 npm 包，它可以用于构建前端项目的 HTML、CSS 和 JS 等资源文件。

    4 年前

相关推荐

    暂无文章