this.$apollo.client = undefined

[oddmouse]

I updated to vue-apollo@2.1.0-beta.2 and apollo-client@1.0.1. All of my queries seem to be working fine but I can't seem to access the client now. Is there a new way to access this.$apollo.client with the new provider setup?

[Akryum]

I forgot to change that in the doc! It is now this.$apollo.provider.defaultClient or this.$apollo.provider.clients.<key>.

[oddmouse]

Thanks @Akryum!

[stlbucket]

I've got

    "apollo-client": "^1.0.2",
...
    "vue-apollo": "^2.1.0-beta.2",

and am still getting this.$apollo is undefined...

i know my provider is there, because my query is working. my component looks like this:

<template>
  <div>
    <input type="text" v-model="name" placeholder="company name">
    <button v-on:click="saveCustomer({name: name})">Save</button>
    <p>{{ allCustomers }}</p>
  </div>
</template>

<script>
  import gql from 'graphql-tag'

  const createCustomerMutation = gql`mutation CreateCustomer($name: String!) {
  createCustomer(name: $name) {
    id,
    name
  }
}`

  const allCustomersQuery = gql`query {
    allCustomers {
      id,
      name
     }
  }`

  export default {
    data () {
      return {
        name: '',
        allCustomers: []
      }
    },
    methods: {
      saveCustomer: (companyInfo) => {
        console.log('this', this)
        console.log('this.$apollo', this.$apollo)

        this.$apollo.provider.defaultClient.mutate({
          mutation: createCustomerMutation,
          variables: companyInfo
        })
          .then(data => {
            console.log(data)
          })
          .catch(error => {
            console.log('ERROR', error)
          })
      }
    },
    apollo: {
      allCustomers: allCustomersQuery
    }
  }
</script>

[oddmouse]

The setup changed a bit with the new beta. Did you pass it into your root component?
https://github.com/Akryum/vue-apollo#create-a-provider

[stlbucket]

gah...

can't use arrow functions:

...

...
    methods: {
     ** saveCustomer (companyInfo) { **
        console.log('this', this)
        console.log('this.$apollo', this.$apollo)

        this.$apollo.provider.defaultClient.mutate({
          mutation: createCustomerMutation,
          variables: companyInfo
        })
          .then(data => {
...

all is good now

[Akryum]

@stlbucket Using arrow functions for declaring methods is a very bad idea, since you lose the this context of the component (it's what arrow functions are for), and instead get window: this.$apollo is then equivalent to window.$apollo which fails.
That said, it's recommended to use arrow functions inside methods to keep the component this context. 😉