无限滚动场景下如何更新Query Cache？嵌套数据处理方案咨询

一、更简便的缓存更新方式 #

1. 精准定位分页缓存更新 #

如果你的无限滚动基于带分页参数的queryKey（比如['all_holiday_tab', { page: 1 }]），可以直接用setQueryData指定完整queryKey，精准修改目标分页的缓存，无需遍历所有数据：

// 示例：更新第2页的缓存数据
queryClient.setQueryData<TAllCacheHolidayData>(
  ['all_holiday_tab', { page: 2 }],
  (oldData) => {
    if (!oldData) return oldData;
    // 这里直接修改当前页数据，比如替换指定条目
    return {
      ...oldData,
      list: oldData.list.map(item => 
        item.id === updatedItem.id ? updatedItem : item
      )
    };
  }
);

2. 触发缓存重新验证 #

如果数据更新后需要确保缓存完全同步，可调用invalidateQueries让React Query自动重新获取对应key的缓存，无需手动处理结构：

queryClient.invalidateQueries({ queryKey: ['all_holiday_tab'] });

该方案适合重新获取数据成本低、对一致性要求高的场景。

二、多层嵌套数组的缓存处理方案 #

若必须通过getQueriesData获取全量缓存，可通过扁平化数组简化遍历逻辑：

1. 扁平化缓存结构 #

getQueriesData返回的是[QueryKey, TData][]格式的数组，先提取有效数据并扁平化：

const prevData = queryClient.getQueriesData<TAllCacheHolidayData>({
  queryKey: ['all_holiday_tab']
});

// 提取所有分页的列表数据并扁平化
const flattenedData = prevData
  .map(([_, data]) => data?.list) // 取出每个分页的列表部分
  .filter(Boolean) // 过滤空数据
  .flat(); // 扁平化嵌套数组

2. 修改后批量更新缓存 #

处理完数据后，遍历原缓存条目逐一更新对应分页：

// 假设已得到修改后的完整数据列表updatedFullList
prevData.forEach(([queryKey, oldData]) => {
  if (!oldData) return;
  // 根据分页参数截取对应数据段
  const pageStart = oldData.page * oldData.pageSize;
  const pageEnd = pageStart + oldData.pageSize;
  const updatedPageData = updatedFullList.slice(pageStart, pageEnd);
  
  queryClient.setQueryData(queryKey, {
    ...oldData,
    list: updatedPageData
  });
});

3. 单条数据的定向更新 #

若仅需修改某一条数据，可直接遍历缓存条目找到目标分页并更新：

const targetId = 'target_holiday_id';
const updatedItem = { id: targetId, /* 其他更新字段 */ };

prevData.forEach(([queryKey, oldData]) => {
  if (!oldData) return;
  const hasTarget = oldData.list.some(item => item.id === targetId);
  if (hasTarget) {
    queryClient.setQueryData(queryKey, {
      ...oldData,
      list: oldData.list.map(item => 
        item.id === targetId ? updatedItem : item
      )
    });
  }
});

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