Vue-apollo: queries refetch() with variables causing JS error

Created on 27 Jul 2018 · 5Comments · Source: vuejs/vue-apollo

Hi,

We are creating a pagination system that performs a refetch and passes variables along with the fetch. The GraphQL request works great but an error is thrown before anything can be done.

Our code -

````
apollo: {
getOrders: {
manual: true,
query: QUERY_GET_ORDERS,
variables () { return { per_page: this.per_page, page: this.page } },

            result ({ data, loading }) {

                // when loading is done, do this...
                if(!loading) {
                    console.log(data);
                    this.data[this.page] = data.Order_Orders.data;
                }

                // set our total count & total pages
                this.totalCount = data.Order_Orders.total;
                this.total_pages = Math.round(this.totalCount / this.per_page);
            }
        }
    },

    methods: {

        onPageChange(page) {

            // change our page
            this.page = page;

            // check if we already have this page loaded?
            if(this.data.hasOwnProperty(this.page)) return;

            // refetch our orders with new page
            // ToDo: look into refetch error, bug?
            this.$apollo.queries.getOrders.refetch({ page: this.page });
        },

````

So when onPageChange() is triggered, it should refetch our getOrders with a new page number, and it does... However, we then get the following error -

````
return _this.options.variables.call(_this.vm);
}": "TypeError: _this.options.variables.call is not a function"

found in

---> at resources/assets/js/components/_Pages/ManageOrders/Index.vue
at resources/assets/js/components/IndexPage.vue

````

TypeError: _this.options.variables.call is not a function at VueComponent._watchers.push.vm.$watch.immediate (_postlude:4) at Watcher.get (_postlude:4) at Watcher.run (_postlude:4) at flushSchedulerQueue (_postlude:4) at Array.<anonymous> (_postlude:4) at MessagePort.flushCallbacks (_postlude:4)

Is this a bug in the plugin or something that we have done? At the minute I'm leaning towards a bug as this doesn't seem right? Then again the refetch() method isn't well documented.

Thanks!

Source

chrispage1

Most helpful comment

Hey @chrispage1 , would you mind sharing a bit of your solution?
It looks we're running into the same issue while using vuetifys data-tables.

This is our query:

apollo: {
    apples: {
      query: applesQuery,
      variables() {
        const {
          page,
          rowsPerPage,
        } = this.pagination

        return {
          perPage: rowsPerPage,
          page,
        }
      },
      update({ apples }) {
        return apples
      },
    },
  },

The data-table gets apples.items and the total is handed in via a computed like this:

totalItems() {
  return this.apples.total
},

Still getting a somewhat similar error:

[Vue warn]: Error in callback for watcher "function () {
  return _this.options.variables.call(_this.vm);
}": "TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object>"

Not sure if this is related to your described issue though.

escapedcat on 23 Oct 2018

👍2

All 5 comments

Can't say much about that error, however it looks to me you are complicating things unnecessarily. You probably have your reasons, but apollo is already providing powerful mechanism for paging and vue-apollo brings reactivity into your queries by default.

It looks like you are trying to avoid apollo cache, but a lot of things from the code you are doing are already done by apollo/vue-apollo behind the scenes.

E.g. your getOrders query has reactive variables option (since it is a function), if variables are changed the query is automatically re-fetched, so once you change the page you don't need to refetch it manually (currently there might be 2 same requests on page change, if there is no deduplication).

Another thing is that once you have the getOrders result it would be much cleaner if you define computed props to derive any additional data out of it, so you don't need to handle the query manually in result callback.

jpikora on 26 Aug 2018

❤1

@jpikora thank you for your feedback. I have been able to refactor and tidy up my orders page massively based on your feedback. Appreciate that and will mark this issue as closed as its overcome my issue through refactoring. Would still say there is an issue with refetch when passing variables though!

chrispage1 on 29 Aug 2018