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

A React Component to interact with GraphQL APIs

## Usage

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

Then:

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

## 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`:

```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;
```

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

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