Wrap your React Storybook stories with Apollo Client.
| React | React Native | Vue | Angular | |
|---|---|---|---|---|
| Apollo Client V2 |  |
 |
 |
Coming Soon |
| Apollo Client V1 |  |
X | X | X |
- Provide GraphQL type definitions to the decorator.
- Provide a Mock object like you would with
graphql-toolshttp://dev.apollodata.com/tools/graphql-tools/mocking.html
Take this:
import React from "react";
import { Query } from "react-apollo";
import gql from "graphql-tag";
import { storiesOf } from "@storybook/react";
const userQuery = gql`
query getUser = {
currentUser {
name
lastAction {
message
}
avatar
city
}
}
`;
function CurrentUser() {
return (
<Query query={userQuery}>
{({ loading, data }) => {
const user = data && data.currentUser;
if (loading) {
return <h1>Loading one second please!</h1>;
}
return (
<div>
<img src={user.avatar} />
<h1>
{user.name}
from {user.city}
said "{user.lastAction.message}"{" "}
</h1>
</div>
);
}}
</Query>
);
}
storiesOf("Apollo Client", module).add("Current User", () => {
return <CurrentUser />;
});To Render this:
For Apollo Client 2.x (React)
yarn add apollo-storybook-react -D
npm install apollo-storybook-react --save-devimport React from "react";
import { Query } from "react-apollo";
import gql from "graphql-tag";
import { storiesOf } from "@storybook/react";
import apolloStorybookDecorator from "apollo-storybook-react";
const typeDefs = `
type Query {
helloWorld: String
}
schema {
query: Query
}
`;
const mocks = {
Query: () => {
return {
helloWorld: () => {
return "Hello from Apollo!!";
}
};
}
};
function HelloWorld() {
return (
<Query
query={gql`
query hello {
helloWorld
}
`}
>
{({ loading, data }) => {
const hello = data && data.helloWorld;
if (loading) {
return <h1>Loading one second please!</h1>;
}
return <h1>{hello}</h1>;
}}
</Query>
);
}
storiesOf("Apollo Storybook Decorator", module)
.addDecorator(
apolloStorybookDecorator({
typeDefs,
mocks
})
)
.add("Hello World Test", () => {
return <HelloWorld />;
});You can add the decorator at a per story basis:
storiesOf("Apollo Client", module).addDecorator(
apolloStorybookDecorator({
typeDefs,
mocks
})
);or you can add it to all stories, head to your storybook config.js
import { configure, addDecorator } from "@storybook/react";
import apolloStorybookDecorator from "apollo-storybook-react";
import typeDefs from "../wherever/your/typeDefs/live";
import mocks from "../wherever/your/mocks/live";
addDecorator(
apolloStorybookDecorator({
typeDefs,
mocks
})
);
function loadStories() {
// stories...
}
configure(loadStories, module);type DecoratorType = {
//string representing your graphql schema, if you use tools like `babel-plugin-inline-import` you can import this from a .graphql file
typeDefs: string | Array<string>,
// object that resolves the keys of your graphql schema
mocks: Object,
apolloClientOptions?: Object,
apolloLinkOptions?: Object,
// optional typeResolvers for complex mocking
typeResolvers?: Object,
// optional context
context?: Object,
// optional root value
rootValue?: Object,
// optional resolver validation options, see: https://git.io/fALf4
resolverValidationOptions?: Object
};This option gets passed directly to makeExecutableSchema of graphql-tools, as described at https://git.io/fALf4. This allows you to override requireResolversForResolveType and other validation flags:
storiesOf("Apollo Client", module).addDecorator(
apolloStorybookDecorator({
typeDefs,
mocks,
resolverValidationOptions: {
requireResolversForResolveType: false
}
})
);This repo is split up using the lerna monorepo module.
To get started, clone this repo and run the following command:
$ yarn # install node deps$ lerna bootstrapTo run the project's examples, run:
Current storybook is enabled in apollo-storybook-react and apollo-storybook-v1
$ yarn storybookReactor for v1
$ yarn storybookV1