React-query-devtools issue

Question

I installed the react query devtools and I got an error when trying to start the app, the code and the error snapshots are above, any help, thank you. `

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { QueryClient, QueryClientProvider } from 'react-query';
import reportWebVitals from './reportWebVitals';
import { ReactQueryDevtools } from 'react-query-devtools';

const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      {' '}
      <App />
      <ReactQueryDevtools initialIsOpen />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

TypeError: Cannot read property 'queries' of undefined

 export const ReactQueryDevtoolsPanel = React.forwardRef(
> 215 |   function ReactQueryDevtoolsPanel(props, ref) {
  216 |     const { setIsOpen, ...panelProps } = props
  217 | 
  218 |     const queryCache = useQueryCache ? useQueryCache() : cache

TkDodo · Accepted Answer · 2021-07-04 17:19:29Z

3

Judging from the code, you are using react-query v3. The separate react-query-devtools package is for v2 only. With v3, please use the devtools that come with react-query:

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

answered Jul 4, 2021 at 17:19

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

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

Comments

Mark Rotteveel · Accepted Answer · 2023-01-27 17:02:57Z

0

Write these import statement

import { ReactQueryDevtools } from "react-query/devtools";

write these before QueryClientProvider

<ReactQueryDevtools initialIsOpen={false} position="bottom-right" />

edited Jan 27, 2023 at 17:02

Mark Rotteveel

110k240 gold badges160 silver badges232 bronze badges

answered Jan 25, 2023 at 2:51

Sivsankar Nayak

11 bronze badge

2 Comments

Sivsankar Nayak Over a year ago

keeping initialIsOpen false or true is your choice and position also depends on requirement

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Dharman · Accepted Answer · 2021-07-04 16:28:12Z

-2

I think this is has a simple solution! you forgot to assign a value to initialIsOpen, if it doesnt have one yet try assigning it an empty string

edited Jul 4, 2021 at 16:28

Dharman♦

33.9k27 gold badges105 silver badges157 bronze badges

answered Jul 4, 2021 at 16:22

Decod621

1141 silver badge4 bronze badges

Collectives™ on Stack Overflow

React-query-devtools issue

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related