Tanstack Query问题：相同查询键导致第二个查询未执行

React Query 是通过 queryKey 唯一识别每个查询的，你这两个 Hook 用了完全相同的 ['story', userId] 作为 queryKey，React Query 会判定这是同一个查询任务。当第一个查询在执行或已有缓存时，第二个查询会被直接忽略，自然就出现了阻塞情况。

给两个查询的 queryKey 加上专属标识，让它们能被精准区分：

• 针对 useGetUserStories，在 queryKey 中加入 'user' 标识，明确这是获取当前用户的故事：

export const useGetUserStories = (userId?: string | null) => {
  return useQuery({
    queryKey: ['story', 'user', userId], // 加入'user'做区分
    queryFn: async () => {
      const stories = await axios.get(`${API_URL}/story/${userId}`);
      return stories.data;
    },
    enabled: !!userId,
  });
};

• 针对 useFetchFeedStories，加入 'feed' 标识，同时注意无限查询的参数传递逻辑（原写法中 page 参数无法被 queryFn 正确接收）：

export const useFetchFeedStories = (userId?: string) => {
  return useInfiniteQuery({
    queryKey: ['story', 'feed', userId], // 加入'feed'做区分
    queryFn: async ({ pageParam = 1 }) => { // 用pageParam接收分页参数
      const stories = await axios.get(
        `${API_URL}/story/feed/${userId}/${pageParam}`
      );
      return stories.data;
    },
    getNextPageParam: (lastPage) => {
      // 根据后端返回的内容判断是否有下一页，示例逻辑：
      return lastPage.hasMore ? lastPage.nextPage : null;
    },
    enabled: !!userId,
  });
};

queryKey 的核心作用就是区分不同查询场景，只要保证每个独特的查询逻辑对应唯一的 queryKey，就不会出现这类阻塞问题。之前移除 userId 后能正常执行，只是因为两个 queryKey 变成了相同的 ['story']，但这会导致不同用户的查询共用缓存，显然不符合业务需求。

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