other-emerald•8mo ago

How to load multiple resources in parallel in master detail resources

I have an api where resources are organized hierarchically, I want to build sane breadcrumbs with proper links and text labels of the parent resources, but I need to load those resources first: I am doing something like this

  const { id, resource } = useResource();
  const match = useMatch(`${resource?.list}`);
  const customer_id = match?.params.customer_id ?? "";
  const product_id = match?.params.product_id ?? "";
  const meta = useMemo(
    () => ({
      customer_id,
      product_id,
    }),
    [customer_id, product_id]
  );

  const { data: customer, isLoading: customerIsLoading } = useOne({
    resource: "customers",
    id: customer_id,
  });

  const { data: product, isLoading: productIsLoading } = useOne({
    resource: "products",
    id: product_id,
  });

  const { id, resource } = useResource();
  const match = useMatch(`${resource?.list}`);
  const customer_id = match?.params.customer_id ?? "";
  const product_id = match?.params.product_id ?? "";
  const meta = useMemo(
    () => ({
      customer_id,
      product_id,
    }),
    [customer_id, product_id]
  );

  const { data: customer, isLoading: customerIsLoading } = useOne({
    resource: "customers",
    id: customer_id,
  });

  const { data: product, isLoading: productIsLoading } = useOne({
    resource: "products",
    id: product_id,
  });

- Can I more elegantly extract parameters from the current route /products/:product_id:/customers/:customer_id/:roles/:id ? - Can I load in parallel instead of multiple useOne, using something like this https://tanstack.com/query/v4/docs/framework/react/guides/parallel-queries I could try to build an useResources, but I need to replicate same actions that useOne is doing ?

2 Replies

kapa.ai•8mo ago

Hi @i.stoica. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To extract parameters from the current route more elegantly, you can use the useParsed hook provided by Refine. This hook allows you to parse the current URL and extract the parameters. Here is an example:

import { useShow, useParsed } from "@refinedev/core";  
  
const { id, product_id, customer_id } = useParsed();  
  
useShow({  
 resource: "custom-resource",  
 id,  
});

import { useShow, useParsed } from "@refinedev/core";  
  
const { id, product_id, customer_id } = useParsed();  
  
useShow({  
 resource: "custom-resource",  
 id,  
});

Source: Refine Documentation (https://refine.dev/docs/data/hooks/use-show#resource) As for loading multiple resources in parallel, Refine's useOne hook is an extended version of TanStack Query's useQuery that supports all of its features. Therefore, you can use the useQueries function from TanStack Query to fetch multiple resources in parallel. However, please note that this approach might require additional configuration and error handling. Unfortunately, the provided extracts do not contain a specific example of using useQueries with Refine's useOne hook. For more detailed information, you might want to refer to the Refine Documentation (https://refine.dev/docs/data/hooks/use-one) and the TanStack Query Documentation (https://tanstack.com/query/v4/docs/react/reference/useQueries). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@180601470268211200> kapa.ai is still learning and improving, please let us know how it did by reacting below