问题:react-query:如何在 onSuccess 回调中从 useQuery 获取数据?

我正在学习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
    }
  });

但仍然没有运气。

我阅读了文档并发现了这个:

onSuccess: (data: TData) u003d> 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)

谁能告诉我正确的方法吗?太感谢了!

这是一个演示。

解答

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

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

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