how to destructure nested data from reactQuery/useQuery in next.js/react.js

Question

const {
  isLoading,
  data: products,
  refetch,
} = useQuery(["products"], () =>
  axios.get(
    `https://product-bazar.herokuapp.com/api/v1/public/product`
  )
);

How can I destruct data from data in this query operations ex:[data?.products]

Mahfuz Rahman · Accepted Answer · 2022-09-24 09:40:41Z

1

You can destructure the nested data from responded data. But the better way to fetch data using useQuery is:

const fetchCartData = async () => {
const { data } = await axios.get(API.GET_ALL_CART_ITEMS, {
  headers: {
    Authorization: token,
  },
});
if (data?.cart_data?.Items === undefined) {
  setCartLoading(false);
  return [];
} else {
  setCartLoading(false);
  return data?.cart_data?.Items ? data?.cart_data?.Items : [];
}};

And then use useQuery to fetch data through fetchCartData() function:

 const {
isLoading,
refetch,
data: cartData,
isError,
error} = useQuery(["cartData"], () => fetchCartData());

edited Sep 24, 2022 at 9:40

answered Sep 17, 2022 at 6:36

Mahfuz Rahman

664 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to destructure nested data from reactQuery/useQuery in next.js/react.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related