Ошибка типа: невозможно прочитать из частного поля в запросе Tanstack React Query

В настоящее время я использую 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. Но проблема остается нерешенной.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
345
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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()

Другие вопросы по теме

Как показать все ошибки файлов в приложении реагирования с помощью eslint с помощью однострочного кода в сценариях в package.json?
NextJS (AppRouter), Apollo (Клиент), ошибка при использовании ApolloProvider в корневом макете
Невозможно настроить Next.js 14 с помощью клиента Apollo GraphQL
Получение ошибки, если функция стрелки возвращает функцию, но не когда она возвращает значение null для useEffect
Когда я загружаю элементы холста Fabric.js из JSON, они не видны на холсте
React (18.2.0) меняет URL-адрес с помощью навигации, но страница не обновляется
Получение модуля «реагировать-маршрутизатор-дом» не имеет экспортированного члена. Ошибка RouteComponentProps при переходе на реактивный маршрутизатор v6
При использовании PDF React Renderer изображения не отображаются при загрузке
Принудительно использовать то же имя импортированного компонента, что и файл, из которого он импортирован, в ответ на импорт модулей TS?
Есть ли способ решить проблему комбинации маршрутов, которые влияют друг на друга?