A Chrome Dev Tool for tracking state in Apollo and Vue.js.

To use Helios install our Chrome Dev Tool. In your Vue application, bind our custom function to your component . Wrap the built-in Apollo mutate method with the custom method from our library.

After that the Chrome Dev Tool observes your application, allowing it to pass messages between the browser and Helios. Helios captures the Apollo state immediately before and immediately after the mutation and does a diff on those two objects, organizing them by mutation type, and displays the changes in the dev tool panel.

Google Chrome, the Helios extension and the code below in a util file (Helios.js)

After installing the Helios extension, create a file in your project called Helios.js containing the following code:

export default function ApolloDev (configObj) {
  const prevState = JSON.parse(
    JSON.stringify(this.$apolloProvider.clients.defaultClient.cache.data.data))
  return new Promise((resolve, reject) => {
    this.$apollo.mutate(configObj).then(res => {
      const newState = this.$apolloProvider.clients.defaultClient.cache.data.data
      window.postMessage([prevState, newState], '*')
      resolve(res)
    })
  })
}

Now import Helios.js wherever you make state mutations

import ApolloDev from "../utils/Helios";

Finally, bind the function and make your state mutation.

this.ApolloDev = ApolloDev.bind(this);
      this.ApolloDev({
        mutation: CREATE_VOTE_MUTATION,
        variables: {
          userId,
          linkId
        },
        update: (store, { data: { createVote } }) => {
          this.updateStoreAfterVote(store, createVote, linkId);
        }
      });

• deep-diff - A diffing tool for determining structural differences between objects
• Browserify - Dependency bundler
• Apollo-Client - A fully-featured GraphQL client

Fork the repo and create a pull request

• Erik Cox - Chrome Dev Tool UI and messaging
• Stephanie Fong - Designed wrapper function for Apoll retaining original mutate functionality
• Paul Valderama - Developed diffing function for Apollo state objects

This project is licensed under the MIT License

• Hat tip to the whole Front Street Solutions team for assistance and inspiration to build this tool