Level 102
Does it trigger the useEffect()? Put a console.log in there to check. And does it make a network request? check on the network tab
Feb 6, 2023
5
Level 2
Inertia lazy first render, with React
Hi, I am struggling to set my page to first display a "loading..." message, and then load the $products lazily as soon after the page has rendered.
On my controller I have:
public function index()
{
return Inertia::render('ProductIndexPage', [
'products' => Inertia::lazy(function () {
return Product::all();
})
]);
}
And on my page I have set it up like this:
export default function ProductIndexPage({ products }) {
useEffect(() => {
Inertia.reload({
only: ['products'],
})
}, [])
return (
<ShopLayout>
{ products === undefined ?
<p>Loading...</p>
:
<div>
{ products.map(product => (
<p>
{ product.title }
</p>
)) }
</div>
}
</ShopLayout>
)
If I visit the page, it will be stuck on "Loading..." forever, and will not load the $products. However, if I visit the page by usig an Inertia <Link /> component, I get the desired results.
How can I make it so that it loads the products simply by visiting the page?
Level 2
@Sinnbeck just checked . Yes, the console.log() inside the useEffect() triggers
Level 102
@ignaciodev Just tested it in a useEffect. Seems that version isnt set when it triggers, which makes it fail (for me a least in inertia version 1)
For me the fix is this
useEffect(() => {
setTimeout(() => {
Inertia.reload({
only: ['products'],
})
}, 0);
}, [])
1 like
Level 2
This solved the issue!! Thank you so much for always taking the to help others, much respect.
Level 102
@ignaciodev Happy to help :)
Please or to participate in this conversation.