# @arcblock/graphql-playground 中文文档

规范地址：https://npmcn.com/package/%40arcblock/graphql-playground/

版本：3\.5\.4
npm 元数据更新时间：2026-06-13T09:19:43.922Z
中文译文更新时间：2026-11-09T20:27:59.437Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40arcblock/graphql-playground
原文对照：https://npmcn.com/package/%40arcblock/graphql-playground/?lang=original
项目主页：https://github.com/ArcBlock/ux#readme
源码仓库：https://github.com/ArcBlock/ux

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：10.7 kB，5 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：5 个
- peer 依赖：@arcblock/ux ^3\.1\.0，@emotion/react ^11\.14\.0，@emotion/styled ^11\.14\.0，react ^19\.0\.0，react-router-dom ^6\.30\.3
- 首次发布：2020-04-02T23:13:46.592Z
- 最新版本发布：2026-06-13T09:19:43.723Z
- 近 30 天下载量：1746（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：968（近 12 个月 49 个）

## 中文简介

与 GraphQL API 交互的回放组件

## 安装

```sh
npm install @arcblock/graphql-playground
```

也可以使用：`pnpm add @arcblock/graphql-playground`、`yarn add @arcblock/graphql-playground`、`bun add @arcblock/graphql-playground`

## README

![@arcblock/graphql-playground](https://www.arcblock.io/.netlify/functions/badge/?text=graphql-playground)

与 GraphQL API 交互的回放组件

## 使用量

```shell
yarn add @arcblock/graphql-playground
```

然后说:

```javascript
import React from 'react';
import GraphQLPlayground from '@arcblock/graphql-playground';

function App() {
  return (
    <GraphQLPlayground
      defaultQuery={defaultQuery}
      endpoint={endpoint}
      title="My Graphql Playground"
      persistentQuery={false}
      enableHistory
      enableQueryComposer
      enableCodeExporter
    />
  );
}
```

## 如何使用 `GraphQLPlayground` 在像Gatsby这样的SSR环境里有共通点吗?

因为 `graphiql` 财务报告和审定财务报表 `graphiql-code-exporter` 使用浏览器全域, 如 `window`我们需要在盖茨比的建筑时间里嘲笑他们.

首先我们需要为 `graphqil`, (中文(简体) ), `src/mocks/graphiql`数字 :

```javascript
function graphiql() {
  return null;
}

graphiql.Logo = () => null;
graphiql.Toolbar = () => null;
graphiql.QueryEditor = () => null;
graphiql.VariableEditor = () => null;
graphiql.ResultViewer = () => null;
graphiql.Button = () => null;
graphiql.ToolbarButton = () => null;
graphiql.Group = () => null;
graphiql.Menu = () => null;
graphiql.MenuItem = () => null;
graphiql.Select = () => null;
graphiql.SelectOption = () => null;
graphiql.Footer = () => null;

module.exports = graphiql;
```

然后,进入 `gatsby-node.js`,使用模拟:

```javascript
const path = require('node:path');

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      resolve: {
        alias: {
          graphiql: path.resolve(__dirname, './src/mocks/graphiql.js'),
        },
      },
      module: {
        rules: [
          {
            test: /node_modules\/codemirror\//,
            use: loaders.null(),
          },
        ],
      },
    });
  }
};
```

## 常见问题

### @arcblock/graphql-playground 是什么？

与 GraphQL API 交互的回放组件

### 如何安装 @arcblock/graphql-playground？

在项目目录运行 npm install @arcblock/graphql-playground，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@arcblock/ux（^3\.1\.0）、@emotion/react（^11\.14\.0）、@emotion/styled（^11\.14\.0）、react（^19\.0\.0）、react-router-dom（^6\.30\.3）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @arcblock/graphql-playground 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/arcblock\_\_graphql-playground 是否存在。

### @arcblock/graphql-playground 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @arcblock/graphql-playground 可以商用吗？

@arcblock/graphql-playground 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @arcblock/graphql-playground 的下载量有多少？

根据 npm 官方下载统计，@arcblock/graphql-playground 在 2026/10/07 – 2026/11/05 这 30 天内被下载 1,746 次，日均约 58 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @arcblock/graphql-playground 还在维护吗？

最新版本 3\.5\.4 发布于 2026/06/13（4 个月前）；至今共发布 968 个版本，其中过去 12 个月发布了 49 个；首次发布于 2020/04/03。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。