Miss any of our Open RFC calls?Watch the recordings here! »

@storybook/addon-graphql

6.0.5 • Public • Published

Storybook GraphiQL Addon

Storybook GraphQL Addon can be used to display the GraphiQL IDE with example queries in Storybook.

Framework Support

Screenshot

Getting Started

First, install the addon

yarn add @storybook/addon-graphql --dev

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

import { storiesOf } from '@storybook/react'
import { setupGraphiQL } from '@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") {
      name
    }
  }`));

Tip: try creating the helper in another file and import the configured graphiql helper from it

Advanced Setup

The setupGraphiQL function also accepts a fetcher parameter which can be used to change how graphiql gets data. If the fetcher parameter is not given, it'll create a fetcher which uses the fetch api to make requests. The above example can also be written using a custom fetcher.

import { storiesOf } from '@storybook/react'
import { setupGraphiQL } from '@storybook/addon-graphql'
 
import { url } from './settings';
 
const fetcher = params => {
  const options = {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(params),
  };
  return fetch(url, options).then(res => res.json());
};
 
// create the helper with a custom fetcher
const graphiql = setupGraphiQL({ fetcher });
 
storiesOf('GraphQL Demo', module)
  .add('get user info', graphiql(`{
    user(id: "1") {
      name
    }
  }`));

Install

npm i @storybook/addon-graphql

DownloadsWeekly Downloads

12,060

Version

6.0.5

License

MIT

Unpacked Size

16.7 kB

Total Files

30

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar