javascript - TypeError: queryClient.defaultQueryObserverOptions is not a function - Stack Overflow

admin管理员组

文章数量:1293512

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('').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

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./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

• javascript
• reactjs
• typeerror
• react-query

Share Improve this question Follow edited Jan 8, 2021 at 14:25 double-beep 5,5191919 gold badges4040 silver badges4949 bronze badges asked Jan 8, 2021 at 9:19 Jonathan ViaultJonathan Viault 3311 gold badge11 silver badge33 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You should use an instance of QueryClient for the client prop, 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;

本文标签： javascriptTypeError queryClientdefaultQueryObserverOptions is not a functionStack Overflow