Apollo Client Developer Tools
Danielle Man
Last week I got the chance to work with Sashko and David on a project idea that the Apollo team has been thinking about for a while now: Apollo Client Chrome DevTools. We were able to start executing some of our ideas thanks to a company-wide engineering hack week, and today we’re excited that the first version of the DevTools is now available on the Chrome Web Store, and can be used with Apollo Client version 0.5.18 and above! If you haven’t used Apollo Client before, check it out.
The Apollo Client Developer Tools have a built-in GraphiQL console, a store inspector, and a watched queries inspector. Read on to learn more about how all this works, and let us know if you have any ideas about how we can make these tools even better!
GraphiQL Console
You can now make requests against either your app’s GraphQL server or the Apollo Client cache through the Chrome developer console. The best part is that this version of GraphiQL leverages your app’s network interface, so there’s no configuration necessary — it automatically passes along the proper HTTP headers, etc. using the same logic your Apollo Client app does.
We decided that we wanted to put the GraphiQL IDE into the Chrome console because it’s a key player for most GraphQL developer workflows (ours included), and we wanted to make it even easier to use. Setting up GraphiQL for an app typically takes a few steps. You need to include an npm package and often customize in GraphiQL itself to pass things like authentication headers through HTTP requests. Even then, you can’t easily simulate different app states if you have complex logic for sending headers.
Additionally, if your client is making large queries with a lot of variables and fragments, it can be cumbersome to replicate those in the GraphiQL IDE. By putting GraphiQL in console, we can use the fact that Apollo Client already knows about your queries, and copy them into GraphiQL for you from the watched query inspector to make it easy to experiment with different modifications.
Store Inspector
Through the Apollo Client Developer Tools, you can now easily view the state of your client-side cache and search for specific keys/values within it. Apollo Client uses Redux for the store, and while we love the Redux devtools, we found that they weren’t always useful for inspecting the state of your Apollo cache using our mental model of GraphQL.
We think of the GraphQL data store as a tree, and wanted to be able to view it as such. Thus, we’ve created a way for you to very easily inspect all the objects being held in the Apollo Client cache at a given time, search through them, and traverse through their various references as if the cache were actually stored in tree form. You can continue to use the Redux devtools to see the underlying storage format.
Watched Query Inspector
Finally, we’ve created a way for you to view all the queries being watched on any given page, including their loading state, what variables they’re using, and, if you’re using React, which React component they’re attached to (Angular support for this feature coming soon).
This feature is particularly useful for larger apps that may have multiple queries feeding data into one page. It helps you understand exactly what queries your app is requesting, and how they map to specific UI components. My favorite part of this feature is the “Run in GraphiQL” button, which will copy your query and variables directly into GraphiQL and fetch the result for you.
We’ve had a great time working on this extension so far, and are very excited to be releasing it today. There’s a lot more that can be done on this project, and we’d love to see your pull requests or feature ideas in the project repository on Github.
If you’re excited about GraphQL and interested in working on open-source full time, we’re hiring!
