Are you looking for a way to optimize your GraphQL client experience? Look no further than Apollo Client Devtools. This powerful Chrome extension is designed to enhance your usage of Apollo Client, the popular open-source GraphQL client. With a range of features, Apollo Client Devtools takes your GraphQL development to the next level.
Explore and Query with Ease
One of the standout features of Apollo Client Devtools is its built-in version of the Apollo Studio Explorer. With this feature, you can effortlessly make queries against your GraphQL server using your app's network interface directly, without any configuration necessary. Say goodbye to the hassle of setting up separate tools - now you can explore and query your GraphQL server with ease, all within the Chrome extension.
Stay in Control with Query Watcher
Keeping track of queries is crucial for efficient development. Apollo Client Devtools offers a query watcher that provides real-time information about the queries being watched by the current page. You can easily see which queries are loading, as well as the variables associated with each query. This invaluable tool ensures that you stay in control of your GraphQL queries and optimize their performance.
Inspect Mutations and Cache
With Apollo Client Devtools, you gain access to a mutation inspector that allows you to view and analyze the mutations made to your Apollo Client application data. This feature gives you deep insights into the changes happening in your application, empowering you to debug and optimize your GraphQL mutations effectively. Additionally, the cache inspector provides a comprehensive view of your Apollo Client cache data. You can explore the cache through a user-friendly tree-like interface and easily search for specific field keys and values.
Apollo Client Devtools is a game-changer for developers working with GraphQL. Despite some mixed reviews, the extension offers valuable features that can significantly enhance your development workflow. While some users have reported issues, it's worth noting that the development team is actively addressing these concerns and seeking to improve the extension's functionality.
To get started with Apollo Client Devtools, simply install the Chrome extension. Although the extension has faced compatibility challenges on certain systems, many users have found success by explicitly setting the 'connectToDevTools' parameter to 'true'. If you encounter any problems, you can refer to the documentation provided by Apollo for guidance.
So why wait? Take advantage of the Apollo Client Devtools Chrome extension and elevate your GraphQL development experience. Explore, query, and gain insights into your GraphQL client like never before. Download the extension today and unlock the full potential of Apollo Client.
Keywords: Apollo Client Devtools, Chrome extension, GraphQL client, Apollo Client, Apollo Studio Explorer, query watcher, mutation inspector, cache inspector, Apollo Client cache data, Apollo
14 Reviews For This Extension
Installed in edge, refreshed the page... and can now see queries, execute them in a useful dev environment. Useful.
very sad. it's not working. I hope one day it will work but this is third time coming back realizing not gonna happen
Obnoxiously unnecessary. None of the projects I work on would be needed by this extension... but there's no way to prevent it from showing in the console log. (even if I add a filter, it will still display as a message). Why would the chrome developers force a message that isn't critical to the browser? I guess I'll have to start debugging the console in a different browser now.
I hate it and I hate the fact that I depend on it.
Mixed response. Sometimes the queries/cache populate, sometimes not. Currently its not working at all
Doesn't work at all. Please fix this and update your extension after testing in every browser.
It'a not working on chrome version 120 even
Guys this is not working anymore, even setting connectToDevTools: true, for some reason, version apollo client 3.8.6. Queries work in the app, as well as caching cause i can see it caching with another tool, but nothing is showing in the devtools.
works perfectly fine with Chrome version 120. As others have noted, support must be enabled in your app.
Does not work in the latest Chromium-based MS Edge
Not working at all. With connectToDevTools to true neither
It works fine after setting connectToDevTools to true in ApolloProvider.js (Oct 2023)
It's working but we have to be able to set the column's width, otherwise it's really hard to use the extension
Sorry, it does not work, even if I set: connectToDevTools to true. Also when I add it I get 3 build errors: 2 of them are: "Unhandled Runtime Error TypeError: Cannot read properties of undefined (reading 'getObservableQueries')" And the third is: "Unhandled Runtime Error Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering." It is on apple silicon and node v16