Fetch data only when first call was successful
Hi guys, I created 2 custom hooks to fetch Products and 2nd to fetch Categories, what i wanted to achieve is to fetch categories only when there is products data, below hooks and implementation: And usage on the page: Unfortunately categories always go first... what am I doing wrong here?
import { queryKeys } from "constants/queryKeys";
import useSnackbar from "hooks/useSnackbar";
import { useQuery } from "react-query";
import { getProducts } from "services/api/shop";
import { errorMessage } from "utils/helpers/errorMessageTitle";
const useProducts = (enabled = true) => {
const { snackError } = useSnackbar();
return useQuery(queryKeys.products, getProducts, {
onError: (error) => {
snackError(errorMessage(error));
},
enabled,
});
};
export default useProducts;import { queryKeys } from "constants/queryKeys";
import useSnackbar from "hooks/useSnackbar";
import { useQuery } from "react-query";
import { getProducts } from "services/api/shop";
import { errorMessage } from "utils/helpers/errorMessageTitle";
const useProducts = (enabled = true) => {
const { snackError } = useSnackbar();
return useQuery(queryKeys.products, getProducts, {
onError: (error) => {
snackError(errorMessage(error));
},
enabled,
});
};
export default useProducts;import { queryKeys } from "constants/queryKeys";
import useSnackbar from "hooks/useSnackbar";
import { useQuery } from "react-query";
import { getShopCategories } from "services/api/shop";
import { errorMessage } from "utils/helpers/errorMessageTitle";
const useShopCategories = () => {
const { snackError } = useSnackbar();
return useQuery(queryKeys.shopCategories, getShopCategories, {
onError: (error) => {
snackError(errorMessage(error));
},
});
};
export default useShopCategories;import { queryKeys } from "constants/queryKeys";
import useSnackbar from "hooks/useSnackbar";
import { useQuery } from "react-query";
import { getShopCategories } from "services/api/shop";
import { errorMessage } from "utils/helpers/errorMessageTitle";
const useShopCategories = () => {
const { snackError } = useSnackbar();
return useQuery(queryKeys.shopCategories, getShopCategories, {
onError: (error) => {
snackError(errorMessage(error));
},
});
};
export default useShopCategories;const ProductsFilterPage = () => {
const { data: shopCategories, refetch, isSuccess } = useShopCategories();
const { data: products } = useProducts(isSuccess);const ProductsFilterPage = () => {
const { data: shopCategories, refetch, isSuccess } = useShopCategories();
const { data: products } = useProducts(isSuccess);
