没有 QueryClient 设置，使用 QueryClientProvider 设置一个

Question

我第一次尝试响应查询，然后在我的 React 应用程序开始时得到了这个。

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

const fetchPanets = async () => {
    const result = await fetch('https://swapi.dev/api/people')
    return result.json()
}

const Planets = () => {
    const { data, status } = useQuery('Planets', fetchPanets)
    console.log("data", data, "status", status)
    return (
        <div>
            <h2>Planets</h2>
        </div>
    )
}

export default Planets

Answer 1

虽然这最常见的原因是没有将应用程序包装在 中<QueryClientProvider>，但就我而言，这是因为我导入了一些共享组件，这些组件最终得到了不同的上下文。您可以通过将contextSharing选项设置为来解决此问题true

那看起来像：

 import { QueryClient, QueryClientProvider } from 'react-query'
 
 const queryClient = new QueryClient()
 
 function App() {
   return <QueryClientProvider client={queryClient} contextSharing={true}>...</QueryClientProvider>
 }

来自文档：( https://react-query.tanstack.com/reference/QueryClientProvider )

contextSharing: 布尔值（默认为 false）

将其设置为 true 以启用上下文共享，这将在整个窗口中共享上下文的第一个和至少一个实例，以确保如果在不同的包或微前端中使用 React Query，则它们都将使用相同的上下文实例，无论模块范围。

Answer 2

就我而言，我在一个地方从“react-query”导入，在另一个地方从“@tanstack/react-query”导入。

Answer 3

正如错误所暗示的那样，您需要将应用程序包装在QueryClientProvider. 这是在文档的第一页：

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

const queryClient = new QueryClient()

export default function App() {
   return (
     <QueryClientProvider client={queryClient}>
       <Example />
     </QueryClientProvider>
   )
}

Answer 4

只需进行如下更改即可正常工作

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { QueryClient, QueryClientProvider } from "react-query";
const queryClient = new QueryClient();

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

Answer 5

我在尝试添加 React-query devtools时遇到了该错误。

问题是我根据我的版本错误地安装了它，我使用的是react-query v3。

对于react-query V3 来说是错误的（对于V4 来说是好的）

import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

适合反应查询 V3

import { ReactQueryDevtools } from 'react-query/devtools';

Answer 6

import {  QueryClient, QueryClientProvider, useQuery } from 'react-query';
const queryClient = new QueryClient();
const fetchPanets = async () => {
    const result = await fetch('https://swapi.dev/api/people')
    return result.json()
}

const Planets = () => {
    const { data, status } = useQuery('Planets', fetchPanets)
    console.log("data", data, "status", status)
    return (
        <div>
            <h2>Planets</h2>
        </div>
    );
}


export default function Wraped(){
return(<QueryClientProvider client={queryClient}>
        <Planets/>
    </QueryClientProvider>
);
    
}