Vue-apollo: this in updateQuery

[shtse8]

I want to access some properties of the component in updateQuery, but when I'm calliing this in updateQuery of Subscription, the this is referring to the object itself. How can I access the component this in the updateQuery?

subscribeToMore: {
  variables () {
    console.log('variables.this', this) // it's correct, vue component
    return {}
  },
  updateQuery (result, { subscriptionData }) {
    console.log('updateQuery.this', this) // it's wrong, just the object itself, I guess missing binding this
  }
}

[duyduc-nguyen]

You have to use arrow func like in the example:
updateQuery: (previousResult, { subscriptionData }) => { // Here, return the new result from the previous with the new data },

[shtse8]

@duyduc-nguyen it can't because the arrow function this is just pointing to the outside object instead of the vm instance.

[Samuell1]

You can access it, as you can see in this example https://github.com/Akryum/devfest-nantes-2017/blob/apollo2/app/src/components/PageHome.vue#L94

[shtse8]

@Samuell1 the this just access the https://github.com/Akryum/devfest-nantes-2017/blob/apollo2/app/src/components/PageHome.vue#L87 object. but not the vm.
but it works fine in variables. It's a bug (missing binding this for the function updateQuery) and I have fixed it in my project. If anyone has the same issue (seems you all don't think it's a bug), I will create a PR.

[razorabhu1995]

@Akryum
how did you fix it sir?

[deathg0d]

Has this been fixed? Still cannot access this, which shows as undefined inside updateQuery. (3.0.0-beta.29)

EDIT: It works, looks like you cannot use arrow function
updateQuery (result, { subscriptionData }) { works but not updateQuery: (result, { subscriptionData }) => {

[pascoual]

Same for me.

[garcianavalon]

I can confirm that using arrow function does not work (this will be undefined) but using a function does work updateQuery (result, { subscriptionData })

One part of the problem is that the docs show an arrow function, which leads many to this error. A quick fix would be to update the docs to change the example, so copy-paste is safer 😆