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

    1.0.8 • Public • Published

    Urql Storybook Addon

    Create fixtures to model all the states of your GraphQL requests with Urql.

    Installation

    npm i -D @urql/storybook-addon

    Usage

    Add the decorator in your preview file at .storybook/preview

    import { addDecorator } from '@storybook/react';
    import { urqlDecorator } from '@urql/storybook-addon';
    
    addDecorator(urqlDecorator);

    Mock states by using the urql parameter on your stories.

    export const MyStory: Story = () => <Users />;
    
    MyStory.parameters = {
      urql: () => ({ data: { user: { id: 1234, name: 'Steve' } } }),
    };

    Examples

    Fetching state

    Setting a query in an infinitely fetching state.

    MyStory.parameters = {
      urql: () => new Promise(() => {}),
    };

    Error state

    Returning an error for a query.

    MyStory.parameters = {
      urql: () => ({ errors: ['Some error'] }),
    };

    Single response

    Returning data for a query (single request).

    MyStory.parameters = {
      urql: () => ({ data: { user: { id: 1234, name: 'Steve' } } }),
    };

    Multiple queries

    Returning data for multiple queries (conditional response).

    MyStory.parameters = {
      urql: op => {
        if (getQueryName(op.query) === 'GetUser') {
          return { data: { user: { id: 1234, name: 'Steve' } } };
        }
    
        if (getQueryName(op.query) === 'GetFeed') {
          return { data: { feed: [{ id: 1, title: 'Fake news' }] } };
        }
      },
    };

    Install

    npm i @urql/storybook-addon

    DownloadsWeekly Downloads

    1,654

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    14.5 kB

    Total Files

    17

    Last publish

    Collaborators

    • philpl
    • andyrichardson
    • formidable-owner
    • jdecroock
    • parkerziegler
    • npm-urql