umi-next
umi-next copied to clipboard
Question: route data loading and clientLoader with models
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;
}
- How would I get access to the route parameters (order Id in this case) in the clientLoader function?
- 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?