@arcblock/graphql-playground

A React Component to interact with GraphQL APIs

Usage

yarn add @arcblock/graphql-playground

Then:

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
    />
  );
}

How to use GraphQLPlayground comonent in SSR env such as gatsby?

Because graphiql and graphiql-code-exporter uses browser globals such as window, we need to mock them both during building time for gatsby.

First we need to create an mock for 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;

Then, in gatsby-node.js, use the mocks:

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