useInfiniteQuery with pull-to-refresh

[JeremyBradshaw7]

I'm in a react-native project using useInifiniteQuery which is working very nicely but I'm now adding pull-to-refresh functionality on the Flatlist:

  const {
    isFetching, isFetchingMore, fetchMore, canFetchMore, isLoading, data: pages
  } = useInfiniteQuery(
    ['getCourseLearnerList', { courseId: course.id }],
    getCourseLearnerList,
    {
      getFetchMore: (lastPageInfo) => {
        return lastPageInfo.page < lastPageInfo.lastPage ? lastPageInfo.page + 1 : false;
      },
      refetchOnMount: true,
      staleTime: refreshing ? 0 : 60000
    });

  const refresh = async () => {
    setRefreshing(true);
    await fetchMore(1); // start from page 1 again, but how do we tell it to clear what it's already buffered and start again?
    setRefreshing(false);
  };

        <FlatList
          keyExtractor={(person, index) => `person_${index}`}
          renderItem={({ item: p, index: i }) => renderLearner(p, i)}
          onRefresh={() => refresh()}
          refreshing={refreshing}
          onEndReached={() => {
            if (canFetchMore) {
              fetchMore();
            }
          }}
          onEndReachedThreshold={0.01}
          data={assignedLearners}
        />

It's querying the back-end for page 1 again but it's just appending this to the paged data that has already been fetched (whether that's just the first page or several pages). How do I force it to clear the buffered data and start again from page 1? I've tried setting the staleTime to 0 when I'm refreshing but no joy.

[Andrey-Bazhanov]

You should call refetch method

[xmflsct]

You should call refetch method

Right, I was confused when switching to v3 as well. Calling fetchPreviousPage when there is nothing newer multiple times will generate multiple empty arrays into data. Therefore I am now calling refetch when the first page is empty instead of fetchPreviousPage.

[ansh]

@TkDodo What do you think about this problem though? Right now I am using useInfiniteQuery to create a social media feed in my app (react-native). However, if the user pulls-to-refresh, by default the refetch method fetches every single "page" that was loaded. That takes really long and is not a great user experience.

[TkDodo]

you can pass refetchPage to refetch to customize which pages should be refeched:

refetch({ refetchPage: (lastPage, index, allPages) => boolean })

for example, to only refetch the first page:

refetch({
  refetchPage: (_, index) => index === 0,
})

[noumantahir]

I am also facing the same issue in react-native, apparently so far I could not find a way to remove all cached pages on refresh... there is remove() method but that also creates a glitch when new data is available....

Is there a way we could pass some argument to refetch indicating we want invalidate all pages but only fetch the first page.

Right now the refetchPage option works to fetch only first page, but it does not invalidate rest of the pages as required by pull down to refresh.

[TkDodo]

All pages are part of the same cache entry. You can only invalidate a complete cache entry, not individual pages...

[captainR0bbo]

Can you share more detail @JeremyBradshaw7 about how you got this to work with Flatlist? what do you assign to the Flatlist data when the hook returns an array of pages? I see assignedLearners but what is that?

Thanks!

[jonstuebe]

I solved this by reducing the data.pages into a single array of items and call it reducedData and pass that as that to the data prop on the FlatList. Hope that helps!

[xmflsct]

See https://github.com/tooot-app/app/blob/c4ec88609e12781da51fdab2cbd2c7dc1f808c7f/src/components/Timeline.tsx#L71-L73

[ansh]

Surely there is a better way to do this than reducing the data every time?

[TkDodo]

yes. flatMap.

[ansh]

Thanks!