Rempl-apollo-devtools NPM

Rempl Apollo Client Devtools

Features

Rempl Apollo Devtools allows you to debug multiple apollo clients and it allows you to inspect key events. This tool contains the following features:

Cache inspector - Allow seeing the content of the cache and allows you to remove a specific object from the cache.
Watched Query inspector - Observe active queries.
Mutation inspector - Visualise mutations, which were fired.

Installation

First off, you need to include the bundled library's script into your site.

yarn install @microsoft/rempl-apollo-devtools

include dist/apollo-devtools.js in Webpack

webpackConfig.entry["apollodevtools"] = PROJECT_ROOT("node_modules/rempl-apollo-devtools/dist/apollo-devtools.js");

build the library and include <script> with dist/apollo-devtools.jsin your HTML page. <script src="path/apollo-devtools.js"></script>

In your project, you need to attach the apollo client(s) instance into the global variable APOLLO_CLIENTS

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
  cache: new InMemoryCache()
});

window.__APOLLO_CLIENTS__ = [client]