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