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' }] } };
    }
  },
};