I'm developing an application that has a feed of posts. I use useInfiniteQuery Hook for getting data and FlashList for show data. It's works, but I have a problem refresh the data.
I want onRefresh make refresh the data, FlashList reset and show only first page posts (like when you first launch the screen). But now onRefresh updates the data of ALL loaded posts. How can I reset the FlashList and get only new data?
const { isLoading, data, hasNextPage, fetchNextPage, isFetchingNextPage, refetch } = useInfiniteQuery(
['data', firstPostId],
({ pageParam = 1 }) => myApi.fetchPostsLatest({pageParam, firstPostId}),
{
getNextPageParam: lastPage => {
if (lastPage.next_page_url !== null) {
try{
return lastPage.next_page_url.slice(lastPage.next_page_url.indexOf('=') + 1);
}
catch(e) {
return lastPage;
}
}
return lastPage;
}
}
);
FlashList:
<FlashList
data={data.pages.map(page => page.data).flat()}
extraData={count}
keyExtractor={postItemExtractorKey}
renderItem={renderData}
initialNumToRender={10}
onEndReached={loadMore}
onEndReachedThreshold={0.3}
ListFooterComponent={isFetchingNextPage ? renderSpinner : null}
refreshing={refresh}
onRefresh={onRefresh}
estimatedItemSize={400}
/>
onRefresh event handler:
const onRefresh = async () => {
setRefresh(true);
firstPostId = 0; // I use it to freeze pagination. It fixes post twices when loadMore, if a new post has been added. I'm resetting this for refreshing.
await refetch();
count++ // i use it to change extraData
setRefresh(false)
}