New
I18n with StorybookAutomate with Chromatic
Star74,173
View full catalog
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon Add to the catalog
urql
Make stories in Storybook with urql
npm install @urql/storybook-addon
Last updated 28 days ago
3.9k
Downloads per week
Readme View on GitHub

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' }] } };
    }
  },
};
Join the community
5,784 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI