javascript - TypeError: queryClient.defaultQueryObserverOptions is not a function

Question

I'm working with React Query and try to get data (users) from a JSON file inline.

I have installed it with npm React-query & React-query-devtools and have only 2 files.

App.js:

import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query-devtools';
import Users from './Users';

function App() {
  return (
    <div className="App">
      <QueryClientProvider client={QueryClient}>
        <Users />
        <ReactQueryDevtools initialIsOpen />
      </QueryClientProvider>
    </div>
  );
}

export default App;

Users.js:

import React from 'react'
import { useQuery } from 'react-query';

const Users = () => {
    const { isLoading, isError, data, error } = useQuery('test', () => (
        fetch('https://jsonplaceholder.typicode.com/users').then((res) => res.json())
    ));
    return (
        <div>
            {isLoading ? <h2>Chargement...</h2> : null}
            {isError ? <h2>Une erreur est survenue : {error.message}</h2> : null}

            <ul>
                {data.map((user) => (
                    <li key={user.id}>{user.name}</li>
                ))}
            </ul>
        </div>
    )
}

export default Users

I can't solve this error:

TypeError: queryClient.defaultQueryObserverOptions is not a function

question from:https://stackoverflow.com/questions/65626311/typeerror-queryclient-defaultqueryobserveroptions-is-not-a-function

Answer 1

You should use instance of QueryClient for cleint not the QueryClient directly.

As per the docs

import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query-devtools';
import Users from './Users';

// Create a client
const queryClient = new QueryClient() // Instance of QueryClient

function App() {
  return (
    <div className="App">
      <QueryClientProvider client={queryClient}> // <-- here
        <Users />
        <ReactQueryDevtools initialIsOpen />
      </QueryClientProvider>
    </div>
  );
}

export default App;