NextJS与ReactQuery钩子调用无效问题求助

可能的原因及解决方案 #

1. 依赖包版本不兼容（最常见） #

React Query v4已更名为@tanstack/react-query，若你安装的是旧版react-query，可能与NextJS/React版本冲突，触发hook调用异常。

修复步骤：

• 卸载旧依赖：

npm uninstall react-query
# 若使用yarn则执行：yarn remove react-query

• 安装新版依赖：

npm install @tanstack/react-query
# 若使用yarn则执行：yarn add @tanstack/react-query

• 更新导入语句：

// 替换原react-query的导入
import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';

2. 项目存在多个React实例 #

当项目中存在多个React副本时，会触发hook调用验证失败的错误。

修复步骤：

• 删除依赖缓存和锁文件：

rm -rf node_modules package-lock.json
# 若使用yarn则执行：rm -rf node_modules yarn.lock

• 重新安装依赖：

npm install
# 若使用yarn则执行：yarn install

3. 调整QueryClient的创建方式（可选优化） #

你当前用useState懒初始化QueryClient的写法本身正确，也可以尝试将QueryClient创建移至组件外部（注意开发模式热重载可能导致client重置，生产环境无影响）：

import "../styles/globals.css";
import React from "react";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import { Hydrate, QueryClient, QueryClientProvider } from "@tanstack/react-query";
import type { AppProps } from "next/app";

// 移至组件外创建QueryClient
const queryClient = new QueryClient();
const colors = {
  brand: {
    900: "#1a365d",
    800: "#153e75",
    700: "#2a69ac",
  },
};
const theme = extendTheme({ colors });

export default function App({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <Hydrate state={pageProps.dehydratedState}>
        <ChakraProvider theme={theme}>
          <Component {...pageProps} />
        </ChakraProvider>
      </Hydrate>
    </QueryClientProvider>
  );
}

4. 检查TS配置 #

确保tsconfig.json中的jsx配置正确：

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

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