React Query useQuery搭配带参axios.get请求返回data始终为undefined

问题原因及修复方案 #

1. fetchCartPreview 函数无返回值 #

你编写的fetchCartPreview没有将axios请求的Promise返回，也没有在异步回调中返回响应数据，导致await fetchCartPreview()拿到的结果始终是undefined，useQuery自然无法获取到接口返回值。

2. onSuccess 回调配置错误 #

useQuery的配置项中你直接写了onSuccess: console.log("Finish query")，这行代码会在Hook初始化时立即执行打印，而不是作为请求成功后的回调触发，自然也无法拿到请求返回的data，需要改为函数形式才会在对应时机执行。 #

修复后代码 #

你可以选择async/await写法：

import axios from "axios";
import { useQuery } from "react-query";

const fetchCartPreview = async (cartId, userId) => {
  console.log("Init query");
  const response = await axios
    .get(
      `${process.env.REACT_APP_API_BASE_URL}/carts/${cartId}/checkout_preview`,
      {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        params: { user_id: userId },
      }
    );
  console.log("Response from hook", response.data);
  // 返回响应数据给useQuery
  return response.data;
};

export default function useCartPreview(cartId, userId) {
  return useQuery(
    ["cart_preview", cartId, userId],
    async () => {
      const data = await fetchCartPreview(cartId, userId)
      return data
    },
    { 
      // 改为函数形式作为回调，可接收返回的data
      onSuccess: (data) => {
        console.log("Finish query", data)
      } 
    }
  );
}

也可以保留原.then写法，只要补充返回逻辑即可：

const fetchCartPreview = (cartId, userId) => {
  console.log("Init query");
  // 返回axios生成的Promise
  return axios
    .get(
      `${process.env.REACT_APP_API_BASE_URL}/carts/${cartId}/checkout_preview`,
      {
        headers: {
          "Content-Type": "application/json",
          Accept: "application/json",
        },
        params: { user_id: userId },
      }
    )
    .then((response) => {
      console.log("Response from hook", response.data);
      // 返回响应数据
      return response.data;
    });
};

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