React-query查询延迟问题：切换索引后无法获取最新orderBy值

问题出在React Query的查询键（query key）未包含请求依赖参数，以及useEffect的依赖配置不合理：

1. 原useQuery的key是固定字符串"memes"，React Query无法感知orderBy、order等参数的变化，因此不会自动发起新请求。
2. useEffect仅监听getMemes，切换标签页（index变化）时更新orderBy后，无法触发查询刷新。

具体修复步骤 #

1. 给useQuery添加包含所有依赖的查询键 #

将orderBy、order、templateId、tagId、page、limit这些影响请求结果的参数全部加入query key数组。这样当任何一个参数变化时，React Query会认为是新的查询，自动重新发起请求：

const {
  isLoading: getMemesLoading,
  data: getMemes,
  refetch: getMemesRefetch,
} = useQuery(
  // 将所有请求依赖作为query key的一部分
  ["memes", orderBy, order, templateId, tagId, page, limit],
  () => {
    return queryService.getMemes(orderBy, order, templateId, tagId, page, limit);
  },
  { refetchOnMount: true },
);

2. 调整useEffect的依赖与逻辑 #

将index加入useEffect的依赖数组，这样切换标签页时能及时更新orderBy，同时因为query key已包含orderBy，React Query会自动触发新请求。另外无需将getMemes存到本地state，直接使用useQuery返回的getMemes即可：

const [orderBy, setOrderBy] = useState<MemeGetOrderByEnum>(MemeGetOrderByEnum.CreatedAt);
const [order, setOrder] = useState<MemeGetOrderEnum>(MemeGetOrderEnum.Desc);

const { getMemes, getMemesLoading } = useGetMemeApi(orderBy, order);

// 监听index变化，更新orderBy
useEffect(() => {
  console.log(index, "index");
  switch(index) {
    case 0:
      setOrderBy(MemeGetOrderByEnum.CreatedAt);
      break;
    case 1:
      setOrderBy(MemeGetOrderByEnum.Likes);
      break;
    case 2:
      setOrderBy(MemeGetOrderByEnum.Views);
      break;
    default:
      setOrderBy(MemeGetOrderByEnum.CreatedAt);
  }
}, [index]); // 依赖改为index，确保切换标签时触发

// 直接使用getMemes即可，无需存到本地state
console.log("memes", getMemes);

3. 优化：移除本地memes state #

原代码中用setMemes将getMemes存到本地state是冗余操作，React Query的data已经是实时更新的，直接使用getMemes渲染即可，减少不必要的状态同步。

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