vastconnect.blogg.se - Graphql network inspector

Graphql network inspector install#
Graphql network inspector code#

Apollo CodegenĪpollo Codegen is a tool to generate API code or type annotations based on a GraphQL schema and query documents. If you would like to use the devtools in production, just manually attach your Apollo Client instance to window._APOLLO_CLIENT_ or pass connectToDevTools: true to the constructor.įind more information about contributing and debugging on the Apollo Client DevTools GitHub page. Apollo Client adds this hook to the window automatically unless _ENV = 'production'. The "Apollo" tab will appear in the Chrome console if a global window._APOLLO_CLIENT_ object exists in your app. Pass connectToDevTools: false if want to manually disable this functionality. To enable the devtools in your app even in production, pass connectToDevTools: true to the ApolloClient constructor in your app. While your app is in dev mode, the devtools will appear as an "Apollo" tab in your chrome inspector.

Graphql network inspector install#

If you want to install a local version of the extension instead, skip ahead to the Developing section. You can install the extension via the Chrome Webstore. See when they're loading, what variables they're using, and, if you’re using React, which React component they’re attached to. View the queries being actively watched on any given page. Search for specific keys and values in the store and see the path to those keys highlighted. Visualize the mental model of the Apollo cache. View the state of your client-side cache as a tree and inspect every object inside. the same way your Apollo Client app does. 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. Make requests against either your app’s GraphQL server or the Apollo Client cache through the Chrome developer console. Watched query inspector: View active queries and variables, and locate the associated UI components.Normalized store inspector: Visualize your GraphQL store the way Apollo Client sees it, and search by field names or values.GraphiQL: Send queries to your server through the Apollo network interface, or query the Apollo cache to see what data is loaded.There are currently 3 main features of the devtools: The devtools appear as an "Apollo" tab in your Chrome inspector, along side the "Elements" and "Console" tabs.

The Apollo Client Devtools are available as extension for Chrome and Firefox. To learn more about Graph Manager, check out the overview.

Key insights into which parts of your schema are being actively used, and by whom.Īdvanced features are available with a subscription to an Apollo Team or Enterprise plan.

A GraphQL schema registry that tracks the evolution of your graph across your environments.

A query window that connects to all your environments and provides erganomic ways to author and manage queries.

It provides the following features to all Apollo users for free: Apollo Studio (formerly Graph Manager) is a cloud app that provides a single, consolidated place for you to collaborate on the evolution of your graph.