如何修复React Query报错：Query data cannot be undefined？

你的问题出在queryFn没有返回异步请求的结果，导致React Query无法获取到有效数据，所以抛出了这个错误。

问题分析 #

你当前的queryFn里调用了makeRequest.get("/posts")，但没有把这个异步请求的Promise返回出去。虽然你在then回调里return了res.data，但外层的queryFn函数本身没有返回任何值（默认返回undefined），React Query无法等待异步请求完成并拿到数据。

修复方案 #

有两种简单的修复方式：

方式一：直接返回Promise链

简化写法，直接把makeRequest.get的Promise链返回给queryFn：

const {isLoading, error, data } =  useQuery({
  queryKey: ["posts"],
  queryFn: () => makeRequest.get("/posts").then((res) => res.data)
});

方式二：使用async/await（更易读）

用async/await语法重构queryFn，明确返回请求结果：

const {isLoading, error, data } =  useQuery({
  queryKey: ["posts"],
  queryFn: async () => {
    const res = await makeRequest.get("/posts");
    return res.data;
  }
});

两种方式都能让React Query正确接收到异步请求返回的数据，解决报错问题。

内容的提问来源于stack exchange，提问作者Mandeep