Next.js中useQuery开启suspense:true引发无限循环问题

在Next.js里使用React Query的Suspense功能时，在_app文件的QueryClient配置中添加suspense: true后，index.tsx里通过useQuery发起的请求出现了无限循环。

相关代码如下：

_app文件代码 #

const queryClient = new QueryClient({
    defaultOptions: {
      queries: { staleTime: Infinity, retry: 0, suspense: true },
    },
  })

index.tsx文件代码 #

const { data: categories } = useQuery<categories[]>(['categories'], () =>
    fetch(`${server}/api/get-categories`)
      .then((res) => res.json())
      .then((data) => data.items),
  )

问题原因 #

问题出在你每次渲染_app组件时都会创建全新的QueryClient实例，没有复用同一个实例。

开启suspense: true后，每次组件渲染时，新的QueryClient没有缓存之前请求的数据，useQuery会判定数据未就绪，触发Suspense机制挂起组件；组件挂起恢复后会再次渲染，此时又会创建新的QueryClient，useQuery再次发起请求并触发Suspense，如此往复形成无限循环。

修复思路 #

要解决这个问题，需保证QueryClient实例只初始化一次并复用：

• 客户端环境下，可以用useMemo缓存QueryClient实例，避免每次渲染重新创建
• SSR/SSG场景下，需为每个请求创建独立的QueryClient，但要确保在当前请求的生命周期内复用该实例

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