TypeError: Cannot read property 'queries' of undefined (react.js)

Question

Here's the code I have:

import { useState } from 'react'
import { QueryClientProvider, QueryClient } from 'react-query'
import { ReactQueryDevtools } from 'react-query-devtools'

import Navbar from './components/Navbar'
import Planets from './components/Planets'
import People from './components/People'

const queryClient = new QueryClient

function App() {

  const [page, setPage] = useState('planets')

  return (
    <QueryClientProvider client={queryClient}>
      <div className="App">
        <h1>Star Wars Info</h1>
        <Navbar setPage={setPage} />

        <div className="content">
          {page === 'planets' ? <Planets /> : <People />}
        </div>
      </div>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  )
}
export default App

... which fails with this error:

TypeError: Cannot read property 'queries' of undefined

What should I do to fix this?

Answer 1

According to this line...

import { QueryClientProvider, QueryClient } from 'react-query'

... you're using the newer version of React Query library, v3. Introducing QueryClientProvider to replace both ReactQueryConfigProvider and ReactQueryCacheProvider was one of its key features.

However, even more important feature of this library for your code was merging Devtools into the package. To import them, you should now use...

import { ReactQueryDevtools } from 'react-query/devtools'

The older, already archived version of Devtools - which is imported in your code - is compatible with React Query v2, but not with v3.

It's not quite clear from the error message alone what exactly is broken. I suspect it's an attempt to use one of the components removed/modified in React Query v3, such as QueryCache.

---

As a sidenote: if you follow some tutorial to the letter, yet something is clearly broken, most of the time it's incompatibility of dependencies' versions to blame. React ecosystem evolves fast, and sometimes things are broken just because their parts evolve with different speed.