为何json-server获取目标数据项时始终返回集合首项？

问题现象 #

启动json-server作为数据接口，使用React Query获取数据时，无论请求哪个集合的具体数据项，返回的始终是该集合的第一个元素。

问题根源 #

问题出在React Query的缓存键（queryKey）设置错误。你的useFetchUsersData钩子中，固定使用"user"作为所有请求的queryKey——这个键是React Query区分不同请求缓存的唯一标识。当第一次请求某个endpoint后，后续切换其他endpoint时，React Query会直接返回之前缓存的第一个请求结果，不会重新发起新请求获取对应数据。

解决方案 #

将queryKey设置为包含endpoint的动态数组，让每个不同的endpoint拥有独立的缓存条目，确保React Query能正确区分不同请求并返回对应数据。

修改后的代码 #

1. 更新useFetchUsersData钩子实现

import { useQuery } from "react-query";
import axios from "axios";

const url = "http://localhost:4000";

const fetchData = (endpoint) => {
  return axios.get(`${url}/${endpoint}`);
};

export const useFetchUsersData = ({
  endpoint,
  enabled,
  onSuccess,
  onError,
}) => {
  // 用endpoint作为queryKey的一部分，保证每个请求缓存唯一
  return useQuery([endpoint], () => fetchData(endpoint), {
    enabled,
    onSuccess,
    onError,
    refetchOnWindowFocus: true,
    refetchIntervalInBackground: true,
  });
};

2. 使用钩子的代码（无需改动）

const onError = (error) => {
  console.log("Error:", error);
};
const enabled = true;
const endpoint = "totalStreamsData";
const { data } = useFetchUsersData({ endpoint, enabled, onError });

验证方式 #

• 打开浏览器开发者工具的Network标签，切换不同endpoint时，确认是否发起了对应路径的新GET请求（如http://localhost:4000/growthData）
• 若安装了React Query DevTools，可查看每个endpoint对应的独立缓存条目，确认缓存是否正确隔离

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