Issue with Invalidating Infinite Queries on Different Screens

[RDR96]

Describe the bug

Hello, I'm using the library to implement pagination and invalidate data when making changes. This works well only if the changes I make and the useInfiniteQuery hook are on the same screen. However, if another query using useInfiniteQuery with the same queryKey is on a different screen (which I was on a few seconds ago and made the useInfiniteQuery call), and I invalidate the cache, the cache on the previous screen doesn't get updated. In fact, when using the library's dev tools, I can see that it's in an inactive state and doesn't fetch all the pages after invalidation.

Project Structure:

Views:

• overview.ts
  Here, I use useInfiniteQuery with a cache key of [CacheTagsEnum.Users, "all"]. If I go back to this screen, the cache is not updated.

• userList.ts
  Here, I use useInfiniteQuery with a cache key of [CacheTagsEnum.Users, "active"]. I invalidate the cache here using [CacheTagsEnum.Users], and here the cache is invalidated, and I see the updated data in the table.
  I can see that the useInfiniteQuery on the overview screen is inactive, and therefore, I believe it's not possible to invalidate it as it has lost focus.

Is it possible to update the cache of a query even if it's not on the currently active screen?

Your minimal, reproducible example

No reproducible demo

Steps to reproduce

// overview.ts
 const {
    fetchNextPage,
    isSuccess,
    isFetching,
    isInitialLoading,
    data,
    refetch,

    isLoading,
  } = useInfiniteQuery<UserResultData[]>(
    [CacheTagsEnum.User, "all"],

    async ({ pageParam }) => {
    
      const currentPageData = (
        await userService.getUsers({
          ...params, // Different params
          skip: pageParam ?? 0,
          take: USERS_TAKE_PARAMETER,
        })
      ).data.result;
      done.current = !ArrayHelper.hasItems(currentPageData);

      return currentPageData;
    },
    {

      getNextPageParam: (page) => {
        return userListOffset * USERS_TAKE_PARAMETER;
      },
    }
  );
  

Then on userList.ts

  const {
    fetchNextPage,
    isSuccess,
    isFetching,
    isInitialLoading,
    data,
    refetch,

    isLoading,
  } = useInfiniteQuery<UserResultData[]>(
    [CacheTagsEnum.User, "active"],

    async ({ pageParam }) => {
    
      const currentPageData = (
        await userService.getUsers({
          ...params, // Different params
          skip: pageParam ?? 0,
          take: USERS_TAKE_PARAMETER,
        })
      ).data.result;
      done.current = !ArrayHelper.hasItems(currentPageData);

      return currentPageData;
    },
    {

      getNextPageParam: (page) => {
        return userListOffset * USERS_TAKE_PARAMETER;
      },
    }
  );
  
 //  and inside the screen I'm invalidating the endpoint using:
  await queryClient.invalidateQueries({queryKey: [CacheTagsEnum.Users]});

Expected behavior

It should invalidate both endpoints, even when one of the screens is not in focus, but shortly before it was.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• "react": "^17.0.2"
• "next": "^12.3.0"
• "@tanstack/react-query": "^4.36.1"
• "@tanstack/react-query-devtools": "^4.36.1"

Tanstack Query adapter

react-query

TanStack Query version

^4.36.1

TypeScript version

^4.8.4

Additional context

No response

[TkDodo]

invalidation does two things:

• it refetches active queries
• it marks inactive queries as "invalid", so that they will be refetched on the next "trigger".

so if you go back to the overview page, and that page mounts, there should be a refetch unless you've changed the default of the refetchOnMount flag.

if you want an immediate refetch of all matching queries, even the inactive ones, use queryClient.refetchQueries.

[aldoBangun]

i asked chatGPT for this issue but the solution they gave does not working until i found this comment. This solve my issue, thanks @TkDodo