React Tanstack useQuery所有查询显示pause状态求助

问题现象 #

• 所有查询均处于“paused”状态，尽管enabled标志已设置为true
• 后端服务通过Postman测试正常，word参数传递无误（截图可见enabled为true）
• 尝试调整enabled标志、更新至最新稳定版包均未解决问题

相关代码 #

import { useQuery } from "@tanstack/react-query";

const getWordInfo = async (word: string) => {
  const res = await fetch(`${import.meta.env.VITE_API}/api/conjugations/${word.trim()}`);
  const data = await res.json();

  if (!data.isSuccess) throw Error(data.message || "Server Error");

  return data;
};

export const useConjugation = (word: string) => {
  const {
    data: wordInfo,
    isFetching,
    isError,
    isSuccess
  } = useQuery<any>(["conjugations", word], async () => await getWordInfo(word), {
    enabled: !!word,
    retry: true,
    refetchOnWindowFocus: false
  });

  return { data: wordInfo, isSuccess, isFetching, isError };
};

排查方案 #

1. 修正enabled的判断逻辑 #

当前!!word的判断会把全空格字符串判定为true，但实际请求时word.trim()会变成空值，可能触发异常状态。替换为更严谨的判断：

export const useConjugation = (word: string) => {
  const isEnabled = word?.trim().length > 0;
  
  const {
    data: wordInfo,
    isFetching,
    isError,
    isSuccess
  } = useQuery<any>(["conjugations", word], async () => await getWordInfo(word), {
    enabled: isEnabled,
    retry: true,
    refetchOnWindowFocus: false
  });

  return { data: wordInfo, isSuccess, isFetching, isError };
};

2. 检查全局React Query客户端配置 #

确认全局客户端是否设置了覆盖单个查询的默认配置，比如全局禁用查询：

// 排查是否存在此类全局配置
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      enabled: false, // 该配置会覆盖单个查询的enabled设置
    },
  },
});

3. 追踪Query Key的稳定性 #

React Query依赖Query Key识别查询，若word值频繁变动，可能导致查询一直处于等待状态。添加日志确认Query Key的变化：

console.log("当前Query Key:", ["conjugations", word]);

4. 清除异常缓存 #

若之前存在空word的查询缓存，可能干扰后续请求，尝试清除对应缓存：

// 在调用Hook的组件中执行
queryClient.removeQueries(["conjugations", word]);

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