Vue-apollo: Push new Data to existing Query Cache

[gijo-varghese]

I'm building a chat application using Vue-apollo. When the component is loaded it will load the messages from the network. Instead of Subscriptions, I use Socket IO. So when a new message arrives or is sent from the admin itself I've to add that message to the result of the initial query. I tried using update() in Query. However it doesn't allow me to change the data, says its read-only!

const USER_QUERY = gql `query ($id: ID!){
                  user(id: "1880068685646376_1371805906188986") {
                    messages{
                      id
                      message
                    }
                  }
              }`
sockets: {
    connect: function() {
      console.log('socket connected')
    },
    message: function(data) {
      console.log(data); // new message arrives here, push 'data' to the cache of messages

    },
    disconnect: function() {
      console.log('socket disconnected')
    },
  },
apollo: {
    user: {
      query: USER_QUERY,
      fetchPolicy: 'network-only'
    }
  },
  data() {
    return {
      user: ''
    }
  }

[gijo-varghese]

Basically, I want to update the cache of a query on a button click (not using mutations or subscriptions)

[Akryum]

Check out the Direct Cache access documentation.

[gijo-varghese]

@Akryum Thanks, a lot. But I got stuck in 'client'

In the docs, it says:

const { todo } = client.readQuery({
  query: gql`
    query ReadTodo {
      ....
    }
  `,
});

Since I'm using the vue-apollo, what will be the client? (I'm going to using these inside a .vue component file).
I've tried below code, gives error: _Uncaught TypeError: this.$apollo.readQuery is not a function_:

const { todo } = this.$apollo.readQuery({
  query: gql`
    query ReadTodo {
      ....
    }
  `,
});

My main.js will look like this:

import Vue from 'vue'
import App from './App'
import {
  ApolloClient,
  createBatchingNetworkInterface
} from 'apollo-client'
import VueApollo from 'vue-apollo'

const apolloClient = new ApolloClient({
  networkInterface: createBatchingNetworkInterface({
    uri: 'http://localhost:5000/graphql'
  })
})

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})

Vue.use(VueApollo)

new Vue({
  el: '#app',
  apolloProvider,
  template: '<App/>',
  components: {
    App
  }
})

[gijo-varghese]

Oh, got it :+1:

this.$apollo.provider.defaultClient

right?

[Akryum]

Yes! 😄

[gijo-varghese]

@Akryum reactive variables are not working readQuery. Is there any way to do it?

[gijo-varghese]

Sorry again. Figured it out ;)

      // read query
      var data = this.$apollo.provider.defaultClient.readQuery({
        query: USER_QUERY,
        variables: {
          id: this.id,
        }
      });

      // push new data
      data.user.messages.push({
        id: "10",
        message: "This is awesome",
        __typename: "Message"
      });

      // write to cache
      this.$apollo.provider.defaultClient.writeQuery({
        query: USER_QUERY,
        variables: {
          id: this.id,
        },
        data: data
      });