为何在TanStack Query的queryFn中必须添加return语句？

问题核心 #

TanStack Query的queryFn要求返回一个Promise（或是async函数，因为async函数默认返回Promise），只有这样Query才能跟踪异步请求的状态并解析出返回数据。

不可行代码的问题 #

下面这段代码里，queryFn是普通函数，调用getUserById后没有返回这个异步操作的Promise：

const { data = [], isSuccess } = useQuery({
  queryKey: ['user'],
  queryFn: () => {
    if (userId) {
      getUserById(userId); // 仅调用async函数，未返回其Promise
    }
  },
 enabled: !!userId,
});

getUserById是async函数，调用后会生成一个Promise，但因为queryFn没有return这个Promise，它的返回值就是undefined。TanStack Query无法从undefined中解析出数据，因此data会是undefined。

可行代码的正确逻辑 #

这段代码的queryFn是async函数，内部await了getUserById的结果并返回：

export const getUserById = async (userId: string) => {
  try {
    const response = await axios.get(`${API_URL}/user/${userId}`);
    return response.data;
  } catch (err) {
    console.log(err);
  }
};

const { data = [], isSuccess } = useQuery({
    queryKey: ['user'],
    queryFn: async () => {
      if (userId) {
        const user = await getUserById(userId);
        return user;
      }
    },
    enabled: !!userId,
});

• async函数会自动把返回值包装成Promise，TanStack Query能正确接收这个Promise，等待异步操作完成后解析出response.data，最终data就能拿到用户信息。
• 即使不使用await，直接return getUserById(userId)也能正常工作，因为getUserById本身返回的就是Promise：

  queryFn: () => {
    if (userId) {
      return getUserById(userId); // 直接返回Promise
    }
  }
  

额外提醒 #

如果getUserById的catch块没有抛出错误，TanStack Query无法感知请求失败。建议在catch中抛出错误，让Query的错误状态（isError、error）能正常触发：

export const getUserById = async (userId: string) => {
  try {
    const response = await axios.get(`${API_URL}/user/${userId}`);
    return response.data;
  } catch (err) {
    console.error(err);
    throw err; // 抛出错误，让TanStack Query捕获
  }
};

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