-
-
Notifications
You must be signed in to change notification settings - Fork 522
Closed
Labels
Description
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
- 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 })); }, },
- Click any button that has refresh attached.
- 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
toddpadwick, P4sca1 and Ashu-r