React 查询在新页面中显示上一页数据

Question

我有一个 React 项目，包括两个页面：博客和画廊。我可以使用 react-query 获取数据并使用 react-router 在页面之间导航。问题是当我从博客导航到图库（反之亦然）时，在加载图库数据时博客内容显示在图库中。

这是我的主要 App 功能：

function App() {
   return (
      <>
         <Helmet
            ...
         ></Helmet>
         <Header />
         <main>
            <Switch>
               <Route path="/blog" component={Blog} />
               <Route path="/gallery" component={Gallery} />
               <Route exact path="/" component={Home} />
               <Route component={Error404} /> */}
            </Switch>
         </main>
         <Footer />
      </>
   );
}

const queryClient = new QueryClient();

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

这是我的获取组件：

import React from "react";
import Card from "../molecules/Card";
import { useQuery } from "react-query";

// function name is different in Gallery Component
export default function BlogCardStack(props) {
   const { isLoading, error, data, isFetching } = useQuery("repoData", () =>
      fetch(props.contentSource).then((res) => res.json(), { keepPreviousData : false }),
   );

   if (error) return "An error has occurred: " + error.message;

   return (
      <div className="card-stack">
         {data
            ? data.map((item) => (
             \ I use <VideoCard> instead of <Card> in Gallery
                 <Card
                    key={item.id}
                    title={item.title.rendered}
                    image={{
                       src: item.featured_media_src_url,
                    }}
                 />
              ))
            : Array(4)
                 .fill()
                 .map((item, index) => <Card key={index} />)}
         {/* {isFetching ? "Updating..." : ""} */}
         {/* <ReactQueryDevtools initialIsOpen /> */}
      </div>
   );
}

我在 Blog 和 Gallery 组件中都使用了上面的代码，只需更改 return 部分

更新

我换了钥匙，但运气不好。

Answer 1

您需要为每个要获取的数据提供一个唯一的queryKey，否则它们将不断相互覆盖。查询缓存就像一个对象，其中 queryKey 是该对象的“键”，而您的数据就是值。

在您的示例中，最好通过向键中添加 props.contentSource 来实现此目的：

const { isLoading, error, data, isFetching } = useQuery(
    ['data', props.contentSource],
    () => fetch(props.contentSource).then((res) => res.json()),
);

keepPreviousData 默认为 false 所以你不需要设置它。

React 查询在新页面中显示上一页数据

React query shows previous page data in new page

reactjs

react-router

react-query

更新