Storybook addon to display the GraphiQL IDE


2101.0.15 years ago5 years agoMinified + gzip package size for @kadira/storybook-addon-graphql in KB


GraphiQL Addon

The GraphiQL addon can be used to display the GraphiQL IDE with example queries. This addon works with React Storybook.

Getting Started

First, install the addon

npm install -D @kadira/storybook-addon-graphql

Import the setupGraphiQL function and use it to create the graphiql helper with a base url.

import { storiesOf } from '@kadira/storybook'
import { setupGraphiQL } from '@kadira/storybook-addon-graphql'

// setup the graphiql helper which can be used with the add method later
const graphiql = setupGraphiQL({ url: 'http://localhost:3000/graphql' });

storiesOf('GraphQL Demo', module)
  .add('get user info', graphiql(`{
    user(id: "1") {

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.