Skip to content

Using refetch with new variables on SmartQuery causes reactive refresh to break #991

@6XGate

Description

@6XGate

Describe the bug
If you create a reactive SmartQuery in a component, using refetch on that query will cause subsequent updates to break that query.

To Reproduce

  1. Create a Vue component with a reactive query, with function for vaiables, or function for the entire query and a refresh function that uses refetch with an extra variables: For example:
    props: {
        extraVariables: [ type: Object, default: undefined ],
    },
    apollo: {
           items: function () {
            return {
                query:      options. query,
                variables:    () => this.computedVariables,
                update:       options.update,
            };
        },
    },
    data: function() {
        return {
            range: new DateRange("2019-01-01", "2020-01-01"),
        };
    },
    computed: {
        computedVariables() {
            return this.extraVariables ?
                { ...this.extraVariables, start: this.range.start, end: this.range.end } :
                { start: this.range.start, end: this.range.end };
       },
    },
    methods: {
        refresh() {
            // Tell the server to invalidate any cached results and requery and recalculate.
            this.$apollo.queries.items.refetch({ ...this.computedVariables, refresh: true }));
        },
    },
  2. Click any button that has refresh attached.
  3. Change any value that is returned from computedVariables to trigger a reaction, like changing a date range in a date picker; the console will produce the following error:
    [Vue warn]: Error in getter for watcher "function () {
           return _this2.options.variables.call(_this2.vm);
         }": "TypeError: _this2.options.variables.call is not a function"
    

Expected behavior
The changes to the reactive variables should trigger a call to the query with the new computed values, likely not including anything passed to refetch, and not error.

Versions
vue: 2.6.11
vue-apollo: 3.0.3
apollo-client: 2.6.10

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions