graphql
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-explorerMake sure to also install the required peer dependencies:
npm install react react-dom graphqlUsage
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.