@graphiql/plugin-explorer

graphql
js Styles
@graphiql/plugin-explorer JS library on GitHub @graphiql/plugin-explorer JS library on npm Download @graphiql/plugin-explorer JS library

This package provides a plugin that integrates the [`GraphiQL Explorer`](https://github.com/OneGraph/graphiql-explorer) into the GraphiQL UI.

Version 4.0.6 License MIT
@graphiql/plugin-explorer has no homepage
@graphiql/plugin-explorer JS library on GitHub
@graphiql/plugin-explorer JS library on npm
Download @graphiql/plugin-explorer JS library
Keywords
reactgraphqlgraphiqlpluginexplorer
INSTALL
Type:
Version:
No default files set by the package author so the URLs are guessed. You can always browse all package files to use other ones.

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/style.css';
import '@graphiql/plugin-explorer/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.