Framework7-React中使用React Query报No QueryClient set错误的解决方法

错误原因 #

你遇到的问题核心是：在QueryClientProvider的上下文生效范围之外调用了React Query的钩子。看你的代码，你在app组件的顶层直接调用useQuery或useFetchData，但组件执行逻辑是先运行顶层代码，再渲染JSX结构——此时QueryClientProvider还没完成渲染，React Query的全局上下文尚未建立，自然找不到QueryClient实例。

解决方案 #

把数据获取逻辑移到QueryClientProvider包裹的子组件中，确保钩子调用时上下文已经生效。

1. 修改根组件app.jsx

移除根组件里的useQuery调用，将数据获取逻辑放到子组件中，同时保证QueryClientProvider完整包裹Framework7的App组件：

import React from 'react'
import { View, App } from "framework7-react";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";
// 导入负责数据展示的子组件
import HomePage from './HomePage';

export default function App() {
  const queryClient = new QueryClient();

  return (
    <QueryClientProvider client={queryClient}>
      <App>
        <View main url="/">
          {/* 将数据获取逻辑放入子组件 */}
          <HomePage />
        </View>
      </App>
      <ReactQueryDevtools initialIsOpen={false} position="bottom-right" />
    </QueryClientProvider>
  )
}

2. 创建子组件HomePage.jsx

在这个被QueryClientProvider包裹的子组件里调用useQuery或自定义钩子：

import React from 'react';
import { useQuery } from 'react-query';
// 也可以使用你的自定义钩子
// import { useFetchData } from '../utils/useFetchData';

export default function HomePage() {
  // 此时已处于QueryClientProvider的上下文范围内，可正常调用钩子
  const { data, isLoading, error } = useQuery(["data"], () => 
    fetch("../utils/data.json").then(res => res.json())
  );

  // 使用自定义钩子的写法
  // const { data, isLoading, error } = useFetchData();

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error.message}</div>;

  return (
    <div>
      <h1>数据展示</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

3. 自定义钩子useFetchData.js无需修改

你的自定义钩子只是封装了useQuery，只要在QueryClientProvider的上下文内调用，就能正常工作：

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

export function useFetchData() {
  const data = useQuery(["property"], () =>
    fetch("./data.json").then((res) => res.json())
  );

  return data;
}

关键注意事项 #

• 所有调用useQuery、useMutation等React Query钩子的组件，必须被QueryClientProvider直接或间接包裹。
• 不要在创建QueryClientProvider的根组件本身调用这些钩子，因为根组件的顶层代码执行时，上下文还未初始化。

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