如何预初始化Tanstack Query缓存数据？解决Hook未读初始缓存问题

问题核心是缓存的queryKey不匹配：你初始化缓存时用的queryKey是[key]，但自定义Hook里useQuery用的是[key, null]，TanStack Query会把这两个视为完全不同的缓存条目，所以Hook找不到已初始化的数据。

需要做以下修改：

1. 修正初始化缓存的queryKey #

把初始化代码里queryClient.setQueryData的queryKey改成和Hook一致的[key, null]：

const baked = { routing: [1, 2, 3] }
// Init Cache with baked data
Object.entries(baked).forEach(([key, value]) => {
  // 关键：使用和Hook相同的queryKey [key, null]
  queryClient.setQueryData([key, null], (v) => v ?? value);
  Persist.setItem("routing", [1, 2, 3])
});

2. （可选）优化Hook的queryKey定义 #

为了避免后续再出现类似的queryKey不匹配问题，可在Hook里统一定义queryKey：

const queryFn = ({ queryKey: [key, token] }) =>
  Persist.getItem(key, token) ?? null;

export const usePersistReadOnly = (key) => {
  const token = null;
  // 统一定义queryKey，避免分散出错
  const queryKey = [key, token];
  const queryResult = useQuery({
    queryKey,
    queryFn,
  });

  return queryResult.data;
};

修改完成后，Hook就能正确匹配到初始化的缓存数据了。

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