When useQuery executeQuery always the same result

[Politanskyi]

After a successful request, I want to get more results using the function executeQuery, but even when changing the parameters, I always get the same result, it feels like it just won't accept the passed parameters!

const salesLimit = 10;
const page = ref(1);
const moreLoadingKey = ref(false);
const hasMorePages = ref(true);
const queryVariables = { limit: salesLimit, page: page.value };

const { data, fetching, error, executeQuery } = await useQuery({
    query: GET_SALES_PAGE,
    variables: queryVariables,
    requestPolicy: 'cache-and-network'
});

sales.value = data.value.sales.data;

const showMore = () => {
    page.value += 1;

    console.log(page.value)
    executeQuery({
        variables: { page: page.value },
        requestPolicy: 'network-only'
    })
};

[lewebsimple]

Check out the documentation for @urql/vue here, it states that Each of these inputs may also be reactive (e.g. a ref) and are allowed to change over time which will issue a new query.

So making your queryVariables reactive and changing its properties should re-trigger the query automatically (i.e. the result from the query is also reactive).