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在这里。所以我认为我没有正确访问回调data中的onSuccess。那么我们如何才能访问到data回调中的呢？我试过：

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

但仍然没有运气。

我阅读了文档并发现了这一点：

onSuccess: (数据: 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)

谁能告诉我正确的方法吗？太感谢了！

这是一个演示。

Answer 1

我刚刚这样做了：

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

Answer 2

仅当从查询中检索到onSuccess时才会调用回调函数。data请仔细注意，这data不是您从返回对象中解构的对象useQuery，而是在从 API 成功检索数据时传递给回调的对象。因为它是一个回调函数，所以您不需要检查等待/加载情况，因为如果您的请求成功，它最终会被调用。

在您的情况下，第一个变量将在组件安装后立即data返回，因为该调用是异步调用，这意味着从调用返回的数据需要从. 因此，它不会在组件安装后立即可用，而是只有在查询成功解析后才可用。此外，react-query钩子会使用在设置实际对象（钩子返回的对象）并从钩子返回之前接收到的数据来调用回调。undefinedHomeuseQueryuseQueryPromiseHome useQueryonSuccess(data)datauseQuery

由于useQuery是异步调用（内部），因此它还提供了诸如、等request in-flight标志，您可以使用它们对数据、错误或任何其他合适的目的进行空检查。isLoadingisFetching