updateQuery is ignored when page variable is reactive

[terion-name]

Given a component:

import getProducts from '~/graphql/getProducts'
export default {
    props: ['category'],
    data() {
        return {
            products: [],
            page: 1,
            showMoreEnabled: true
        }
    },
    apollo: {
        products: {
            query: getProducts,
            variables() { return { locale: this.$i18n.locale, category: this.category, page: this.page } } // <<<<<-------- important
        }
    },
    watch: {
        products(v) {
            console.log('products updated', v)
        }
    },
    methods: {
        loadMore() {
            this.page++;
            this.$apollo.queries.products.fetchMore({
                variables: {
                    page: this.page
                },
                updateQuery: (previousResult, { fetchMoreResult }) => {
                    console.log(previousResult)
                    const newProducts = fetchMoreResult.products
                    console.log(newProducts)
                    this.showMoreEnabled = newProducts.length > 0
                    console.log([...previousResult.products, ...newProducts])
                   return {products: [...previousResult.products, newProducts]}
                },
            })
        }
    }
}

In this configuration if I run loadMore(), the updateQuery callback is triggered, I see in console output everything fine, BUT the callback result is ignored and products prop is filled with next page content only, not with merged results.

If I change the apollo prop to this (removing this.page):

  apollo: {
        products: {
            query: getProducts,
            variables() { return { locale: this.$i18n.locale, category: this.category, page: 1 } } // <<<<<-------- important
        }
    }

Then everything works fine.

I understand that this is a conflict between reactive behaviour and manual resolution, but manual resolution, if present, should have higher priority, IMO

Versions:

    "@apollo/client": "^3.5.4",
    "@vue/apollo-components": "4.0.0-alpha.15",
    "@vue/apollo-composable": "4.0.0-alpha.15",
    "@vue/apollo-option": "4.0.0-alpha.15",
    "@vue/apollo-ssr": "4.0.0-alpha.15",

[Akryum]

Using page in your reactive variables will re-fetch and update the whole query with the new page value. The correct way is only putting the initial page value in the query variables. See the docs.

You can further optimize the cache with keyArgs in your type policies so that coming back to this component will render everything already loaded (even beyond the 1st page):

keyArgs: ['locale', 'category'] // exclude the page from the cache key

[terion-name]

I wanted to reply that it is counter-intuitive and seem wrong that updateQuery is not respected in this scenario, but realised that these are entirely different pipelines and it is just not possible to use them simultaniously. Sorry, didn't think enough. But maybe this should be highlighted in docs more specific, that one should use one or another approach and that reactive page will break fetchMore