queries refetch() with variables causing JS error

[chrispage1]

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 -

[Vue warn]: Error in getter for watcher "function () {
          return _this.options.variables.call(_this.vm);
        }": "TypeError: _this.options.variables.call is not a function"

found in

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

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!

[jpikora]

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.

[chrispage1]

@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!

[escapedcat]

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.

[NicoAiko]

@escapedcat I get that error too.

[escapedcat]

@NicoAiko I think we're on the wrong issue here :)
Have a look at the current issues:

• Client 2.4.3 errors out when executing a query with a hot cache apollographql/apollo-client#4034
• An error occurs when you do multiple queries and in subsequent queries use the value from the first query. apollographql/apollo-client#4040

Sorry for reusing this @chrispage1