Vite-React项目中Tanstack Query V5调用invalidateQueries报错TypeError

在Vite-React项目中使用Tanstack Query V5，执行发票删除mutation后，调用invalidateQueries刷新发票列表时抛出以下错误：

TypeError: Cannot read from private field
    at __accessCheck (chunk-TIUEEL27.js?v=ae984db9:41:11)
    at __privateGet (chunk-TIUEEL27.js?v=ae984db9:44:3)
    at chunk-PF574KJM.js?v=ae984db9:1620:7
    at Object.batch (chunk-PF574KJM.js?v=ae984db9:499:16)
    at invalidateQueries (chunk-PF574KJM.js?v=ae984db9:1619:26)
    at onClick (index.tsx:81:15)
    at HTMLUnknownElement.callCallback2 (chunk-EL3PUDHE.js?v=ae984db9:3674:22)
    at Object.invokeGuardedCallbackDev (chunk-EL3PUDHE.js?v=ae984db9:3699:24)
    at invokeGuardedCallback (chunk-EL3PUDHE.js?v=ae984db9:3733:39)
    at invokeGuardedCallbackAndCatchFirstError (chunk-EL3PUDHE.js?v=ae984db9:3736:33)

已将@tanstack/react-query版本从5.14.2升级至^5.26.3，问题仍未解决。

相关代码 #

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter as Router } from 'react-router-dom'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
const queryClient = new QueryClient()
import App from './App.tsx'
import { DashboardProvider } from './context/Dashboard.context'
import { Toaster } from '@/components/ui/toaster'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Router>
      <QueryClientProvider client={queryClient}>
        <DashboardProvider>
          <App />
          <Toaster />
        </DashboardProvider>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </Router>
  </React.StrictMode>
)

发票列表useQuery代码

const { isFetching, data } = useQuery({
  queryKey: ['invoiceList', page, limit],
  queryFn: async () => {
    const { data } = await apiRequest.get('/client/invoiceList', {
      params: { page, limit },
    })
    return data
  },
})

删除发票useMutation代码

const { invalidateQueries } = useQueryClient()
const { mutate, isPending } = useMutation({
  mutationFn: async () => {
    return await apiRequest.delete('/client/deleteInvoice', {
      params: { id: invoice?.id },
    })
  },
  onSuccess: () => {
    toast({
      variant: 'success',
      title: 'Invoice deleted successfully',
      description: `Invoice ${invoice?.reference} has been deleted successfully`,
    })
    invalidateQueries({ queryKey: ['invoiceList'] })
  },
  onError: (error) => {
    console.log(error?.message)
    handleError(error, toast)
  },
})

解决方案尝试 #

1. 统一Tanstack Query相关包版本

升级主包后，@tanstack/react-query-devtools版本可能未同步，导致内部私有字段访问冲突。执行以下命令统一版本：

npm install @tanstack/react-query@^5.26.3 @tanstack/react-query-devtools@^5.26.3

2. 替换invalidateQueries为refetchQueries

尝试用refetchQueries替代invalidateQueries，规避私有字段访问问题：

// 替换原invalidateQueries代码
queryClient.refetchQueries({ queryKey: ['invoiceList'] })

3. 临时移除React StrictMode测试

React StrictMode的双重渲染可能导致Tanstack Query内部私有状态异常。暂时注释掉<React.StrictMode>标签，重新运行项目验证错误是否消失：

ReactDOM.createRoot(document.getElementById('root')!).render(
    <Router>
      <QueryClientProvider client={queryClient}>
        <DashboardProvider>
          <App />
          <Toaster />
        </DashboardProvider>
        <ReactQueryDevtools initialIsOpen={false} />
      </QueryClientProvider>
    </Router>
)

4. 检查是否存在多个QueryClient实例

确认项目中没有在其他组件内重新创建QueryClient实例，所有组件都通过QueryClientProvider共享同一个全局实例。

5. 显式声明queryKey匹配规则

在invalidateQueries中添加exact: false（默认值，但显式声明确保匹配逻辑正确）：

invalidateQueries({ queryKey: ['invoiceList'], exact: false })

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