Package Exports

@graphiql/plugin-explorer
@graphiql/plugin-explorer/dist/index.js
@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 integrates the GraphiQL Explorer into the GraphiQL UI.

Installation

Use your preferred package manager to install the plugin:

npm install @graphiql/plugin-explorer

Make sure to also install the required peer dependencies:

npm install react react-dom graphql

Usage

import { GraphiQL } from 'graphiql';
import { createGraphiQLFetcher } from '@graphiql/toolkit';
import { explorerPlugin } from '@graphiql/plugin-explorer';
import 'graphiql/graphiql.css';
import '@graphiql/plugin-explorer/dist/style.css';

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

// Pass the explorer props here if you want
const explorer = explorerPlugin();

function GraphiQLWithExplorer() {
  return <GraphiQL fetcher={fetcher} plugins={[explorer]} />;
}

CDN bundles

You can also use this plugin via an ESM-based CDN like esm.sh.

See the CDN example for a working demo.