前言
在当今的 Web 工程化中，前端工程师的工具链日新月异，新的工具、框架层出不穷。这其中，Gatsby 作为一款基于 React 的静态网站生成器，已经受到越来越多前端工程师和网站搭建者的关注。
随着 Gatsby 的流行，一些优秀的插件也不断地涌现出来，gatsby-graphiql-explorer 就是其中之一。本文主要介绍如何使用 gatsby-graphiql-explorer，让你更方便地进行 GraphQL 开发，提高开发效率。
什么是 gatsby-graphiql-explorer
graphiql-explorer 是一个非常常用的开发者工具，它是一个强大的 GraphQL API 调试器，可以帮助开发者在调试 API 接口时快速实现查询调试。
gatsby-graphiql-explorer 则是一个 Gatsby 插件，它可以将 graphiql-explorer 集成到 Gatsby 项目中。由于 Gatsby 每次生成静态文件前都会执行 GraphQL 查询，所以 gatsby-graphiql-explorer 插件的出现让我们在开发时能够更加便利地进行查询集成。
gatsby-graphiql-explorer 的安装
使用 npm 安装 gatsby-graphiql-explorer：
npm install gatsby-graphiql-explorer
或者，你也可以使用 yarn 代替 npm：
yarn add gatsby-graphiql-explorer
gatsby-graphiql-explorer 的使用
快速配置：
-- -------------------- ---- -------
-- ----------------
-- - ------- ------ ------------------------ --
-------------- - -
-------- -
-----------------------------
---------------------------
----------------------------------
-
-------- ------------------------
-------- -
--------- --------
---------- --------
---- --------------------------------
--
--
-
-------- ---------------------------
-------- -
-- ---
--
--
--
--添加 gatsby-plugin-styled-components 是为了使用 styled-components 进行组件样式管理。
配置项说明：
- endpoint：GraphQL API 接口地址，类型为字符串。
- query：默认 GraphQL 查询语句，用于初始化 graphiql-explorer，类型为字符串。
- variables：默认变量对象，用于初始化 graphiql-explorer，类型为对象。
- createFetcher：自定义执行 GraphQL 查询的 fetcher 方法，类型为 Function。
完整的配置示例：
-- -------------------- ---- -------
-
-------- ---------------------------
-------- -
--------- --------------------------------
------ -
----- -------- -
----- -
--
----
---
-
-
--
---------- -
------ -
----- ------
---- ---
--
--
-------------- -- ------ --------- -- -- -
------ -------------------- -
------- -------
-------- - --------------- ------------------ --
----- ---------------- ------ --------- ---
------------- -- ------------
--
--
-gatsby-graphiql-explorer 的效果演示
在项目启动后，你可以在浏览器的开发者工具中查看 gatsby-graphiql-explorer 的表现。按下 Ctrl + Shift + I 打开开发者工具，然后切换到 Network 标签，可以看到 GraphQL 查询路径下有个项是 GraphiQL（如下图）。
点击它，会打开 gatsby-graphiql-explorer 的接口测试界面，如下图。
总结
通过上面的演示，我相信你已经掌握了 gatsby-graphiql-explorer 的使用方法。它为我们提供了一个快捷的工具来进行 GraphQL 的 API 接口测试，提高了开发效率。
当然，如果你对 GraphQL 的使用还不够熟悉，可以参考官方文档，学习 GraphQL 的基础知识，更好地使用 gatsby-graphiql-explorer 进行开发。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4b8b5cbfe1ea0611342