React Query中useInfiniteQuery如何正确重新获取数据？

我通过useInfiniteQuery实现了条目列表的分页功能，现在有个场景：编辑条目信息后，需要重新获取列表以拿到更新后的条目数据。

在第一页时用refetchPage()能正常生效，但滚动到第二页（当前最后一页）并更新条目后，尝试的两种方法都存在问题：

问题1：使用queryClient.refetchQueries #

await queryClient.refetchQueries(['getUsualOrders'], {
  stale: true,
});

重新获取的当前页数据会直接替换之前存储的页面数据。

问题2：使用refetch() #

refetchUsualOrderList({
  refetchPage: (page, index) => {
    return index === 0;
  },
});

当前页数据被替换，且结果里不包含更新后的条目，还会额外发送一个针对不存在的下一页的请求。

请问如何在重新获取数据的同时保留原有数据？

Hook代码 #

export const useUsualOrders = ({lang, pageNumber = 1, token}) => {
  return useInfiniteQuery(
    ['getUsualOrders'],
    () => getUsualOrders({lang, pageNumber, token}),
    {
      getNextPageParam: lastPage => {
        if (lastPage.next !== null) {
          return lastPage.next;
        }
        return undefined;
      },
    },
  );
};

UI组件代码 #

const [currentPageNumber, setCurrentPageNumber] = useState(1);

const {
  data: usualOrdersList,
  hasNextPage,
  fetchNextPage,
  isFetchingNextPage,
  refetch: refetchUsualOrderList,
} = useUsualOrders({
  lang,
  token: currentUserInfo?.token,
  pageNumber: currentPageNumber,
});

const loadMore = () => {
  if (hasNextPage) {
    setCurrentPageNumber(prev => prev + 1);
    fetchNextPage();
  }
};

const onRefetch = ()=>{
  refetchUsualOrderList({
    refetchPage: (page, index) => {
      return index === 0;
    },
  });
}

<FlatList
  showsVerticalScrollIndicator={false}
  data={usualOrdersList.pages.map(page => page.results).flat()}
  renderItem={renderModelItems}
  keyExtractor={item => item.id}
  onEndReached={loadMore}
  onEndReachedThreshold={0.3}
  // refreshControl={
  //   <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
  // }
  style={{
    backgroundColor: secondary_bg_color,
  }}
  contentContainerStyle={[
    styles.modelList,
    {
      backgroundColor: secondary_bg_color,
      paddingHorizontal: PADDING_HORIZONTAL.SMALL,
    },
  ]}
  ListFooterComponent={
    isFetchingNextPage ? (
      <ActivityIndicator color={buttonBgColor} />
    ) : null
  }
/>

接口响应结构 #

响应体包含以下字段：

• count：总条目数
• next：下一页页码（无下一页时为null）
• previous：上一页页码（无上一页时为null）
• results：当前页的条目列表数组

内容的提问来源于stack exchange，提问作者Oliver D