Invalidating an `useInfiniteQuery` is broken

[SacDeNoeuds]

TL;DR

Instead of resetting to the state to the initial page and refetch, it continues to accumulate data.

Demo

I based the example from the doc and mocked a list. Page size is 20.
When I click on the invalidate button, the next page is loaded and I end up with 40 items.

<script setup>
import { useInfiniteQuery, useQueryCache } from '@pinia/colada';

const list = Array.from({ length: 50 }, (_, i) => `item ${i + 1}`);
const pageSize = 20;

const cache = useQueryCache();
const invalidateQuery = () => cache.invalidateQueries({ key: ['some', 'list'] });

const query = useInfiniteQuery({
	key: () => ['some', 'list'],
	initialPage: { list: [], nextPage: 0 },
	query: async ({ nextPage }) => {
		const start = nextPage * pageSize;
		const end = start + pageSize;
		return list.slice(start, end);
	},
	merge: (currentState, nextList) => ({
		list: currentState.list.concat(nextList),
		nextPage: currentState.nextPage + 1,
	}),
});
const { data } = query;
</script>

<template>
	<div>
		<h1>Issue demo</h1>
		<button type="button" @click="invalidateQuery">Invalidate Query</button>
		<div v-for="item in data.list">
			<div>{{ item }}</div>
		</div>
	</div>
</template>

[akfakf0509]

I’m experiencing the same issue, so I’m currently implementing the useInfiniteQuery behavior manually using useQuery as shown below.

export const useList = defineQuery(() => {
  let isLoadMore = false;
  const queryCache = useQueryCache();
  const query = useQuery({
    key: () => ["list"],
    staleTime: Infinity,
    query: async ({ signal: _ }) => {
      const prev = isLoadMore
        ? queryCache.getQueryData<Array<unknown>>(["list"])
        : undefined;
      isLoadMore = false;
      const list = await Promise.resolve([]); // fetch some list
      return (prev ?? []).concat(list);
    },
  });

  function loadMore() {
    isLoadMore = true;
    return query.refetch();
  }

  return {
    ...query,
    loadMore,
  };
});

It feels like the structure is oriented toward initialization, so it seems natural for the query property to perform initialization by default. What do you think about using an additional load flag as a way to address the invalidation issue? @posva