react-query：如何在 onSuccess 回调中从 useQuery 获取数据？

Question

我正在学习 react-query 并且遇到了一些问题。我想使用 data 通过 useQuery 获取数据，但我得到 data 作为 undefined。这是我的代码：

import React from "react";
import { useQuery } from "react-query";
import { fetchData } from "./providesData";
const Home = () => {
  const {data} = useQuery("fetchData", fetchData, {
    onSuccess: () => {
      console.log("Get data!");
      console.log(data); // undefined
    }
  });

  return <div></div>;
};

export default Home;

但是我在react-query devtools中看到获取成功并且data在这里。所以我想我没有正确访问 onSuccess 回调中的 data 。那么我们如何才能在回调中访问 data 呢？我试过了：

const query = useQuery("fetchData", fetchData, {
    onSuccess: () => {
      console.log("Get data!");
      console.log(query.data); // undefined
    }
  });

但还是没有运气。

我阅读了 documentation 并发现了这个：

onSuccess: (data: TData) => void

所以我在我的代码中尝试了这个：

const {data} = useQuery("fetchData", fetchData, {
    onSuccess: (data: TData) => {
      console.log("Get data!");
      console.log(data); // success
    }
  });

这次成功了。但是我不明白为什么...而且代码编辑器还警告我：

Type annotations can only be used in TypeScript files.ts(8010)

任何人都可以告诉我正确的方法吗？非常感谢！

这是一个demo.

Answer 1

仅当从查询中检索到 data 时才调用 onSuccess 回调函数。请注意，这个 data 不是您从 useQuery return 对象中销毁的对象，而是在成功从您的 API。因为，它是一个回调函数，所以您不需要检查 waiting/loading 个案例，因为如果您的请求成功，它最终会被调用。

在你的情况下，第一个 data 变量将 return undefined 一旦 Home 组件安装，因为 useQuery 调用是一个异步调用，这意味着从 useQuery 调用 编辑的数据 return 需要从 Promise。因此，它不会在 Home 组件安装后立即可用，而是仅在查询成功解析后才可用。此外，react-query useQuery 挂钩使用在实际 data 对象（return 之前收到的数据调用 onSuccess(data) 回调由 useQuery 挂钩编辑）设置并从挂钩 return 编辑。

由于 useQuery 是一个异步调用（内部），它还提供了 request in-flight 标志，如 isLoading、isFetching 等，您可以使用这些标志来使 -检查数据、错误或任何其他合适的目的。

Answer 2

我刚刚这样做了：

useQuery("fetchData", fetchData, {
    onSuccess: (data) => {
      console.log("Get data!");
      console.log(data);
    }
  });

react-query：如何在 onSuccess 回调中从 useQuery 获取数据？

react-query: how to get the data from useQuery in onSuccess callback?

reactjs

react-query