GraphQL Playground 是一个强大的工具，用于通过 web 编辑器与 GraphQL API 交互，并查看并测试 API 的可用性。在前端开发领域中，GraphQL 变得越来越受欢迎，因为它提供了一种原始的数据查询方法，让前端工程师更容易地写出可扩展的应用程序。如果你正在使用 GraphQL， 那么 GraphQL Playground 可以让你更好地探索和测试你的 GraphQL API。
GraphQL Playground 简介
GraphQL Playground 是一个适用于 MacOS、Windows 以及 Linux 的 GraphQL IDE。它为开发者和测试人员在浏览器中轻松探索和测试 GraphQL API 提供了进行查询、跟踪和调试的接口。看下面的截图就知道，这个工具的可视化界面相当直观、清晰，并且可以使你快速地调试你的 GraphQL API。
如何使用 GraphQL Playground
它非常易于安装和使用，且可以通过根据你的操作系统下载打包文件或者使用 npm 包。你可以参考 官方文档 进行安装和使用教程。
安装过程可能是这个样子：通过 npm 安装GraphQL Playground 这个包
npm install graphql-playground --save-dev
然后在你的后端应用代码中初始化你的 GraphQL Playground。通常情况下，你可以通过 Express 中间件作为应用的一部分来实现这个目的。
-- -------------------- ---- -------
----- ------- - ------------------
----- - ------------------ - - ----------------------------------
----- --- - ---------
-- --- ------- ---------- -- ----------
--------
-----------
-------------------
--------- ---------- -- --------------
--
-
-- ------ -- ------ ------ --------
----- ------------ - -----------------------目前为止，你还没有看到 GraphQL Playground 的真正威力。接下来，你需要创建用于 HTTP 请求的 GraphiQL IDE 编辑器。
编写并测试 GraphQL API
在 GraphQL Playground 中，你可以使用浏览器的请求工具自由地编写 GraphQL 操作，继而测试你的 API。
例如，在图中的 GraphQL Playground 中，我写了如下的 GraphQL 操作，以获取所有的文章信息：
query allPosts {
posts {
id
title
description
type
}
}按下播放按钮，我们即可预览结果。
你不仅可以通过 GraphQL Playground 编写查询工具并测试其正确性，还可以用这个工具暴露出 API 的可访问性，允许你进行更进一步的调试。同时，如果你需要执行更加高级的操作，例如追踪 API 请求，或者查看 GraphQL 客户端和服务器之间的网络请求，GraphQL Playground 都经过了充足的测试并提供了解决方案。
优势和指导意义
GraphQL Playground 的优势在于它的易用性，速度以及可扩展性。由于它是用 JavaScript 编写的，它也非常易于扩展，将它作为你的前端工作流程的一部分，你可以轻松地将其集成到你的测试用例中，方便你进行端到端集成测试。
如果你是一位前端工程师，那么使用 GraphQL Playground 会给你带来很多帮助。可以使你更好地了解和探索 GraphQL API，如果你还没有接触过 GraphQL，那么学习 GraphQL Playground 是一个不错的起点。
此外，GraphQL Playground 与 开发者社区 集成良好。由于 GraphQL 已经成为一个前端社区行内热门话题，你可以通过博客、视频、书籍等各种不同的方式来学习 GraphQL，因为相比传统的 RESTful 等传统 API 查询方式，GraphQL 对代码的抽象能力更加强大，更加适应各种场景。
结论
GraphQL Playground 是一款非常优秀的解决方案，它可以让前端工程师更轻松地使用 GraphQL 进行 API 探索并测试。它是一款简洁而强大的工具。无论你是一个经验丰富的开发者还是初学者，使用 GraphQL Playground 可以帮助你更好地理解 GraphQL API 这一非常流行但又具有挑战性的技术。
在建立和测试 GraphQL API 软件时，GraphQL Playground 可以大幅减小开发时间和提升效率，并且它也是开放源代码的，可以针对你自己的需求进行自定义和定制。如果你正在考虑采用 GraphQL， 请尝试一下GraphQL Playground，它可以让你更清晰、更安全地开发你的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3fb8ff40ec5a964e66e7d