介绍
GraphQL Playground是一个交互式的GraphQL编辑器，帮助我们探索和理解GraphQL API。@apollographql/graphql-playground-html是一个npm包，它为GraphQL Playground提供HTML/CSS/JS样式，以便我们将它嵌入到我们的应用程序中。
本篇文章将带领大家了解如何使用@apollographql/graphql-playground-html包。
安装
我们可以使用npm或yarn进行安装：
npm install @apollographql/graphql-playground-html # 或 yarn add @apollographql/graphql-playground-html
使用
在HTML页面中使用
在HTML页面中使用@apollographql/graphql-playground-html最简单的方式是使用<script>标签，直接引入如下代码：
<script src="https://unpkg.com/@apollographql/graphql-playground-html"></script>
这将为您提供一个全局变量GraphQLPlayground，您可以使用它来创建DOM元素并将其插入到HTML页面中。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------- ---------- ------------
-------
------
---- ----------
---- ---------------- ---
------
-------
------- ------------------------------------------------------------------------
--------
-- ------------ -----
----- -------- - --------------------------------
----- ---------- - --------------------------------------------
-- ------------------
---------------------------------
---------
-------在React应用程序中使用
与HTML页面中的使用方式不同，我们需要使用@apollo/react-graphql提供的包装组件来使用@apollographql/graphql-playground-html。
yarn add @apollo/react-graphql
在我们的React组件中使用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------------- - ---- ------------------------
------ - -------------- - ---- -------------------
------ - ------------ - ---- ----------------
------ - ------------- - ---- ------------------------
-- -------- ------
----- -------- - ----------------
---- ----------------------------- -- ------------------
---
----- ------ - --- --------------
----- ---------
------ --- ---------------
---
-- ---------
-------- ----- -
------ -
------------------
-------------------------------------- -- ------------------
-------------
-----------------------
-------------------- -- -------
--
--
-
------ ------- ----这将创建一个GraphQL Playground组件，可以使用endpoint属性设置GraphQL接口地址。
在Vue应用程序中使用
在Vue应用程序中使用@apollographql/graphql-playground-html我们需要使用vue-apollo提供的包装组件来使用。
yarn add vue-apollo
在我们的Vue组件中使用：
-- -------------------- ---- -------
----------
------------
--------
-------------------
-------------------------------------- -- ------------------
--------------
------------------------
--------------------- -- ---
--
---------
-------------
-----------
--------
------ ------------ ---- ---------------
------ --- ---- --------------
------ ------- -
--------------- -
-------------- --- --------------
---- ------------------------------ -- ------------------
---
--
-
---------这将创建一个GraphQL Playground组件，可以使用endpoint属性设置GraphQL接口地址。
结语
@apollographql/graphql-playground-html使我们可以在我们的应用程序中使用GraphQL Playground，为我们解决开发中探索和理解GraphQL API的问题。希望这篇文章可以帮助大家更好地使用此npm包，从而更好地掌握GraphQL的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/195955