javascript - Error: No QueryClient set, use QueryClientProvider to set one - Stack Overflow

admin管理员组

文章数量:1278854

I was trying react query for first time then i got this on start of my React app.

Although I added QueryClientProvider I top of the tree I am still facing : Error: No QueryClient set, use QueryClientProvider to set one

index.js

ReactDOM.render(
    <QueryClientProvider queryClient={queryClient}>
        <App />
    </QueryClientProvider>
  ,
  document.getElementById('root')

App.js

function App() {
  return (
      <div className="App">
       <Forms/>
      </div>
  );
}

Form.js

function Forms() {
    const[createTodo,todoMutation]= useMutation((event) => {
        axios.post('/todos', event.target.elements.todo.value);
    })

    return (

        <div>
            <form onSubmit={createTodo}>
                <label htmlFor="todo">todo-item:</label>
                <input id="todo" name="Add todo"/>
                <button>Submit</button>
            </form>
        </div>

    )
}

Package.json

    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-query": "3.12.1",
    "react-scripts": "4.0.0"

I was trying react query for first time then i got this on start of my React app.

Although I added QueryClientProvider I top of the tree I am still facing : Error: No QueryClient set, use QueryClientProvider to set one

index.js

ReactDOM.render(
    <QueryClientProvider queryClient={queryClient}>
        <App />
    </QueryClientProvider>
  ,
  document.getElementById('root')

App.js

function App() {
  return (
      <div className="App">
       <Forms/>
      </div>
  );
}

Form.js

function Forms() {
    const[createTodo,todoMutation]= useMutation((event) => {
        axios.post('/todos', event.target.elements.todo.value);
    })

    return (

        <div>
            <form onSubmit={createTodo}>
                <label htmlFor="todo">todo-item:</label>
                <input id="todo" name="Add todo"/>
                <button>Submit</button>
            </form>
        </div>

    )
}

Package.json

    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-query": "3.12.1",
    "react-scripts": "4.0.0"

• javascript
• reactjs
• react-query

Share Improve this question Follow asked May 18, 2021 at 7:51 mani_ninjamani_ninja 12311 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

Prop name should be client instead of queryClient

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

 const queryClient = new QueryClient()

 function App() {

   return <QueryClientProvider client={queryClient}>...</QueryClientProvider>

 }

Downgrading the version from V3 to V2 fixed the issue.

本文标签： javascriptError No QueryClient setuse QueryClientProvider to set oneStack Overflow