This package provides a plugin that integrated the GraphiQL Explorer into the GraphiQL UI.
GraphiQL Explorer
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
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]} />; }
You can also use this plugin with unpkg, jsdelivr, and other CDNs.
unpkg
jsdelivr
See the example HTML file for this plugin
Generated using TypeDoc
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:
The following packages are peer dependencies, so make sure you have them installed as well:
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