react-apollo-hooks icon indicating copy to clipboard operation
react-apollo-hooks copied to clipboard

Usage with Storybook

Open jgoux opened this issue 6 years ago • 0 comments

Hello,

I'd like to use react-apollo-hooks with Storybook.

I saw your example for testing, but in the context of Storybook I can't call waitForNextTick.

So I'm stuck in the Loading state when trying to build my component in isolation :

import { Suspense } from 'react'
import { ApolloClient } from 'apollo-client'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { MockLink } from 'apollo-link-mock'
import { ApolloProvider } from 'react-apollo-hooks'
import { storiesOf } from '@storybook/react'
import { GET_BOITE, BoiteDetails } from './BoiteDetails'

let MOCKS = [
  {
    request: {
      query: GET_BOITE,
      variables: { where: { id: '123' } }
    },
    result: {
      data: {
        id: '123',
        libelle: 'Boite 123'
      }
    }
  }
]

let addApolloProvider = mocks => story => {
  let client = new ApolloClient({
    cache: new InMemoryCache(),
    link: new MockLink(mocks)
  })
  return (
    <Suspense fallback="Loading...">
      <ApolloProvider client={client}>{story()}</ApolloProvider>
    </Suspense>
  )
}

storiesOf('Parametres/Boites', module)
  .addDecorator(addApolloProvider(MOCKS))
  .add("Détails d'une boite", () => <BoiteDetails id="123" />)

jgoux avatar Jan 04 '19 13:01 jgoux