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