Description
Given this option API reactive query:
apollo: {
message: {
query,
variables: { id: 1 },
},
},
And this computed property, which references the above reactive query property:
computed: {
messageSubstr() {
return this.message?.text?.substr(0, 2);
},
},
The messageSubstr
property does not seem to be called when the query is complete.
However, if manual
is set to true
and a result
function is added to simply update the reactive property presumably as it would have been done via the automatic mode, then the computed property does get called:
manual: true,
result ({ data }, key) {
this[key] = data.message;
},
To Reproduce
I have created a minimal app in this code sandbox:
https://codesandbox.io/s/apollo-vue-computed-reactivity-8co7ec
Note that I ran into this issue in the sandbox, which required frequent manual reloading.
Alternatively, you can use this copy to run locally
- Clone https://github.com/twelve17/avue
- run
yarn install
, thennpm run serve
- Navigate to
http://localhost:8080/
Tested with node v14.19.2, yarn 1.22.18.
Expected behavior
In the UI, both the apollo reactive property (message
) is printed, and a contrived computed property as well (messageSubstr
, which just does message.substr(0, 2)
).
The messageSubStr
computed property should be "He", e.g. the substring of "Hello World".
Actual Results
If manual = false
, messageSubStr
does not change from its initial (undefined) value.
If manual = true
and a result
callback is implemented, the expected behavior is achieved.
Versions
vue: 3.2.33
vue-apollo: @vue/apollo-option@4.0.0-alpha.17
@apollo/client: 3.6.6
(Note that for the sandbox version of the app, graphql
17.0.0-alpha1
is used, due to issues running older versions in the sandbox. graphql
16.5.0
is used in the github version.
Additional context