错误：未设置 QueryClient，请使用 QueryClientProvider 设置一个。我设置了QueryClient？

Question

我已经换行<ReactQueryDevtools />了<QueryClientProvider>，所以我不明白为什么我会遇到这个问题？

我查看了 TanStack 查询文档，但我不明白这个问题。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { worker } from '@uidotdev/react-query-api';
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

const queryClient = new QueryClient();

new Promise((res) => setTimeout(res, 100))
  .then(() =>
    worker.start({
      quiet: true,
      onUnhandledRequest: 'bypass',
    })
  )
  .then(() => {
    ReactDOM.render(
      <React.StrictMode>
        <QueryClientProvider client={queryClient}>
          <BrowserRouter>
            <div className="container">
              <App />
            </div>
          </BrowserRouter>
          <ReactQueryDevtools />
        </QueryClientProvider>
      </React.StrictMode>,
      document.getElementById('root')
    );
  });

我的控制台：

Error: No QueryClient set, use QueryClientProvider to set one

Answer 1

其中一项进口不正确

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

应该

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';