前言
GraphQL 是一种基于 API 的查询语言和运行时环境，许多公司和开源项目都使用了 GraphQL 技术。graphql-playground-html 是一个基于 GraphQL 的可视化开发环境，它提供了一个交互式环境，让开发人员可以更加方便地进行 API 开发和测试。
在本文中，我们将介绍如何使用 npm 包 graphql-playground-html。
安装
首先，我们需要安装 npm 包 graphql-playground-html。可以使用以下命令来进行安装：
npm install graphql-playground-html
使用
基本使用
接下来，让我们看看如何使用 graphql-playground-html。我们需要创建一个 HTML 页面，并将以下代码添加到页面中：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------------
----- ----------------------------------------------------------------------------- ---------------- --
----- ------------------------------------------------------------------------ ---------------- --------------- --
------- -----------------------------------------------------------------------------------------
-------
------
---- ----------------
--------
------------------------------------------------------- -
--------- ----------
--
---------
-------
-------首先，我们包含了必要的 CSS 和 JavaScript 文件。然后，我们在页面中添加了一个 div 元素，以便 graphql-playground-html 可以在该元素中进行渲染。最后，在页面底部，我们使用 GraphQLPlayground.init() 方法初始化 graphql-playground-html。我们需要传递一个参数给该方法，endpoint 参数指的是我们的 GraphQL API 的地址。
可选参数
GraphQLPlayground.init() 方法支持以下可选参数：
settings: 该参数允许我们设置 graphql-playground-html 的配置选项，例如隐藏 HTTP HEADERS 面板和禁用查询历史记录功能等。
tabs: 该参数允许我们添加额外的 tab 页面以及相应的 GraphQL 端点和标题等。
以下示例展示了如何使用 settings 和 tabs 参数：
-- -------------------- ---- -------
------------------------------------------------------- -
--------- -----------
--------- -
--------------- --------
------------------- -----
----------------------- -----
------------------ ---
---------------------- ----
--
----- -
-
--------- ------------
----- --- ------- --- ---
-------- -
---------------- ------- ---------
-
-
-
--完整示例
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ------------------
----- ----------------------------------------------------------------------------- ---------------- --
----- ------------------------------------------------------------------------ ---------------- --------------- --
------- -----------------------------------------------------------------------------------------
-------
------
---- ----------------
--------
------------------------------------------------------- -
--------- -----------
--------- -
--------------- --------
------------------- -----
----------------------- -----
------------------ ---
---------------------- ----
--
----- -
-
--------- ------------
----- --- ------- --- ---
-------- -
---------------- ------- ---------
-
-
-
--
---------
-------
-------结论
在本文中，我们介绍了如何使用 npm 包 graphql-playground-html。我们学习了基本用法，掌握了可选参数和完整示例。现在，你可以使用 graphql-playground-html 进行 GraphQL API 开发和测试了。希望本文对你的学习和实践有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/59171