How do I use Apollo Dev Tools with Storybook?

[coffenbacher]

The "Apollo" tab will appear in the Chrome console if there exists a global window.APOLLO_CLIENT object in your app.

My __APOLLO_CLIENT__ is created, but it gets attached to the storybook-preview-iframe, so the devtools don't connect. Any ideas on how to connect this to the global window?

https://github.com/apollographql/apollo-client-devtools

[coffenbacher]

Managed to solve this one 👍 This might be good to put a pointer to somewhere, and/or hopefully Google just picks this up for anyone searching for an iframe issue with other React tools

The key is just bumping the client object up to the iframe parent as part of .storybook/config.js

class DevtoolsIFrameFix extends React.Component {
  constructor() {
    super()
    if (window.parent !== window) {
      window.parent.__APOLLO_CLIENT__ = window.__APOLLO_CLIENT__
    }
  }

  render() {
    return React.Children.only(this.props.children)
  }
}

addDecorator(story => (
  <ThemeProvider theme={Theme}>
    <ApolloProvider client={client}>
      <DevtoolsIFrameFix>
        <Global>{story()}</Global>
      </DevtoolsIFrameFix>
    </ApolloProvider>
  </ThemeProvider>
))

[slikts]

Can't say that this would work; __APOLLO_CLIENT__ is defined in the console, so it's applied correctly, but the Apollo tab doesn't show up in the devtools.

[madflanderz]

I have the same problem when i watch the story inside storybook, Dev tools doesn't show up. But it works if you open the story in another tab with "Open canvas in new tab"-button then the apollo tab in there.

[sandwichsudo]

I have the same problem when i watch the story inside storybook, Dev tools doesn't show up. But it works if you open the story in another tab with "Open canvas in new tab"-button then the apollo tab in there.

I agree with this except I only seem to get querys (not mutations). Both appear in the dev tools in my app, but when I render the Mutation component in storybook, and trigger the mutation, the function runs but does not appear in the Apollo client dev tools.