В настоящее время я использую Tanstack Query V5 в своем проекте Vite-React.
Всякий раз, когда я пытаюсь использовать invalidateQueries, выдает ошибку TypeError: Cannot read from private field
Я хочу, чтобы когда мутация для удаления счета-фактуры вызывала повторную перезагрузку списка счетов-фактур.
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 иvalidateQueries
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.info(error?.message)
handleError(error, toast)
},
})
Вот полная ошибка -
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)
Сначала я думал, что эта ошибка возникает в этой версии. Поэтому я обновляю версию с 5.14.2 до ^5.26.3. Но проблема остается нерешенной.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


queryClient, который вы получаете от useQueryClient, является экземпляром класса QueryClient, который использует частные поля, упрощенный пример:
class QueryClient {
#foo = 'bar'
invalidateQueries() {
return this.#foo
}
}
const queryClient = new QueryClient()
Если деструктурировать queryClient вот так
const { invalidateQueries } = queryClient
вы теряете контекст функции, поэтому при ее вызове вы вызываете ее без доступа к this.#foo:
invalidateQueries() // throws an error
// but this keeps working
queryClient.invalidateQueries() // 'bar'
Это ожидаемое поведение JS в отношении контекста (значение this).
--
Решение для вас — не деструктурировать:
const queryClient = useQueryClient()
queryClient.invalidateQueries()