Hook up Apollo Client dev-tools extension to your app

I’ve started using Apollo for GraphQL in the client and server for a personal project. I came across this- https://chrome.google.com/webstore/detail/apollo-client-developer-t/jdkknkkbebbapilgoeccciglkfbmbnfm great dev-tools extensions that Apollo provides which comes very handy for development purpose.

For this article, I’ll skip the first few steps that is creating an app and adding Apollo dependencies. I’m using create-react-app for creating React app boilerplate. You can do the same by following this — https://facebook.github.io/create-react-app/docs/getting-started. After creating the React app, Follow this — https://facebook.github.io/create-react-app/docs/getting-started tutorial for installing dependencies to get started with Apollo.

In your Apollo client object, add an option called connectToDevTools which can be enabled when your app is running in dev mode with something like process.env.NODE_ENV === ‘development’. It should be noted that ApolloClient is imported from apollo-client. This will not work with apollo-boost because it’s a pre-configured version of ApolloClient and doesn’t allow for configuring this option. This could be a source of confusing when starting out with Apollo library.

The last step is to add the Apollo Developer Tools extension to your browser (link given above). Happy coding!