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

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

Versions

Current Tags

Version History

Package Sidebar

Install

npm i @urql/storybook-addon

Weekly Downloads

6,071

Version

2.0.1

License

MIT

Unpacked Size

17.5 kB

Total Files

17

Last publish

Collaborators

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