@arcblock/graphql-playground

与 GraphQL API 交互的回放组件

使用量

yarn add @arcblock/graphql-playground

然后说:

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数字 :

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,使用模拟:

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(),
          },
        ],
      },
    });
  }
};