在Next.js/React.js中如何从React Query useQuery解构嵌套数据

有两种常用方式可以直接获取嵌套的data?.products数据：

方法一：在查询函数中提前处理响应 #

直接在useQuery的异步查询函数里取出嵌套的products并返回，这样useQuery返回的data就是目标数据：

const {
  isLoading,
  data: products,
  refetch,
} = useQuery(["products"], async () => {
  const res = await axios.get(`https://product-bazar.herokuapp.com/api/v1/public/product`);
  return res.data.products; // 直接返回嵌套的products数组
});

这种方式最简洁，后续使用products时不用再处理层级嵌套。

方法二：解构时使用嵌套语法 #

如果需要保留原始响应的其他字段，可以在解构data时直接深入到products层级，同时设置默认空对象避免未加载时的报错：

const {
  isLoading,
  data: { products } = {}, // 嵌套解构+默认空对象，防止data为undefined时报错
  refetch,
} = useQuery(["products"], () =>
  axios.get(`https://product-bazar.herokuapp.com/api/v1/public/product`)
);

这里的= {}是关键，因为在请求加载完成前data是undefined，直接解构会抛出错误，设置默认空对象就能避免这个问题。

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