React-query未发起请求排查：调用/admin/cafes无网络请求

排查返回值undefined问题时，发现React Query未发起任何请求（Chrome Network标签无/admin/cafes请求记录），相关代码如下：

相关代码 #

CafesTable.js #

const fetchCafes = async () => {
  const res = await apiClient.get("/admin/cafes");
  return res;
};

function CafesTable() {
  const { data, status } = useQuery("cafes", fetchCafes);
  console.log(data);

http-common.js #

const token = "Bearer " + Cookies.get("token");

export default axios.create({
  baseURL: `${process.env.REACT_APP_API_ENDPOINT}/api`,
  headers: {
    Authorization: token,
  },
});

可能的原因及解决办法 #

• React Query未被Provider包裹
  React Query的useQuery必须在QueryClientProvider的上下文范围内才能生效。如果组件树顶层没配置这个Provider，useQuery完全不会触发请求。
  解决：在App根组件或父组件中添加Provider配置：

  import { QueryClient, QueryClientProvider } from 'react-query';
  
  const queryClient = new QueryClient();
  
  function App() {
    return (
      <QueryClientProvider client={queryClient}>
        <CafesTable />
      </QueryClientProvider>
    );
  }
  

• token初始化时机错误
  http-common.js里的token是模块加载时直接获取的，如果此时Cookie中还没有token值，会导致Authorization头变成Bearer undefined，axios可能因无效请求头静默失败，不会发起网络请求。
  解决：改用请求拦截器动态获取token，确保每次请求都能拿到最新的Cookie值：

  const apiClient = axios.create({
    baseURL: `${process.env.REACT_APP_API_ENDPOINT}/api`,
  });
  
  apiClient.interceptors.request.use((config) => {
    const token = Cookies.get("token");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  });
  
  export default apiClient;
  

• React Query配置了禁用自动请求
  检查useQuery是否加了enabled: false配置，这会直接阻止请求自动触发。如果是需要手动触发的场景，要确保触发条件正确。
  解决：移除不必要的enabled: false，或者根据业务逻辑动态设置：

  // 错误示例：
  // const { data, status } = useQuery("cafes", fetchCafes, { enabled: false });
  // 正确写法（无禁用配置）：
  const { data, status } = useQuery("cafes", fetchCafes);
  

• 组件未被渲染
  确认CafesTable组件是否真的挂载到了DOM中，如果组件根本没被渲染，useQuery自然不会执行。可以在组件内加个console.log确认是否进入了组件逻辑。

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