Neurologically Paralyzing Mouseovers
    Wondering what’s next for npm?Check out our public roadmap! »

    @storybook/addon-graphql
    TypeScript icon, indicating that this package has built-in type declarations

    6.2.9 • 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

    7,615

    Version

    6.2.9

    License

    MIT

    Unpacked Size

    18.6 kB

    Total Files

    35

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar