在前端开发中，API 接口是不可避免的一部分，而接口测试工具是我们必不可少的工具。GraphiQL 是一款专为 API 接口设计的浏览器端 IDE，它可以让我们在文档、调试、查询等方面变得更加便捷。而 graphiql-ui 则是 GraphiQL 的一个 Node.js 集成包，可以将 GraphiQL 安装于我们自己的项目中，方便地让我们进行调试及测试。
安装
使用 graphiql-ui 前，我们需要先将其安装到我们的项目中，可以通过 npm 包管理器进行安装。
npm install graphiql-ui --save
安装成功后，我们只需要在项目中引入即可开始使用。
import GraphiQL from 'graphiql-ui'; import 'graphiql-ui/build/css/index.css';
使用
使用 graphiql-ui 前，我们需要先明确一个 GraphQL API 的入口地址，即要向哪个接口发送请求。在 GraphiQL 中，我们可以通过以下方式来设置：
-- -------------------- ---- -------
----- -------------- - -------- -- -
-- ----- --- ---
------ ----------------- -
------- -------
-------- -
------- -------------------
--------------- -------------------
--
----- -----------------------
------------ ----------
------------------ -- -
-- ---------
------ ------------------------ -- -
------ ----------------
---
---
--
----------------
--------- ------------------------ ---
--------------
--在上面的例子中，我们通过 fetch 函数向 /graphql 接口发送请求，并将参数以 JSON 格式传递过去。同时，我们也添加了一些自定义的 headers，以确保请求能够被正确处理。
值得一提的是，我们还通过设置 credentials 参数来设置跨域请求时带上了 Cookie 等验证信息，以确保请求能够正常处理。
在设置完成后，我们就可以在浏览器中打开 GraphiQL，并开始使用其中的查询模式以及调试模式。GraphiQL 还支持快捷键等一系列非常实用的功能，可以根据自己的需求进行使用。
深度学习
除了基本的使用方式外，我们还可以通过阅读 graphiql-ui 的源码，从中深入了解 GraphQL、Fetch 等相关的技术。
GraphQL
GraphQL 是一种新的 API 设计语言，可以让我们更加便捷地对 API 进行管理，并且在进行查询时可以减少冗余数据的传输，提高传输效率。GraphiQL 中支持的语法也是 GraphQL 的标准语法，例如：
{
user(id: "1") {
id
name
age
}
}在上面的例子中，我们向 user 接口发送了一个查询，并且只请求了 id、name 和 age 三个字段的数据。如果接口返回了其它字段的数据，GraphiQL 中则不会显示这些数据。
Fetch
Fetch 是一种新的浏览器端网络请求 API，可以让我们在进行网络请求时更加方便地添加 headers、设置 cookies 等相关信息。在 GraphiQL 中，我们使用的就是 Fetch API 中的方法来进行网络请求。
例如，在上面的例子中，我们就是利用 fetch 函数向 /graphql 接口发送请求的，同时还设置了 headers 和 credentials 等参数。这些参数都与 Fetch 相关，如果对 Fetch 不熟悉的话，建议可以先学习一下 Fetch 的基础知识。
指导意义
使用 graphiql-ui 可以让我们更加便捷地进行 API 的调试及测试工作，可以让我们在开发时更加高效。同时，通过阅读 graphiql-ui 的源码，可以让我们深入了解 GraphQL、Fetch 等相关的技术，并且能够收获更多的知识。
在学习使用 graphiql-ui 的过程中，我们也可以考虑使用其中的一些功能或思路来进行自己的开发工作，可以有效提高我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056caa81e8991b448e614a