How to invalidate infinite query?

[kud]

I do something like this on a click:

  const [addWatch] = useMutation(
    () =>
      jsonApiClient.create({
        type: "watches",
        body: {
          data: {
            attributes: {},
            type: "watches",
            relationships: {
              object: {
                data: {
                  type: getPlural(type),
                  id,
                },
              },
            },
          },
        },
      }),
    {
      onMutate: () => {
        setLoading(true)
      },
      onSuccess: () => {
        queryCache.invalidateQueries("watches")
        queryCache.invalidateQueries(["bills", { watched: true }])
      },
      onSettled: () => {
        setLoading(false)
      },
    },
  )

  const [removeWatch] = useMutation(
    (data) =>
      jsonApiClient.delete({
        id: data.id,
        type: "watches",
      }),
    {
      onMutate: () => {
        setLoading(true)
      },
      onSuccess: () => {
        queryCache.invalidateQueries("watches")
        queryCache.invalidateQueries(["bills", { watched: true }])
      },
      onSettled: () => {
        setLoading(false)
      },
    },
  )

and in my list, I do this:

  const billWatchesQuery = useQuery(["watches", { type: "bills" }], () =>
    jsonApiClient.find({
      type: "watches",
      filters: {
        object: {
          type: "bills",
        },
      },
      pageSize: 9999,
    }),
  )

  const watchedBillsInfiniteQuery = useJsonApiInfiniteQuery(
    ["bills", { watched: true }],
    (key, params, cursor = 1) =>
      jsonApiClient.find({
        type: "bills",
        include: ["currentStep"],
        pageSize: 10,
        pageNumber: cursor,
        filters: {
          id: {
            in: billWatchesQuery.data?.result
              .map(
                (id) =>
                  billWatchesQuery.data.entities.watches[id].relationships
                    .object.data?.id,
              )
              .join(","),
          },
        },
      }),
    {
      enabled: billWatchesQuery?.data,
    },
  )

My query is correctly done, with the right collection of IDs. However, my list doesn't refresh well.

I do something like this:

      {filterWatchActive ? (
        watchedBillsInfiniteQuery.isLoading ? (
          <Spinner />
        ) : (
          watchedBillsInfiniteQuery.isSuccess && (
            <List infiniteQuery={watchedBillsInfiniteQuery} />
          )
        )
      ) : watchedBillsInfiniteQuery.isLoading ? (
        <Spinner />
      ) : (
        billsInfiniteQuery.isSuccess && (
          <List infiniteQuery={billsInfiniteQuery} />
        )
      )}

Both of my requets are refetched, but the data are quite frozen there: watchedBillsInfiniteQuery?.data

any idea?

[kud]

Additionnal info: when I unfocus/focus on the app, it works well, the fetching is done again and my data are correct.

And queryCache.clear() does the trick but it's not what I want for sure.

[cyrus-za]

+1 on this.

I cant seem to call refetch/invalidate as it only refetches the last page. I need to invalidate all pages

[taylorpreston]

+1 anybody figured it out yet? 😄

[TkDodo]

queryClient.invalidateQueries also works for infinite queries. Per default, it will refetch all pages, but we now also have a refetchPage option - a function called for every page where you can decide if you want to refetch it or not

[StampixSMO]

Thanks for the quick reply @TkDodo
I adjusted the CSB and don't succeed in replicating either, I've been spending some solid time on this. I hope to report back with my stupidity :)

[kastriotkastrati]

@TkDodo Looks like "hasNextPage" does not update when invalidateQuery kicks in, if I have custom useEffects that rely on "hasNextPage", the logic just doesn't work. Seems counter intuitive.

https://codesandbox.io/s/vigilant-feynman-v20urb?file=/pages/index.js

[TkDodo]

@kastriotkastrati I don't understand the issue with the sandbox. Can you provide step by step instructions on what I need to to do to see the problem? hasNextPage tells you if there are new pages or not. I don't really get what this has to do with query invalidation ...

[kastriotkastrati]

@TkDodo Hi, sorry for being unclear. If you scroll down, click on "go to another page", and then click "back" to trigger the invalidation, when this invalidation is triggered and the infinitequery re-runs, hasNextPage remains false for the entirety of the query process and does not change, i.e does not behave the same as on the initial run of the infiniteQuery. Although after further investigation, this seems to be expected behavior.

[TkDodo]

nope, still can't reproduce. I have removed the effect that automatically fetches the next page. otherwise, its hard to click the link:

https://codesandbox.io/s/confident-resonance-918z17?file=/pages/index.js

now you can scroll down - click on load newer (or not), navigate between the "other page" back and forth and hasNextPage remains consistently what it should be for me. There are 2 more pages (3 in total). So if you click the button twice, it should stay in hasNextPage: false. Otherwise, its hasNextPage: true

[sohamad]

is there a solution yet. For me if i invalidate the query only last page gets refetched and rendered. I want to fetch all of the pages

[TkDodo]

please show a codesandbox reproduction because that should work.

[sohamad]

await queryClient.invalidateQueries(querykey); this is what i am doing. when i compare query data before and after invalidate query. before it has all the data and after invalidate if i do queryclient.getquerydata it has only last page. Also could you please provide some code pointer of how we can pass refetchpage option to invalidate queries.

[TkDodo]

Again, show this behavior in a codesandbox please. Refetching all pages is the default behavior

[miladavarni]

@TkDodo refetching all the pages is definitely NOT the default behaviour and there's no (easy) way to get around it.
I have a basic infinite query and below to invalidate it
qc2.invalidateQueries({
queryKey: [QueryKey],
exact: false,
type: 'all',
});

It only invalidates the first page ( pageNum=0. )

[vipansh]

i tried this

 const { data, fetchNextPage, isFetchingNextPage, isLoading } =
    useInfiniteQuery(
      ["getAllCases"],
      async ({ pageParam = 1 }) => {
        const response = await getCases({ page: pageParam, size: 15 });
        return response.data;
      },
      {
        getNextPageParam: (lastPage, pages) => {
          if (lastPage.cases.length < 15) return;
          return pages.length + 1;
        },
      }
    );

and then when I am trying queryClient.invalidateQueries(["getAllCases"]);
it's not working .

[TkDodo]

i hope you realise that this isn't helpful. At least I can't help you with just that information that I have. If you want any help, please create a codesandbox reproduction.

otherwise, all I can say is:

• go to our docs, look at the infinite query example: https://tanstack.com/query/v4/docs/react/examples/react/load-more-infinite-scroll
• scroll to the bottom until you see "nothing more to load"
• click on projects in the devtools, then on invalidate
• the text Background Updating... appears
• note how all items now have a different server timestamp
• you can also look at the network browser tab to see all fetches being done

So, it IS working...

[usaszerelem]

Question: Where in the sandbox environment is queryClient.invalidateQueries() called? I do not see it anywhere. The problem that we are encountering is that after a item was updated, we think the right way of invalidating the cache is by calling queryClient.invalidateQueries(). This call does not invalidate the cache. Thank you in advance for addressing this question and hopefully showing how to invalidate the cache.

Important to note that the queryClient was obtained the correct way:

const queryClient = useQueryClient();

[usaszerelem]

I truly hope there is a better way to invalidate the query, but a temporary hack/workaround that works is to use a token number in the queryKey. Just increment this number each time there is a need to invalidate the cache. Yes, the old data stays in memory for a while, but this can be mitigated by setting the cacheTime and staleTime to 1 minute as an example, so that this is cleared.

in my case pass the following JSON object to the queryKey. Note the token to increment is 'invalidateCacheNum' that is kept in a useState().

export interface IProductsQuery { pageSize: number; sortByField?: string; filterByField?: string; filterValue?: string; invalidateCacheNum: number; }

Here is a simplified extract of I call the useInfiniteQuery function. Look at 'queryKey' that used to refresh the cache.

const reqHeader = {
    'x-auth-token': authToken,
 };
        
const getProducts = ({ pageParam = 1 }) =>
    axios
        .get<IProductsGetAllDto>('http://localhost:3000/api/products', {
            params: {
                pageNumber: pageParam,
                pageSize: query.pageSize,
                sortBy: query.sortByField,
                filterByField: query.filterByField ? query.filterByField : '',
                filterValue: query.filterValue ? query.filterValue : '',
            },
            headers: reqHeader
            })
            .then((res) => res.data);

        const ret = useInfiniteQuery<IProductsGetAllDto, Error>({
            queryKey: ['products', query],
            queryFn: getProducts,
            keepPreviousData: true,
            getNextPageParam: (lastPage, allPages) => {
                return lastPage._links.next === undefined ? undefined : allPages.length + 1;
            },
        });

[TkDodo]

Question: Where in the sandbox environment is queryClient.invalidateQueries() called? I do not see it anywhere.

My suggestion was to click the invalidate button in the query devtools

[usaszerelem]

Resolution to this identified shortcoming was filed: Programmatic invalidation of infinite query cache #5648

[PavelYatskevich]

Hello, @TkDodo I still have an issue with invalidating the infinity query.
Steps:

1. On the first page I fetch data using an infinity query and regular query(component with infinity query mounted).
2. On the second page I am doing mutation and invalidate both queries on successful mutation(component with infinity query unmounted).
3. Return back to the first page I see that the state isInvalidated = true for both, but the infinity query is not refetching while regular is refetching(component with infinity query mounted again).

While the component where I am using infinity query mounted, I can invalidate the data and it data will be refetched. As soon as I unmount this component and invalided data anywhere else and returned back I could see that state invalidated true, but the data is not refetching.

For regular queries works fine.

As workaround I use refetch method in case the query is Invalidted.

const queryClient = useQueryClient();

const isInvalidated = queryClient.getQueryState([query])?.isInvalidated;

useEffect(() => {
  if (isInvalidated) {
    refetch();
  }
}, [isInvalidated]);

My infinity query code

const useFetchOptions = ({ apiEndpoint, search, controller }: IUseFetchOptions): RowType => {
  const { errorHandler } = useHandleErrors();

  return useInfiniteQuery(
    [apiEndpoint],
    async ({ pageParam = 1 }) => {
      const { data: items, headers } = await axios.get(generateApiEndpointWithViewGetParam(apiEndpoint, 'dropdown'), {
        params: { size: SELECT_SIZE, ...(search && { search }), page: pageParam },
        signal: controller.signal,
      });

      return { ...items, headers };
    },
    {
      getNextPageParam: ...,
      onError: errorHandler,
      refetchOnWindowFocus: false,
      refetchOnMount: false,
    },
  );
};

[TkDodo]

why would you expect to see a refetch when you return to the page when you have explicitly set refetchOnMount to false ? This is literally the flag that would give you a refetch if a component mounts that uses a query that has stale data ...

This has nothing to do with "regular" queries or "infinite queries". They are 100% the same in this regard.

[PavelYatskevich]

Hello @TkDodo, thank you for your answer
I want to not refetch data on mount cause in my case I will reuse the same data in different places so I want to keep it cached until any mutation happened.

[TkDodo]

then set staleTime: Infinity. That's what it's for

[ArjobanSingh]

Hi @TkDodo

I’m encountering an issue with infinite query invalidations, and I’m a bit confused by the behavior.
I have an infinite query that fetches paginated data (e.g., a list of users). After the data is cached, a user performs an edit (via a mutation), and I call invalidateQueries to refetch all pages. This triggers the expected behavior of fetching all pages from page 1.

However, before those set of refetches completes(initiated by the invalidateQueries call), a second mutation occurs (another edit or change) that again calls invalidateQueries. Now, there are two sets of query invalidations happening at the same time:

1. The first invalidation, which has already started fetching pages but hasn’t completed.
2. The second invalidation, which starts fetching from page 1 again.
   As a result, my network tab shows multiple requests—one set of refetches that’s already progressed to page X, and another set that starts from page 1 again.

I expected that the second invalidateQueries would cancel the first set of refetches in progress (i.e., cancel any ongoing page fetches), but even after explicitly calling cancelQueries before the second invalidate, it doesn’t stop the page fetches, initiated by the previous invalidation.

const invalidate = () => {
    queryClient.cancelQueries({ queryKey: ['infinite'] });
    queryClient.invalidateQueries( { queryKey: ['infinite'] });
};

This issue could become worse if multiple mutations occur in quick succession, each invalidating the query. Multiple sets of queries would start refetching the same pages (e.g., one at page 10, another at page 8, and so on), and they would all continue fetching until all pages are invalidated.

[TkDodo]

I expected that the second invalidateQueries would cancel the first set of refetches in progress

yes, that’s what it should do. It doesn’t do that ? Can you show a reproduction please, this could be an issue.

[ArjobanSingh]

Hi @TkDodo,
Thanks for the reply. Yes it isn't cancelling the previous set of refetches when I again call the invalidateQueries. Please refer this Stackblitz demo for V4.
Stackblitz demo for V5

Steps to reproduce.

1. First, wait for the initial fetch of all pages to complete.
2. Please click the Invalidate button to start invalidating queries for the infinite list. Before it finishes fetching all pages, click the Invalidate button again.
3. Check the console: You'll see logs every time the dummy fetcher runs. It will show pages for two sets of queries. The initial refetch query prints 10, 11 based on when you clicked the invalidate button again. The next set of queries starts printing 1, 2, 3, and so on until both sets complete refetching of all the pages.
4. Background refetches (triggered by invalidate query) don't stop even if the component is unmounted. You can test this by unmounting the component with the toggle button.
5. A small trick makes this work as expected: by destructuring the signal property in queryFn. Even if you don’t use signal itself, simply destructuring it makes everything work correctly—cancelling the first set of queries whenever a new invalidateQueries is called. Maybe because how signal property is defined here Github Ref. The event listener for the abort controller only attaches if the property getter is called (by accessing or destructuring it).

[ArjobanSingh]

Hi @TkDodo ,

I was wondering if you had a chance to review the previous issue I shared. Is that behavior intended? I also have another small question regarding InfiniteQuery. It would be great if you can help me with the following.

When an infinite query is invalidated, all cached pages refetch(considering infinite query is active) sequentially from the first to the last, as expected. However, the latest data isn’t available until every page has finished refetching, which creates a delay in displaying updated information.

In my case, I have components with over 100 pages, and due to requirements, I can't reduce this. As a result, after invalidating the query, users must wait for all pages to refetch before seeing the latest data. Is there any way to make each page's data available as it’s fetched, even during invalidation? I understand there may be consistency risks, but instant updates would really improve the user experience in my use case. Alternatively, is there another approach you might recommend?

Thanks in advance.

[TkDodo]

yeah no this is definitely a bug. when a query gets canceled, we reject the queryFn with a CanceledError:

query/packages/query-core/src/retryer.ts

Lines 82 to 88 in 18953be

	const cancel = (cancelOptions?: CancelOptions): void => {
	if (!isResolved) {
	reject(new CancelledError(cancelOptions))
	config.abort?.()
	}
	}

I think this still happens, but for infinite queries, we have a separate fetchFn that refetches in a loop and it doesn’t know about that. Please file an issue, but I don’t have the bandwidth right now to look into it more.

[TkDodo]

Is there any way to make each page's data available as it’s fetched, even during invalidation?

No, there’s no way to do that, sorry. An infinite query commits “as a whole”.