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

Question

我第一次尝试 React 查询，然后在我的 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 中。这是 docs 的第一页：

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

const queryClient = new QueryClient()

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

Answer 2

虽然这最常见的原因是没有将您的应用程序包装在 <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 3

import {  QueryClient, QueryClientProvider } 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>
);
    
}

Answer 4

我试图解决同样的问题：

我关注了React Query docs 并使用了 Higher Order Component

的概念 看看是否有帮助：

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

import Planet from './Planet';

const queryClient = new QueryClient();

const fetchPlanets = async () => {
    const res = await fetch('http://swapi.dev/api/planets/');
    return res.json();
}

const Planets = () => {

    const { data, status } = useQuery('planets', fetchPlanets);

    return (
        <div>
            <h2>Planets</h2>
            { status === 'loading' && (<div>Loading data...</div>)}
            { status === 'error' && (<div>Error fetching data</div>)}
            {
                status === 'success' && (
                    data.results.map(planet =>
                        <Planet
                            key={planet.name}
                            planet={planet}
                        />
                    )
                )
            }
        </div>
    )
}

// Higher order function
const hof = (WrappedComponent) => {
    // Its job is to return a react component warpping the baby component
    return (props) => (
        <QueryClientProvider client={queryClient}>
            <WrappedComponent {...props} />
        </QueryClientProvider>
    );
};

export default hof(Planets);