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命令行工具进行安装：
npm install @graphql-toolkit/graphql-tag-pluck --save-dev
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的学习和开发工作有所帮助！
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/5f38782edbf7be33b2566f68