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]

Answer 1

You can destruct the nested data from response data. example given below:

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