Проблемы с ReactQuery v4 "из коробки"

И снова я тут, товарищи. Сел за изучение React Query и благополучно столкнулся с очень неприятной ошибкой прямо, если так можно выразиться, "из коробки".

Уточню, писать, что надо просто прочитать ошибку, не нужно, я уже ее и читал, и гуглил, и куда только не пихал)

Ошибка:

Код main.tsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false
    }
  }
});

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
)

Код в App.tsx:

import { useQuery } from "@tanstack/react-query";

const todoId = 1;

function App() {

  const { isLoading, error, data } = useQuery(
    ['todos', todoId],
    () => fetch('https://jsonplaceholder.typicode.com/todos/1').then(response=>response.json())
  )

  return (
    <div>
      {
      data ?( 
        <h1>Todo: {data}</h1>
      ):(
        <h1>No todos</h1>
      )
      }
    </div>
  )
}

export default App

Ответы (0 шт):