Discussion around InertiaJS

@tykus Yes a page can contain components.

I explain what I mean : InertiaJS can load pages and not components. If I want to send the datas from the back to the front via InertiaJS, I lose the component approach because I need to load all the data into the page.

But if I use InertiaJS just to load a page (without sending any data), then I can use any VueJS component and I will retrieve the data for these components via some API endpoints (independently from InertiaJS).

I don't think so, but perhaps it's also possible with InertiaJS (I don't know InertiaJS well yet).

@vincent15000 you can request Partial reloads or, if that is not enough, you still can make non-Inertia XHR requests where you are in complete control.

@tykus Yes I understand.

For example I need to load a a table with datas and some select/options fields to filter the datas in the table.

But these select/options fields can also be used in another view.

Using pure InertiaJS, I would need to send the data for the table AND the data for the select/options fields.

Whereas it would be more efficient to send the data only for the table and import the select/options components that will retrieve their datas by their own.

The advantage to have independant components is that I can use them and move them anywhere I need in any view without having to modify any code in my backend. So my views become independant from the controllers. Whereas with InertiaJS the views and the controllers are dependant.

@vincent15000 maybe I am misunderstanding.

I would need to send the data for the table AND the data for the select/options fields

I don't know that I agree with this assessment - individual components can fetch their own data when mounted if that's what you want.

import the select/options components that will retrieve their datas by their own.

You can still do that if you want - it's just Vue.

@tykus But if I use independant components that retrieve their own datas, it's not necessary to send them via InertiaJS rendering. Then I just have to use InertiaJS to load the pages with its independant components. Then the InertiaJS partial reload is not necessary anymore because each component retrieves its own datas.

@vincent15000 up to you to decide the best strategy for independent component data-fetching. Personally, I would lean on the Inertia page mostly, simply because a Page then requires minimal requests. If every component is making independent requests, the experience will likely suffer. Also, whenever the Page re-renders, you need to be careful that the Component's are not re-fetching their data unnecessarily.

One example where I have a Component on the page but making an independent request is a Stats component which requires an expensive query - which would slow down the main Page if its data was included in that payload.

@tykus Well effectively I have to study the best strategy according to each page.

@vincent15000 yes. For the most part, I suspect the full Inertia response will be sufficient, except where it would put an unnecessary heavy workload on the server. For example, a partial reload of a small resource is preferable to a full page reload with a massive Collection.

I would never expect there is one way to suit every circumstance

@tykus @sinnbeck Here are two concrete examples.

Example 1

A form to create/edit a model with 4 fields : a name (text), a category (select/options), a type (select/options) and a state (select/options).

I think that I have no other way that doing 1 request to retrieve the model (name, category_id, type_id, state_id) and 3 other requests to retrieve the categories list, the types list and the states list.

Is there a difference between these two ways to retrieve all datas ?

• InertiaJS : 4 database requests and then I send the datas to the page via the InertiaJS render method

• InertiaJS : no request, I just load the page and then each component (form, select/options fields) retrieve its own datas via the API

Example 2

A page with the student identity card, some stats about the courses and the list of the meetings with the coach.

I can retrieve the data like this :

• student with eager loading of the meetings, but this won't allow me to partial reload only the meetings with InertiaJS or is it possible ?

• student datas, stats, meetings in separate requests, then I can partial reload with InertiaJS, but then it's perhaps the same scenario as if I don't send any data and each component (student sheet, stats, meetings) retrieve their own data via the API

Sure I misunderstand some part of InertiaJS.

Can you suggest me some way to retrieve the datas for these two examples using InertiaJS and/or VueJS/axios ?

Thanks ;).

@vincent15000 Ok lets take each example.

1. This sounds just like a regular page, and is what inertia is built for. Just do those 4 requests in the controller and send them to the page. Now either pass dont the data to each component, or use usePage in each component. I have tons of pages like this in my app, and do it this way :) No need to get the data using ajax inside a component.

2. Sounds a bit like the same scenario? 1 database request for each part. And if you need to update the meeting you can simply do a "reload" of the page with only: ['meetings'] and preserveState: true to keep the state of the page and just swap in the updated meetings data. Just remember to use functions for all data in the controller

@Sinnbeck So you would for example have a code like this one ?

public function show(Student $student)
{

    $sessions = Session::where('student_id', $student->id)->get();
    $states = State::orderBy('name')->get();
    $stats = [];
    foreach ($states as $state) {
        $stats[] = [
            'label' => $state->name,
            'count' => $sessions->where('state_id', $state->id)->count(),
            'color' => $state->color,
        ];
    }
    // return json_encode($stats);

    return Inertia::render('Students/Show', [
        'student' => fn () => new StudentResource($student->fresh()),
        'sessions' => fn () => SessionResource::collection(Session::
            with('student')
            ->with('funding')
            ->with('path')
            ->with('project')
            ->with('level')
            ->with('type')
            ->with('state')
            ->where('student_id', $student->id)
            ->orderByDesc('date')
            ->get()),
        'stats' => fn () => $stats
    ]);

}

Or like this one ?

    return Inertia::render('Students/Show', [
        'student' => fn () => new StudentResource($student), // for the student properties
        'types' => fn () => Type::orderBy('name')->get(), // for a select/options field
        'categories' => fn () => Category::orderBy('name')->get(), // for a select/options field
        'states' => fn () => State::orderBy('name')->get(), // for a select/options field
    ]);

@vincent15000 The code at the top of the controller I would move inside a closure in the return as well. Otherwire it will be run on every request, even if you use only

'stats' => function() use ($student) {
    $sessions = Session::where('student_id', $student->id)->get();
    $states = State::orderBy('name')->get();
    $stats = [];
    foreach ($states as $state) {
        $stats[] = [
            'label' => $state->name,
            'count' => $sessions->where('state_id', $state->id)->count(),
            'color' => $state->color,
        ];
    }
    return $stats;
}

And I would optimize that code a bit, but that is beyond the scope of this post :)

@Sinnbeck Ok thank you. Yes effectively the code for the stats could be optimized. I don't mind having an advice to optimize it. I create another post for that.

@tykus @sinnbeck I just tested like you suggested me and ... really ... it's really really better, it loads faster, the UX is also better, ... with InertiaJS when I retrieve all my datas in the controller and then pass them to the view via the InertiaJS render method.

And it's not so good when each component retrieves its own datas via its own requests.

Well ... thank you very much to have driven me to better undertand what could be good or less good with InertiaJS.

I really don't know who can receive the best answer, you have both helped me with very good advices. It would perhaps be a good idea to allow to put the best answer to two users ;).

@Sinnbeck I don't have any special app, it was just an example because I want to understand how InertiaJS can work. I test InertiaJS on a personal app already developed with pure VueJS (front) and Laravel (back) and I have some select/options components that are used in 3 or 4 different views (dashboard, form1, form2, ...).

@Sinnbeck Perhaps I like to do the comparison with Livewire where I have created some select/options components that I just need to put in whatever view I need to use it, without having to worry about the datas to retrieve for these components.

@vincent15000 I can see get that comparison, but in that scenario inertia is blade and vue+ajax is livewire :)