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的学习和开发工作有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f38782edbf7be33b2566f68
