Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abhiaiyer91/apollo-storybook-decorator
Wrap your storybook environment with Apollo Client, provide mocks for isolated UI testing with GraphQL
https://github.com/abhiaiyer91/apollo-storybook-decorator
angular apollo-client graphql react storybook vue
Last synced: 21 days ago
JSON representation
Wrap your storybook environment with Apollo Client, provide mocks for isolated UI testing with GraphQL
- Host: GitHub
- URL: https://github.com/abhiaiyer91/apollo-storybook-decorator
- Owner: abhiaiyer91
- Created: 2017-07-04T19:30:05.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T14:43:22.000Z (11 months ago)
- Last Synced: 2024-10-13T22:41:00.261Z (28 days ago)
- Topics: angular, apollo-client, graphql, react, storybook, vue
- Language: JavaScript
- Homepage:
- Size: 2.54 MB
- Stars: 332
- Watchers: 5
- Forks: 34
- Open Issues: 113
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-graphql - Apollo Storybook Decorator - Wrap your React Storybook stories with Apollo Client, provide mocks for isolated UI testing with GraphQL (Tools / Julia Libraries)
README
# Apollo Storybook Decorator
Wrap your React Storybook stories with Apollo Client.
## Supports
| | React | React Native | Vue | Angular |
| ---------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------: | :---------: |
| Apollo Client V2 | 
| 
| 
| Coming Soon |
| Apollo Client V1 | 
| X | X | X |
## The Gist
- Provide GraphQL type definitions to the decorator.
- Provide a Mock object like you would with `graphql-tools` http://dev.apollodata.com/tools/graphql-tools/mocking.html
Take this:
```js
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 (
{({ loading, data }) => {
const user = data && data.currentUser;
if (loading) {
return
Loading one second please!
;
}
return (
{user.name}
from {user.city}
said "{user.lastAction.message}"{" "}
);
}}
);
}
storiesOf("Apollo Client", module).add("Current User", () => {
return ;
});
```
To Render this:
## Getting Started
For Apollo Client 2.x (React)
```sh
yarn add apollo-storybook-react -D
npm install apollo-storybook-react --save-dev
```
## Full Example
```js
import 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 (
{({ loading, data }) => {
const hello = data && data.helloWorld;
if (loading) {
return
Loading one second please!
;
}
return
{hello}
;
}}
);
}
storiesOf("Apollo Storybook Decorator", module)
.addDecorator(
apolloStorybookDecorator({
typeDefs,
mocks
})
)
.add("Hello World Test", () => {
return ;
});
```
## Usage
You can add the decorator at a per story basis:
```js
storiesOf("Apollo Client", module).addDecorator(
apolloStorybookDecorator({
typeDefs,
mocks
})
);
```
or you can add it to all stories, head to your storybook `config.js`
```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);
```
### Options
```js
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,
// 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
};
```
#### resolverValidationOptions
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:
```js
storiesOf("Apollo Client", module).addDecorator(
apolloStorybookDecorator({
typeDefs,
mocks,
resolverValidationOptions: {
requireResolversForResolveType: false
}
})
);
```
## Development
This repo is split up using the `lerna` monorepo module.
To get started, clone this repo and run the following command:
```bash
$ yarn # install node deps
```
```bash
$ lerna bootstrap
```
To run the project's examples, run:
Current storybook is enabled in `apollo-storybook-react` and `apollo-storybook-v1`
```bash
$ yarn storybookReact
```
or for v1
```bash
$ yarn storybookV1
```