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

Question

我正在学习react-query，但遇到了一些问题。我想使用通过useQuery 获取数据的data，但我得到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 返回对象中销毁的那个，而是在成功从您的API 中检索数据时传递给回调的那个。由于它是一个回调函数，因此您无需检查等待/加载情况，因为如果您的请求成功，它最终会被调用。

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

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

Answer 2

我刚刚这样做了：

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