New
Component Story Format 3 is hereAutomate with Chromatic
Storybook Day 2023
Star76,398
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
urql
Make stories in Storybook with urql
npm install @urql/storybook-addon
Last updated 5 months ago
5.5k
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,883 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI