Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
6XGate opened this issue May 29, 2020 · 5 comments
Closed

Comments

@6XGate
Copy link

6XGate commented May 29, 2020

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

@mwidmann
Copy link

Did you find a solution/workaround for this? I'm trying to refetch the query with a different value for one of the variables and I get this error. Same occurs using setVariables

@6XGate
Copy link
Author

6XGate commented Nov 7, 2020

@mwidmann, we have not checked to see if this is still an issue in later builds.

@mwidmann
Copy link

mwidmann commented Nov 9, 2020

@6XGate sadly it still applies to the current version of the library. I was wondering if you found a different approach to solve this you could maybe share?

@6XGate
Copy link
Author

6XGate commented Nov 16, 2020

Not at this time. We just don't try to alter the parameter values until this is fixed.

@toddpadwick
Copy link

Does anyone know another way to handle this? We're struggling to get quite a crucial element of our app to work due to this problem.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants