Populating drop downs with large (dynamic) datasets

[mattkingshott]

I’m curious as to how people are doing this...

Imagine a form with a “ship to” drop down containing a list of countries. This list is updated based on dynamic data sent in the request.

In Laravel / Blade I would just echo out the contents of the customised PHP array.

It doesn’t feel right to attach a big php arrays (or even more than one) to the inertia response. Likewise, having one or multiple API requests to fetch the arrays doesn’t seem like the best approach either (particularly if the customisation is not easily repeatable on separate API requests).

Technically this isn’t an Inertia problem since the issue is down to us not having PHP to render the content, but I’m curious about a best practice to get big blocks of data to the front end.

Thoughts?

[ajnsn]

@mattkingshott Afaik there's no real issue passing large data with the initial page load. If the initial page load slows down the app, I often use lazy data evaluation. Please take a look at the Lazy data evaluation of the documentation, e.g. the example with lazily loading users with Laravel:

return Inertia::render('Users/Index', [
    // NEVER included on first visit
    // OPTIONALLY included on partial reloads
    // ONLY evaluated when needed
    'users' => Inertia::lazy(fn () => User::get()),
]);

When using Vue, you could load these users after the initial page load, like so:

this.$inertia.get('/users', {}, {
    preserveScroll: true,
    preserveState: true,
    only: ['users'],
});

{} could also include some query parameters, e.g. filtering the query.

You can also use an asynchronous xhr/fetch request instead. It works pretty well alongside Inertia.

Hope this helps!

[reinink]

Excellent answer, and that's what I would say as well. Personally, I have zero issues sending a bunch of dropdown data along with the initial request, and then using partial reloads if needed when updating that page (to not fetch that same data again), or, inversely, not including the dropdown data on initial load (using lazy data evaluation), and then fetching it using a partial reload when you do it need it.

And yes, you can totally use xhr/fetch here as well, nothing wrong with that either. But it does mean creating new JSON endpoints, which I'm not a big fan of. I'd rather just stick to Inertia as much as possible. 👍

[mattkingshott]

Great! Thank you for the informative answers :)