Apollo Option does not update data reactively

[Steditor]

Describe the bug
A smart query added via the apollo option does no longer update the rendered data when the cache is updated whilst the update does happen with this.$apollo.addSmartQuery.

To Reproduce

1. With the vue options api add a smart query returning an array of results with

apollo: {
   mykey: MyQuery,
},
data() {
  return {
    mykey: [],
  };
},

2. Update the cached data of this query.

Expected behavior

Data is rendered and the rendered data updates according to the updated data in the cache.

Actual behavior

Whilst the initial server result is rendered, no updates to the cache are rendered.
Note that it seems like the new data is picked up by the query and forwarded to the vue component: Printing the current content of this.mykey to the console within a setInterval shows, that the component's state is updated, but seemingly in a non-reactive way as the rendered state of the component does not change.

Workaround

Manually adding the smart query works: Replacing the apollo option with

created() {
  this.$apollo.addSmartQuery("mykey", {
    query: MyQuery,
  });
},

solves the issue; the rendered data is updated as expected. This is not what I expected; I thought, this would do the exact same thing, but it does not.

Versions
vue: 3.2.33
vue-apollo: 4.0.0-alpha.16
@apollo/client: 3.5.10

Additional context
The bug appeared somewhere in between vue version 3.2.29 (everything working as expected) and vue 3.2.33 (described behavior).

[lukastaegert]

Did you also post the issue as a vue bug because it apparently IS a regression of sorts? Maybe it was broken as part of the fix to vuejs/core#5415 that was released in 3.2.32

[jpikora]

Found the same issue, had to revert to vue 3.2.30 for now to keep things together. Changes in vue 3.2.31 broke vue-apollo, but apparently fix/changes in 3.2.32 introduced this bug with reactivity of apollo data fields.

I've noticed that it works if the apollo fields are not predefined in data object, which however is not desired since the possibility to set initial values would be lost. Also adding queries manually using this.$apollo.addSmartQuery won't cause reactivity issues, which is weird because same method is used internally while processing apollo options during component creation.

Desirable code, but reactivity is lost on foo:

data () {
  return {
    foo: null
  }
},
apollo: {
  foo: {
    query: QUERY
  }
},
watch: {
  foo () {
    // never called, even though foo gets populated once query resolves.
  }
}

Reactivity works, but with workarounds (not ideal):

A) omitting data definition

apollo: {
  foo: {
    query: QUERY
  }
},
watch: {
  foo () {
    // gets called
  }
}

B) manual smart query call

data () {
  return {
    foo: null
  }
},
created () {
  this.$apollo.addSmartQuery('foo', { query: QUERY })
},
watch: {
  foo () {
    // gets called
  }
}

[twelve17]

I just filed a similar bug--I'm not sure if it's the exact same, but I do have a simple app in a codesandbox there to reproduce it: #1368 . So is the thinking that the fix/changes in 3.2.32 to fix a previous bug, and are now causing this behavior, are a problem of that fix, or is that fix now exposing a bug in this repo's code?

[jpikora]

Yes, it's probably the same issue, something gets overwritten in wrong way while syncing/setting apollo data to vue components and the reactivity is lost. Guess we need to dive into source code for potentional fix :)

[twelve17]

@jpikora I have filed: vuejs/core#6099

[Akryum]

I've landed a potential fix in alpha 18.

[twelve17]

@Steditor is it working for you now with alpha 18?

[twelve17]

@jpikora FYI, another workaround is just to use a manual update:

manual: true,
result({ data }, key) {
  this[key] = data[key];
}

[Steditor]

@Steditor is it working for you now with alpha 18?

I finally got around to testing this (on alpha 20): Yes, by now the bug seems to be gone. Thank you everyone!