extended-salmon

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:

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;

And usage on the page:

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);

Unfortunately categories always go first... what am I doing wrong here?

4 Replies

automatic-azure•4y ago

Hello! I think you need to set the enabled property on the categories query. Not on the products query So when the products query is a success then that will enable the categories query to true and then it will fire

extended-salmonOP•4y ago

Thanks, but the tricky part in here is that there is a second place where I am using

const { data: sidebarShopCategories } = useShopCategories();

const { data: sidebarShopCategories } = useShopCategories();

which is CategoriesSidebar component and this sidebar is always visible (pls view the screenshot) so that makes no matter what you do categories go first...

conscious-sapphire•4y ago

I don't see the problem? You just refactor the categories hook such that it accepts an enabled parameter just like the products hook. And then you do something along the lines of:

const { data: products, isSuccess: successfullyLoadedProducts } = useProducts()

const { data: sidebarShopCategories } = useShopCategories(successfullyLoadedProducts)

const { data: products, isSuccess: successfullyLoadedProducts } = useProducts()

const { data: sidebarShopCategories } = useShopCategories(successfullyLoadedProducts)

Then the useShopCategories query will stay idle until products were successfully loaded Like, why do categories have to go first? Is it because the two different queries are used in two different components?

extended-salmonOP•4y ago

Hi @Evert and thanks for reply, the reason being I will have to make some data modification and for that purpose I need to be sure I have products and categories in one place (cause I need 2 datas), however without products data, would not be possible to make this data manipulation. Also I wanted to teach myself how dependant queries may work

Gaming

Programming

Fetch data only when first call was successful

Did you find this page helpful?