Storybook with simple diy decorator using ApolloProvider

README.md

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.

Client.js

import {
  ApolloClient,
  HttpLink,
  InMemoryCache,
} from '@apollo/client'

export const Client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: 'http://localhost:4000/graphql'
  })
})

preview.js

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>)

UserList.stories.js

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 />