Can we prevent useInfiniteQuery { refetchOnMount: 'always' } from refetching all cached pages?

[prasannamestha]

Hello,

I ran into an interesting problem today which I couldn't really figure out a way to solve. So, dropping a question here.

I have a post feed rendered using useInfiniteQuery and I have set the option { refetchOnMount: 'always'} as I want this page to reload the feed when the user navigates into the feed page.

But the problem is that react-query refetches all the pages previously cached/loaded even before the user scrolls for more. As a result, if the user had loaded 20 pages of data previously, RQ would refetch all 20 pages on mount. Is there a way to prevent this behavior?

Would love to learn if any of you encountered this problem or have solved it as well.

Thank you,
Prasanna

[TkDodo]

if there are 20 pages in the cache, 20 pages will be refetched. why? because anything else could lead to duplicate and/or missing data. suppose one entry on page one was deleted in the meantime, and we refetch only page 1. That means the last entry on page 1 will be the same entry on page 2, unless we refetch that as well.

all imperative refetch methods let you provide a refetchPage option, so you could do this manually:

const queryClient = useQueryClient()
useEffect(() => {
  queryClient.refetchQueries(key, { refetchPage: (_, index) => index === 0 })
}, [queryClient])

but yeah, you'll run into the above mentioned problems.

---

alternatively, you can just remove all pages from the cache except the first page, when you unmount all observers. You would likely need to tie this to your component lifecycle, and you can remove it by calling setQueryData and then setting the data to only the first page.

but honestly, all this is not needed if you just let the refetches happen. What's the problem with those in the first place?

[prasannamestha]

I like the solution for setting the data to only the first page.

The problem with allowing refetches is that there could be 100 pages loaded and refetching all 100 pages might not be required by the user.

[chriszs]

Thanks for this. setQueryData in a useEffect almost works, but then unless I'm mistaken the stale time is reset and the query doesn't run. So I need setQueryData plus something to reset that.

Here's what I've got now:

  // reset the pagination to one page when the page is first rendered
  useEffect(() => {
    queryClient.setQueryData(['items', ...queryKey], (oldData) => ({
      pageParams: [1],
      pages: [oldData?.pages?.[0] ?? []],
    }));
    queryClient.invalidateQueries(['items', ...queryKey]);
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

# ...

  const {data, isStale, ...result} = useInfiniteQuery({
    queryKey: ['items', ...queryKey],
    queryFn,

# ...

But I think I'm seeing two fetches.

[TkDodo]

setQueryData takes an additional argument, where you can pass the updatedAt time of the entry. You can read the current one with queryClient.getQueryState(key), so that would allow for an update that doesn't affect the last updated timestamp

[chriszs]

Great. That's perfect. Thank you!

[FloareDor]

Great. That's perfect. Thank you!

Hey @chriszs can you share with us a code sample for the above change, please?

[Mostafa-Mohammadi]

have similar issue ...

I think this issue hurt the performance , Imagine you are fetching 100 pages ... and for next visit react query re-fetch all 100 pages at once :(

Is there any solution to prevent this behavior?

[TkDodo]

Anyways, jokes apart, I didn't understand your point about inconsistent data, provided there is a way to delete all pages except the first one from cache while refetching... refetch 1 or refetch 20, it should be consistent, no?

sure, you can always call setQueryData when the user leaves the page and delete all pages except the first one with that. That's a perfectly valid thing to do. Where things get dicy is if you say you don't do that, and the user comes back to 20 fetched pages in the cache, but you only want to re-fetch the first one. Then you have 19 pages that have not been refetched, and you can easily introduce inconsistencies, e.g. if an entry on page 1 has been deleted in the meantime, you'll have a duplicate on the screen.

I am also in the same situation where the user can scroll down to hundreds of items, then decide to exit the page, come back again in a minute and wants to see the latest... in this situation react query will trigger tens or possibly hundreds of apis calls which are not needed, IMO that's too much prefetching...

We've introduced a new setting called maxPages in v5, where we'll only ever keep that amount of pages in the cache. So if you set this to e.g. 5, we'll purge pages from the beginning when the 6th page gets loaded. You'd likely need to implemented bi-drectional infinite queries to make this feature work, because users need to be able to go back to the pages that have been deleted as well. You can read about this feature here: https://tanstack.com/query/v5/docs/react/guides/infinite-queries#what-if-i-want-to-limit-the-number-of-pages

[bruteforks]

I have the exact same issue. What would be the correct way to accomplish this in v4? Anyone have a workaround?

[pichkovskyiDanyil]

I am facing a similar issue as I am using nested routes (router modal). Simply cleaning and resetting the cache for the first page is not a viable solution for me since I need to maintain the current position for the user, who may navigate back.

[Mostafa-Mohammadi]

I stop this behavior just by cacheTime:0 on useInfiniteQuery config but in this way, the user loses the current position of the page and I think it's imperfect UX.

But the real problem is when I paginate 10 times, useInfiniteQuery just re-fetch page 1 several times :(,

what is the issue? should I pass my page counter as a query Key to notice the useInfiniteQuery about the pagination?

[TkDodo]

But the real problem is when I paginate 10 times, useInfiniteQuery just re-fetch page 1 several times :(,

sounds like you haven't implemented getNextPageParam correctly.

[haiyo]

such rookie mistake/decision by react query. Consistency > Performance. In real world everything focus on performance, how does it even make sense for RQ developer that prefetching 100+ pages is better than inconsistency is beyond me. API calls are always extremely expensive. Go to any big companies like Google or Amazon and tell them consistency better than performance they will boot you out of their doors lol.

[ahmed-khlifi]

Any clear solution to disable this behavior ? all things works good in the pagination , but this refetch by useInfiniteQuery causes a lot of unnecessary API calls
And even by setQueryData is not a good solution

[FloareDor]

• you can set a higher staleTime so that you don't get as many refetches

  • you can use the new maxPages option in v5 to limit the number of cached pages

  • you can manually use setQueryData to delete other pages

If your expectation is:

* I have 10 pages loaded in an infinite query cache

* I get a refetch

* BUT I only want to refetch the first page

then NO, this won't be possible. I've outlined countless examples where this will lead to inconsistencies (any insert or delete basically).

Also, if we did this, when would you ever get a refetch for page 2-10 ? Seems like "never", which can't be right either.

A lot of people are interested in doing this could be because a lot of apps do this, for example instagram does this exactly with posts and comments.

Infinite scroll + refetch and keep only first page

Inconsistencies do not matter here anyway, the app keeps getting new comments and posts.

And yes, we never refetch 2-x pages and it's alright to do so in this case, right?

Please correct me if I'm wrong.

also, right now there seems to be no way to fetch and keep only one page on refresh and also use staletime.

[TkDodo]

@FloareDor I'm trying to help here, but I don't understand your question. Please try to explain your use-case as plain as possible. For example:

• I have an infinite list of comments, showing 5 comments at a time.
• I scroll down 10 times, so now I have 50 comments displayed (10 pages with 5 comments each)
  • Now I add one comment at the end, and I want to refetch XXX page
  • OR now edit an existing comment and I want to refetch XXX page
  • OR now I get an automatic refetch and then ....
  • OR now I do XXX and want it to behave like YYY but it does ZZZ instead

Understanding what you are trying to achieve will help me help you.

[FloareDor]

@FloareDor I'm trying to help here, but I don't understand your question. Please try to explain your use-case as plain as possible. For example:

* I have an infinite list of comments, showing 5 comments at a time.

* I scroll down 10 times, so now I have 50 comments displayed (10 pages with 5 comments each)
  
  * Now I add one comment at the end, and I want to refetch XXX page
  * OR now edit an existing comment and I want to refetch XXX page
  * OR now I get an automatic refetch and then ....
  * OR now I do XXX and want it to behave like YYY but it does ZZZ instead

Understanding what you are trying to achieve will help me help you.

Hey @TkDodo,

Thank you so much for all the help, man.

Firstly, I know that we the users are not at all entitled to ask and get updates. You guys are doing this for free and it's open source, so, thank you for that.

My use case is pretty simple. Let's say I'm making the Instagram app,

if the user doom scrolls for an hour and is on page 50, then they pull to refresh, I just want to fetch and keep only the first page.
I do not want the app to make 50 API calls and I do not want to show stale/same data even after they pull to refresh.

The same example can be extrapolated to post comments.

[FloareDor]

Came here to say that I achieved it using the below code. Thank you for being so helpful on other discussion pages, @TkDodo .

    queryClient.setQueryData(['feed-posts'], (oldData: any) => {
      if (oldData) {
        console.log('Sliced pageParams:', oldData.pageParams.slice(0, 1), oldData.pages.length);
        return {
          pages: oldData.pages.slice(0, 1),
          pageParams: oldData.pageParams.slice(0, 1),
        };
      }
    });

    queryClient.invalidateQueries({ queryKey: ['feed-posts'] });
    ```

[TkDodo]

yes, this is the way. You need to manually set the size in the cache to 1. This is documented in the infinite query guide:

https://tanstack.com/query/latest/docs/framework/react/guides/infinite-queries#keep-only-the-first-page

[SoyDiego]

yes, that should work, unless existingData is undefined (which it can be, if there is no data in the cache for that key), so I'd guard against that:

queryClient.setQueryData(['simpsons'], existingData => {
  return existingData ? {
    pageParams: [existingData.pageParams[0]],
    pages: [existingData.pages[0]],
  } : undefined;
});

Great! thanks for your confirmation and your help! I really appreaciate!! :)

[SoyDiego]

yes, that should work, unless existingData is undefined (which it can be, if there is no data in the cache for that key), so I'd guard against that:

queryClient.setQueryData(['simpsons'], existingData => {
  return existingData ? {
    pageParams: [existingData.pageParams[0]],
    pages: [existingData.pages[0]],
  } : undefined;
});

Sorry for disturb you again. I tried now and is not working.
Always is showing two pages after clean cache.
Here in my example I'm showing pages with 20 elements (you can see the number in the top)
And When I click "Clean Cache", is showing 40. Is doing 2 calls again. How can I prevent this problem? :(

Here you have a GIF:

[TkDodo]

can you show a codesandbox reproduction please, it's impossible to look into a gif

[SoyDiego]

can you show a codesandbox reproduction please, it's impossible to look into a gif

I will try to replicate in codesandbox but i'm working with React Native.
But you can see in the top, the length of my characters. I have 80 or 120 showing doing scroll and then when I clicked the reset, is showing 40.
I will try to create a codesandbox now and I will share, thanks again!

[TkDodo]

but i'm working with React Native.

try https://snack.expo.dev/

[SoyDiego]

Hi again @TkDodo,
I realized works perfectly in WEB. I changed all very fast (with chatGPT) to try your example and yes, it's working in WEB.
Here your example in web: https://codesandbox.io/s/heuristic-nash-djtqr6?file=/src/App.js (works perfectly!)

Is not working in React Native. Here you can see my code until can create a Expo version: https://github.com/SoyDiego/react-query-infinit-scroll/blob/master/TheSimpsons.tsx

Thanks for your time

[SoyDiego]

I cannot remove that because that is the functionality to load more on scroll.
I removed and only show 20 always. I'm doing the expo version. I have some problems, sorry for the delay

[TkDodo]

I cannot remove that because that is the functionality to load more on scroll.

I'm well aware, I just want to narrow down the problem. I'm pretty sure that the setQueryData will reduce your cache to one page, and that you then get a second page into the cache because of another fetch. The most likely candidate is that onEndReached is triggered when you reduce your list to just one page.

[SoyDiego]

You are right. I created a new button and removed onEndReached={() => querySimpsons.fetchNextPage()} and now when I clean the cache works perfectly.
Do you have any possible solution for this problem?

Thanks again. I don't know why I have problems with expo, sorry! I continue trying

[TkDodo]

I guess you don't really want to have a button on your page that removes everything but the first page from the cache, so what's your use-case?

• if it's only keeping the first page when you navigate away from the page, you can do that when you navigate away. it shouldn't trigger onEndReached because the list won't be there.
• if it's always keeping the cached entries minimal, try maxPages in v5.

[Manouli]

const onEndReachedCalledDuringMomentum = useRef(true);
const shouldFetch = !isFetching && hasNextPage;
const onEndReachedHandler = () => {
    if (!onEndReachedCalledDuringMomentum.current && shouldFetch) {
      fetchNextPage();
      onEndReachedCalledDuringMomentum.current = true;
    }
  };

// then in your onEndReached

onEndReached={onEndReachedHandler}
onScroll={() => {
    onEndReachedCalledDuringMomentum.current = false;
 }}

I hope this helps

[SoyDiego]

I'm well aware, I just want to narrow down the problem. I'm pretty sure that the setQueryData will reduce your cache to one page, and that you then get a second page into the cache because of another fetch. The most likely candidate is that onEndReached is triggered when you reduce your list to just one page.

I guess you don't really want to have a button on your page that removes everything but the first page from the cache, so what's your use-case?

* if it's only keeping the first page when you navigate away from the page, you can do that when you navigate away. it shouldn't trigger `onEndReached` because the list won't be there.

* if it's always keeping the cached entries minimal, try `maxPages` in v5.

My use case is like this:

• I'm showing documents. Each page has 10 documents.
• For example, If I scrolled and I'm in the page 4 (40 docs loaded) and I go to my input search bar and I write the name of the document, is filtering perfectly. BUT If I clean my searchbar and I want to show the first 10 elements (call with no filter like on init), is showing 20 (2 calls).
  I hope be clear for you and thanks for your time

[TkDodo]

Is the value of the input search bar part of the query key?

[SoyDiego]

Hi, thanks again for continue helping.
Yes, it's part of the query key.

This is my searchbar:

            <Searchbar
                value={searchQuery}
                onChangeText={(description) => {
                    setSearchQuery(description);
                    handleSearchEvent(description);
                }}
                placeholder={t('SEARCH_DOCUMENTS')}
            />

This is my function in the searchbar with a debounce to shoot the call after 500 (but is not working, when I'm pressing keys is shooting calls by letter. Before move to react-query was working) but the filter, it's working good.

    const handleSearchEvent = (description: string): void => {
        if (timeoutId.current) {
            clearTimeout(timeoutId.current);
        }

        timeoutId.current = setTimeout(() => {
            queryGetDocuments
                .refetch({
                    searchQuery: description
                } as RefetchOptions & RefetchQueryFilters<unknown>)
                .catch((error) => {
                    console.log(error);
                });
        }, 500);
    };

And when I clean the input (cross icon) or deleting characters, is calling 2 times:

[SoyDiego]

I forgot, if it's better for you I can create a new issue and mention it to continue in a clean post and maybe helps to others users with the same problems. Let me know, and thanks again @TkDodo

[TkDodo]

if you can repro it, yes

[SoyDiego]

This is my repro with all the code https://snack.expo.dev/@zer0byte/ludicrous-pudding but I don't know how to solve this error that I have in EXPO. If you know, let me know please, and if we can visualize the repro I will create a new post with the info.

Thanks

[wpp-roman-gryndii]

@TkDodo I agree with the comments above

1. I have a chat app, where I load previous pages when scrolling to the top of chat.
2. Imagine I loaded 100 pages, then I am reloading the app > all 100 pages being fetched automatically
   I don't need 100 pages at once, only the first one

You definitely need to think about this

Currently I need to use custom hook with
useEffect( () => () => { queryClient.resetQueries({ queryKey: [ApiQueryKeys.QUERYNAME_INFINITE] }) }, [], )

[TkDodo]

You definitely need to think about this

We did think about this, which is why we included the maxPages option to limit how many pages you want to store in the cache.

Other than that, I don’t think it’s bad to reduce the number of pages imperatively like your custom hook shows.

[drminh2807]

maxPages wont help me

now I still need create custom hook

import {
  // eslint-disable-next-line no-restricted-imports
  useInfiniteQuery as _useInfiniteQuery,
  DefaultError,
  InfiniteData,
  QueryKey,
  UseInfiniteQueryOptions,
  useQueryClient,
} from '@tanstack/react-query';
import { useCallback, useEffect } from 'react';

export function useInfiniteQuery<
  TQueryFnData,
  TError = DefaultError,
  TData = InfiniteData<TQueryFnData>,
  TQueryKey extends QueryKey = QueryKey,
  TPageParam = unknown,
>(
  options: UseInfiniteQueryOptions<
    TQueryFnData,
    TError,
    TData,
    TQueryFnData,
    TQueryKey,
    TPageParam
  >,
) {
  const queryClient = useQueryClient();
  const { refetch: originRefetch, ...rest } = _useInfiniteQuery(options);
  const resetPages = useCallback(() => {
    queryClient.setQueryData<InfiniteData<unknown>>(options.queryKey, data => ({
      pages: data?.pages.slice(0, 1) ?? [],
      pageParams: data?.pageParams.slice(0, 1) ?? [],
    }));
  }, [queryClient, options.queryKey]);
  const refetch = useCallback(() => {
    resetPages();
    void originRefetch();
  }, [originRefetch, resetPages]);

  useEffect(() => {
    return () => {
      resetPages();
    };
  }, []);
  return { refetch, ...rest };
}

[zbarbuto]

Just FYI there's a lint rule that warns against using rest destructuring on query results.

Use object rest destructuring on query results automatically subscribes to every field of the query result, which may cause unnecessary re-renders.

Might be "better" to just overwrite refetch:

  const query = useInfiniteQuery(options);

  const originalRefetch = query.refetch;

  query.refetch = useCallback(() => {
    queryClient.setQueryData(queryKey, (oldData: any) => {
      if (!oldData) return oldData;
      return {
        ...oldData,
        pages: (oldData?.pages ?? []).slice(0, 1),
        pageParams: (oldData?.pageParams ?? []).slice(0, 1),
      };
    });

    return originalRefetch();
  }, [options.queryKey]);

  return query;