@graphiql/plugin-explorer

GraphiQL Explorer Plugin

This package provides a plugin that integrated the GraphiQL Explorer into the GraphiQL UI.

Install

Use your favorite package manager to install the package:

npm i -S @graphiql/plugin-explorer

The following packages are peer dependencies, so make sure you have them installed as well:

npm i -S react react-dom graphql @graphiql/react

Usage

import { useExplorerPlugin } from '@graphiql/plugin-explorer';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
import { GraphiQL } from 'graphiql';
import { useState } from 'react';

import 'graphiql/graphiql.css';
import '@graphiql/plugin-explorer/dist/style.css';

const fetcher = createGraphiQLFetcher({
  url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
});

function GraphiQLWithExplorer() {
  const [query, setQuery] = useState(DEFAULT_QUERY);
  const explorerPlugin = useExplorerPlugin({
    query,
    onEdit: setQuery,
    getDefaultScalarArgValue,
    makeDefaultArg,
  });
  return (
    <GraphiQL
      fetcher={fetcher}
      query={query}
      onEditQuery={setQuery}
      plugins={[explorerPlugin]}
    />
  );
}

CDN bundles

You can also use add this plugin when using the CDN bundle to render GraphiQL. Check out the example HTML file that shows how you can do this.