Package Exports

@graphiql/plugin-explorer
@graphiql/plugin-explorer/dist/index.mjs
@graphiql/plugin-explorer/dist/style.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@graphiql/plugin-explorer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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