···11-# @urql/storybook-addon
22-33-## 2.0.1
44-55-### Patch Changes
66-77-- remove dependency on `react-urql` from storybook exchange, by [@JoviDeCroock](https://github.com/JoviDeCroock) (See [#2646](https://github.com/FormidableLabs/urql/pull/2646))
88-99-## 2.0.0
1010-1111-### Major Changes
1212-1313-- **Goodbye IE11!** 👋 This major release removes support for IE11. All code that is shipped will be transpiled much less and will _not_ be ES5-compatible anymore, by [@kitten](https://github.com/kitten) (See [#2504](https://github.com/FormidableLabs/urql/pull/2504))
1414-- Upgrade to [Wonka v6](https://github.com/0no-co/wonka) (`wonka@^6.0.0`), which has no breaking changes but is built to target ES2015 and comes with other minor improvements.
1515- The library has fully been migrated to TypeScript which will hopefully help with making contributions easier!, by [@kitten](https://github.com/kitten) (See [#2504](https://github.com/FormidableLabs/urql/pull/2504))
1616-1717-## 1.0.9
1818-1919-### Patch Changes
2020-2121-- ⚠️ Fix Node.js ESM re-export detection for `@urql/core` in `urql` package and CommonJS output for all other CommonJS-first packages. This ensures that Node.js' `cjs-module-lexer` can correctly identify re-exports and report them properly. Otherwise, this will lead to a runtime error, by [@kitten](https://github.com/kitten) (See [#2485](https://github.com/FormidableLabs/urql/pull/2485))
2222-2323-## 1.0.8
2424-2525-### Patch Changes
2626-2727-- Extend peer dependency range of `graphql` to include `^16.0.0`.
2828- As always when upgrading across many packages of `urql`, especially including `@urql/core` we recommend you to deduplicate dependencies after upgrading, using `npm dedupe` or `npx yarn-deduplicate`, by [@kitten](https://github.com/kitten) (See [#2133](https://github.com/FormidableLabs/urql/pull/2133))
2929-3030-## 1.0.7
3131-3232-### Patch Changes
3333-3434-- Remove closure-compiler from the build step (See [#1570](https://github.com/FormidableLabs/urql/pull/1570))
3535-3636-## 1.0.6
3737-3838-### Patch Changes
3939-4040-- Add Storybook metadata to `package.json` for npm discoverability, by [@coderkevin](https://github.com/coderkevin) (See [#1469](https://github.com/FormidableLabs/urql/pull/1469))
4141-4242-## 1.0.5
4343-4444-### Patch Changes
4545-4646-- Add missing optional dependency (@urql/devtools), by [@andyrichardson](https://github.com/andyrichardson) (See [#1129](https://github.com/FormidableLabs/urql/pull/1129))
4747-4848-## 1.0.4
4949-5050-### Patch Changes
5151-5252-- - Add `@urql/devtools` to `@urql/storybook-addon`. Previously it was not included (See [#1092](https://github.com/FormidableLabs/urql/issues/1092)), but now the exchange works out of the box with Storybook, by [@r281GQ](https://github.com/r281GQ) (See [#1112](https://github.com/FormidableLabs/urql/pull/1112))
5353-5454-## 1.0.3
5555-5656-**Initial Release**
-82
packages/storybook-addon/README.md
···11-# Urql Storybook Addon
22-33-Create fixtures to model all the states of your GraphQL requests with Urql.
44-55-## Installation
66-77-```sh
88-npm i -D @urql/storybook-addon
99-```
1010-1111-## Usage
1212-1313-Add the decorator in your preview file at `.storybook/preview`
1414-1515-```tsx
1616-import { addDecorator } from '@storybook/react';
1717-import { urqlDecorator } from '@urql/storybook-addon';
1818-1919-addDecorator(urqlDecorator);
2020-```
2121-2222-Mock states by using the `urql` parameter on your stories.
2323-2424-```tsx
2525-export const MyStory: Story = () => <Users />;
2626-2727-MyStory.parameters = {
2828- urql: () => ({ data: { user: { id: 1234, name: 'Steve' } } }),
2929-};
3030-```
3131-3232-## Examples
3333-3434-### Fetching state
3535-3636-Setting a query in an infinitely fetching state.
3737-3838-```tsx
3939-MyStory.parameters = {
4040- urql: () => new Promise(() => {}),
4141-};
4242-```
4343-4444-### Error state
4545-4646-Returning an error for a query.
4747-4848-```tsx
4949-MyStory.parameters = {
5050- urql: () => ({ errors: ['Some error'] }),
5151-};
5252-```
5353-5454-### Single response
5555-5656-Returning data for a query (single request).
5757-5858-```tsx
5959-MyStory.parameters = {
6060- urql: () => ({ data: { user: { id: 1234, name: 'Steve' } } }),
6161-};
6262-```
6363-6464-### Multiple queries
6565-6666-Returning data for multiple queries (conditional response).
6767-6868-```tsx
6969-import { getOperationName } from 'urql';
7070-7171-MyStory.parameters = {
7272- urql: op => {
7373- if (getOperationName(op.query) === 'GetUser') {
7474- return { data: { user: { id: 1234, name: 'Steve' } } };
7575- }
7676-7777- if (getOperationName(op.query) === 'GetFeed') {
7878- return { data: { feed: [{ id: 1, title: 'Fake news' }] } };
7979- }
8080- },
8181-};
8282-```
···11-import { Exchange, makeResult } from '@urql/core';
22-import { pipe, map, mergeMap, fromPromise, fromValue } from 'wonka';
33-44-export const getStorybookExchange = <T extends { parameters: any }>(
55- context: T
66-): Exchange => () => op =>
77- pipe(
88- op,
99- map(operation => [operation, context.parameters.urql(operation)]),
1010- mergeMap(([operation, result]) =>
1111- 'then' in result
1212- ? fromPromise(result.then((r: any) => makeResult(operation, r)))
1313- : fromValue(makeResult(operation, result))
1414- )
1515- );
-6
packages/storybook-addon/src/register.ts
···11-import addons from '@storybook/addons';
22-33-// We might use this in the future...
44-addons.register('storybook-addon-urql', () => {
55- return;
66-});