错误：未设置 QueryClient，请使用 QueryClientProvider 设置一个

Question

我第一次尝试反应查询，然后我在启动反应应用程序时得到了这个。

虽然我添加了 QueryClientProvider 我仍然面临着树顶：Error: No QueryClient set, use QueryClientProvider to set one

索引.js

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

应用程序.js

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

表单.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>

    )
}

包.json

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

Answer 1

道具名称应该client代替queryClient

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

 const queryClient = new QueryClient()

 function App() {

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

 }