umijs / umi-next

The next version of umi. (under development)
https://next.umijs.org/
MIT License
609 stars 97 forks source link

Question: route data loading and clientLoader with models #960

Open lilbumblebear opened 2 years ago

lilbumblebear commented 2 years ago

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?