API docs for this live here:
This content will be rendered after the built-in buttons of the toolbar.
Note that this will not apply if you provide a completely custom toolbar
GraphiQL.Toolbar as child to the
The top-level React component for GraphiQL, intended to encompass the entire browser viewport.
Generated using TypeDoc
/ˈɡrafək(ə)l/ A graphical interactive in-browser GraphQL IDE. Try the live demo.
Unpkg (CDN)- A single HTML file using CDN assets and a script tag
Webpack- A starter for Webpack
Create React App- An example using Create React App
Parcel- An example using Parcel
(see: Usage UMD Bundle below for more required script tags)
Using as package
graphiqlpackage can be installed using your favorite package manager. You also need to have
graphqlinstalled which are peer dependencies of
The package exports a bunch of React components:
GraphiQLProvidercomponents renders multiple context providers that encapsulate all state management
GraphiQLInterfacecomponent renders the UI that makes up GraphiQL
GraphiQLcomponent is a combination of both the above components
There is a single prop that is required for the
GraphiQLcomponent called fetcher. A fetcher is a function that performs a request to a GraphQL API. It may return a
Promisefor queries or mutations, but also an
AsyncIterablein order to handle subscriptions or multipart responses.
An easy way to get create such a function is the
createGraphiQLFetchermethod exported from the
@graphiql/toolkitpackage. If you want to implement your own fetcher function you can use the
@graphiql/toolkitto make sure the signature matches what GraphiQL expects.
The following is everything you need to render GraphiQL in your React application:
Using as UMD bundle over CDN (Unpkg, JSDelivr, etc)
There exist pre-bundled static assets that allow you to easily render GraphiQL just by putting together a single HTML file. Check out the
index.htmlfile in the example project in this repository.
GraphiQL supports customization in UI and behavior by accepting React props and children.
For props documentation, see the API Docs
Parts of the UI can be customized by passing children to the
<GraphiQL.Logo>: Replace the GraphiQL logo with your own.
<GraphiQL.Toolbar>: Add a custom toolbar below the execution button. Pass the empty
<GraphiQL.Toolbar />if an empty toolbar is desired. Use the components provided by
@graphiql/reactto create toolbar buttons with proper styles.
<GraphiQL.Footer>: Add a custom footer shown below the response editor.
graphiql@2there exists a simple plugin API that allow you to build your own custom tools right into GraphiQL.
There are two built-in plugins that come with GraphiQL: The documentation explorer and the query history. Both can be toggled using icons in the sidebar on the left side of the screen. When opened, they appear next to the sidebar in a resizable portion of the screen.
title: A unique title for the plugin (this will show up in a tooltip when hovering over the sidebar icon)
icon: A React component that renders an icon which will be included in the sidebar
content: A React component that renders the plugin contents which will be shown next to the sidebar when opening the plugin
You can pass a list of plugin objects to the
GraphiQLcomponent using the
pluginsprop. You can also control the visibility state of plugins using the
visiblePluginprop and react to changes of the plugin visibility state using the
Inside the component you pass to
contentyou can interact with the GraphiQL state using the hooks provided by
@graphiql/react. As an example, check out how you can integrate the OneGraph Explorer in GraphiQL using the plugin API in the plugin package in this repo.
The GraphiQL interface uses CSS variables for theming, in particular for colors. Check out the
root.cssfile for the available variables.
Overriding these variables is the only officially supported way of customizing the appearance of GraphiQL. Starting from version 2, class names are no longer be considered stable and might change between minor or patch version updates.
The colors inside the editor can also be altered using CodeMirror editor themes. You can use the
editorThemeprop to pass in the name of the theme. The CSS for the theme has to be loaded for the theme prop to work.
You can also create your own theme in CSS. As a reference, the default
graphiqltheme definition can be found here.