Skip to content

computed attribute not updating after query runs, when using manual: false #1368

Closed
@twelve17

Description

@twelve17

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

  1. Clone https://github.com/twelve17/avue
  2. run yarn install, then npm run serve
  3. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions