Example below is an example of a adding a global ApolloProvider context to your stories with storybook.js
note: This example uses the @apollo/client v3 beta, but will work the same using apollo client v2.
Example below is an example of a adding a global ApolloProvider context to your stories with storybook.js
note: This example uses the @apollo/client v3 beta, but will work the same using apollo client v2.
import { | |
ApolloClient, | |
HttpLink, | |
InMemoryCache, | |
} from '@apollo/client' | |
export const Client = new ApolloClient({ | |
cache: new InMemoryCache(), | |
link: new HttpLink({ | |
uri: 'http://localhost:4000/graphql' | |
}) | |
}) |
import React from 'react' | |
import { addDecorator } from '@storybook/react' | |
import {ApolloProvider} from '@apollo/client' | |
import {Client} from '../src/apollo/Client' | |
//enable use of graphql in stories | |
addDecorator((storyFn) => <ApolloProvider client={Client}> {storyFn()} </ApolloProvider>) |
import React from 'react' | |
import { UserList } from './UserList' | |
import { gql, useQuery } from '@apollo/client' | |
export default { | |
title: 'Users', | |
component: UserList | |
} | |
const USERS_QUERY = gql` | |
query { | |
users { | |
name | |
} | |
} | |
` | |
function UsersList(props){ | |
const { loading, error, data} = useQuery(USERS_QUERY) | |
if (loading) return <p>Loading...</p> | |
if (error) return console.error('broken UsersList. Erorr: \n', error) | |
console.log('user list', data) | |
return <UserList teams={data.users} /> | |
} | |
export const userList = () => <UsersList /> |