GraphQL 是一种用于 API 的查询语言和运行时环境。它对 RESTful API 有很多优势，例如更少的请求次数、更少的网络流量、更精确的查询数据和更好的可拓展性。在前端开发中，使用 GraphQL 可以大大提升开发效率。
GraphQL Playground 是一种用于开发和测试 GraphQL API 的 Web IDE。它可以帮助开发人员轻松调试和测试 GraphQL 查询和变异，同时提供了友好的 UI 和文档化查询和变异功能。下面介绍如何使用 GraphQL Playground 提升开发效率。
安装
GraphQL Playground 可以作为一个独立的包安装；或者更常见的做法是使用 GraphQL 的一些 server 端实现中自带的 Playground。
使用独立包安装
npm install graphql-playground
使用 server 端实现中自带的 Playground
比如在 Express 中：
-- -------------------- ---- -------
----- ------- - ------------------
----- - ----------- - - --------------------------
----- - ----------- - - ------------------
----- - ----------------------- - - ----------------------------------------
----- ------ - -------------
---- ----- -
------ ------
-
--
----- --------- - -
------ -- -- ------ -------
-
----- --- - ---------
-- ----------
---------------------- ------------------------- --------- ---------- ---
-- -------
------------------- -------------
-------
----------
--------- ----
---
---------------- -- -- ---------------------- -- ------------------------使用 GraphQL Playground
探索 schema
GraphQL Playground 可以让开发人员更好地探索 schema。在应用程序中保存 schema 或浏览其他外部 API 时，这非常有用。通过单击 SCHEMA（schema）选项卡，开发人员可以看到可用的查询和变量，以及如何编写它们的格式。
完成查询
在 GraphQL Playground 中，查询可以自动完成。按下 CONTROL + SPACE 将显示可用的查询和变量选项。这可以减少手写代码的时间和错误。
快速文档
在 GraphQL Playground 中，文档包括与 schema 相关的查询及其要求，以及查询变量。文档可以防止错用查询和变量选项，并提供一些文档注释信息，以让开发人员更好地理解查询和变量的组成。
多个查询和窗口
GraphQL Playground 可以同时打开多个查询窗口。开发人员在同时调试多个查询时，这非常有用。可以通过窗口选项卡快速轻松地切换不同窗口。
网络监听
GraphQL Playground 还有一个网络监听功能，可以使用它在实时中查看网络请求和响应。使用此功能可以轻松识别请求和服务器响应中的错误。
结论
GraphQL Playground 是一个强大且易于使用的工具。在开发和测试 GraphQL 时，它可以提高开发人员的效率和准确性。结合正确的方式去使用 GraphQL Playground 可以使得开发过程更加安全、快速和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674c0e9b14b275ea6fe1ea7e