react-query prefetchQuery结合getServerSideProps失效问题求助

云原生阿岚

2026-7-25

问题原因

你的useGetUser钩子使用的queryKey是固定的['useGetUser']，未将用户id纳入其中；同时getServerSideProps预取数据时也使用了相同的固定queryKey。这会引发两个核心问题：

不同id的用户查询会共用同一个缓存key，导致数据被覆盖；
React Query无法匹配预取缓存与客户端查询——客户端查询虽key相同，但queryFn依赖的id是动态值，React Query会判定为不同查询，最终不会读取脱水后的缓存，造成dehydratedState.queries为空。

解决方案

1. 修改自定义钩子的queryKey，加入id参数

更新useGetUser，将id作为queryKey的一部分，确保每个用户的查询拥有唯一标识：

export const useGetUser = (id: number) => {
  return useQuery<User, Error>(
    ['useGetUser', id], // 新增id到queryKey中
    () => Api.getUser(id),
    {
      retry: false,
      refetchOnWindowFocus: false,
      enabled: !!id,
    },
  );
};

2. 同步修改预取数据的queryKey

在getServerSideProps中，预取时使用包含id的queryKey，保证与客户端钩子的queryKey完全一致：

export const getServerSideProps: GetServerSideProps = async ({ query }) => {
  const { id } = query;
  // 校验id有效性，避免转换为NaN
  const userId = Number(id);
  if (isNaN(userId)) {
    return { notFound: true };
  }
  
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery(['useGetUser', userId], () =>
    Api.getUser(userId),
  );
  return {
    props: {
      dehydratedState: dehydrate(queryClient),
      id: userId,
    },
  };
};