umi-next icon indicating copy to clipboard operation
umi-next copied to clipboard

Question: route data loading and clientLoader with models

Open lilbumblebear opened this issue 2 years ago • 0 comments

Let's say I have a page that wants data for an order pages/order/[id].tsx

//pages/order/[id].tsx
export default function OrderPage() {
  const data = useClientLoaderData();
  return <div>{data}</div>;
}
 
export async function clientLoader() {
  const data = await fetch('/api/data/order/id');
  return data;
}
  1. How would I get access to the route parameters (order Id in this case) in the clientLoader function?
  2. Is there a way to call a model into the clientLoader function? ex: I want to get the order data before the page loads and I would like the order data to stay available in the model for other components to use as well.
//model/someModel.ts
export default () =>{
const { data, error, loading, run } = useRequest((orderId)=>{
        return getOrderInfo(orderId);
    },{manual: true});

return {
   run,
   data
}
}

Would I or could I....

//pages/order/[id].tsx
export default function OrderPage() {
  const {data} = useModel('someModel');
  return <div>{data}</div>;
}
 
export async function clientLoader() {
  //not sure how to get the orderId parameter?
  const {run} = useModel('someModel');
  await run(orderId);
  return {};
}

Or is there another way that is preferred?

lilbumblebear avatar Jun 22 '22 13:06 lilbumblebear