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?

Sometimes this error exist when you forgot to use "new" key word for QueryClient() — Clode Morales Pampanga III
– Clode Morales Pampanga III, Commented Dec 13, 2022 at 7:39

raina77ow · Accepted Answer · 2021-06-19 20:39:12Z

28

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.

edited Jun 19, 2021 at 20:39

answered Jun 19, 2021 at 20:21

raina77ow

107k16 gold badges205 silver badges240 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lazybob Over a year ago

Thanks, man, this worked for me, I was following Tanner Linsley course then this happened to me. I think he needs to update his course!

dani_l_n Over a year ago

for me it was merely using import { ReactQueryDevtools } from 'react-query/devtools' instead of npm i react-query-devtools which solved the problem.

Jamshidkhuja Burikhujaev · Accepted Answer · 2021-09-17 14:58:40Z

4

As the documentation says:

The devtools are bundle split into the react-query/devtools package. No need to install anything extra.

answered Sep 17, 2021 at 14:58

Jamshidkhuja Burikhujaev

635 bronze badges

Comments

Shah Vipul · Accepted Answer · 2022-10-29 08:27:44Z

0

Reason

Using an old version of React Query Dev tools caused the issue.

Solution

npm i @tanstack/react-query-devtools

It can be any Component where the below code can be written but prefer way is to write it in the main app.js or router file. So that dev tools can be accessed on all pages.

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

function App() {
  return (
      <ReactQueryDevtools initialIsOpen={false} />
  )
}```

answered Oct 29, 2022 at 8:27

Shah Vipul

7759 silver badges11 bronze badges

Comments

Williams · Accepted Answer · 2022-12-13 10:15:35Z

-1

If you are on v3, make sure to use the devtools that come with the library (react-query/devtools), not the separate package react-query-devtools.

answered Dec 13, 2022 at 10:15

Williams

11 bronze badge

1 Comment

Ian Kemp - SO dead by AI greed Over a year ago

What extra information does this offer over the accepted answer?

Collectives™ on Stack Overflow

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

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related