GraphQL 是一种用于 API 的查询语言，它允许客户端精确地请求自己所需要的数据。GraphiQL 则是一款交互式的 GraphQL IDE 工具，它能够帮助前端开发者快速浏览和测试 GraphQL API。在这篇文章中，我们将介绍如何使用 GraphiQL 浏览和测试 GraphQL API。
安装 GraphiQL
首先，我们需要在我们的项目中安装 GraphiQL。在 npm 中搜索 graphiql 包即可找到它，可以通过以下命令来安装：
npm install --save-dev graphiql
创建 GraphiQL 实例
在我们的项目中使用 GraphiQL 非常简单，只需要在我们的 JavaScript 文件中引用：
-- -------------------- ---- -------
------ -------- ---- -----------
------ ------------------------
----- -------------- - --------------- -- -
------ ----------------- -
------- -------
------------ ----------
-------- -
--------- -------------------
--------------- ------------------
--
----- -----------------------------
---------------- -- -----------------
--
----- --------------- - ------------------------------------
-------------------------------- --------- -----------------GraphiQL 接受两个参数：一个是我们的 DOM Element，一个是我们的 fetcher 函数。fetcher 函数用于将 GraphQL 查询发送到我们的服务器中。
浏览和测试 GraphQL API
现在我们已经将 GraphiQL 集成到我们的项目中，我们可以开始使用它来浏览和测试我们的 GraphQL API 了。
自动补全和类型提示
当我们在 GraphiQL 输入我们的查询时，它会自动提示我们可以使用的字段和类型。这对于在 API 上进行导航和了解字段非常有帮助。
浏览器的模式
GraphiQL 还提供了一种浏览模式，它允许我们在浏览器中浏览我们的数据。我们可以使用 GraphiQL 的浏览模式来浏览和测试我们的 API。
调试模式
GraphiQL 还有一个调试模式，它允许我们查看我们的 GraphQL 查询的请求和响应。这对于了解我们的查询如何工作以及在开发过程中查找问题非常有帮助。
示例代码
下面是一个完整的 GraphiQL 示例代码，它使用 GitHub GraphQL API 浏览 GitHub 用户的信息。
-- -------------------- ---- -------
------ -------- ---- -----------
------ ------------------------
----- -------------- - --------------- -- -
------ --------------------------------------- -
------- -------
-------- -
--------------- -------------------
---------------- ------- ----------------------------
--
----- -----------------------------
---------------- -- -----------------
--
----- --------------- - ------------------------------------
-------------------------------- --------- -----------------在这个例子中，我们使用了 GitHub GraphQL API，它需要使用 GitHub Token 进行身份验证。在实际使用中，我们需要将 process.env.GITHUB_TOKEN 替换为我们的实际 Token。
结论
GraphiQL 是一款非常有用的工具，它能够帮助前端开发者快速浏览和测试 GraphQL API。通过与我们的项目集成，我们可以轻松地使用它，并在浏览数据、调试查询和了解 API 结构等方面提供了很大的帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f22747a44b36ee57641dfd