Package Exports

@graphiql/plugin-explorer
@graphiql/plugin-explorer/dist/index.js
@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 install @graphiql/plugin-explorer

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

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 with unpkg, jsdelivr, and other CDNs.

See the example HTML file for this plugin