Incorrect and insufficient documentation related to implementing merging props in laravel 11 + Inertia js + React

[mani-hash]

Description

The documentation in Merging props is incorrect for server side implementation and also contains insufficient documentation for client side implementation (in react)

Software Info

• Laravel 11
• Inertia Js 2
• React 18.3 (typescript)

Incorrect Code

Here are the 2 types of laravel code given for implementing merging props

• Without defer props

Route::get('/users', function () {
    $page = request()->input('page', 1);
    $per_page = request()->input('per_page', 10);

    return Inertia::render('Users/Index', [
        'results' => Inertia::merge(User::paginate($page, $per_page)),
    ]);
});

• With Defer props

Route::get('/users', function () {
    $page = request()->input('page', 1);
    $per_page = request()->input('per_page', 10);

    return Inertia::render('Users/Index', [
        'results' => Inertia::defer(fn() => User::paginate($page, $per_page))->merge(),
    ]);
});

The main problem with the above code is incorrect use of paginate() method! Paginate only accepts one argument and it is the $per_page argument. Passing 2 is incorrect and results in an error.

Insufficient documentation

The documentation is not clear on how to actually use the merged props partly due to the above incorrect code and secondly due to not enough documentation for react especially when handling defered props

Here is the code from website

import { Deferred } from '@inertiajs/react'

export default () => (
    <Deferred data="permissions" fallback={<div>Loading...</div>}>
        <PermissionsChildComponent />
    </Deferred>
)

This is unclear and does not really help anyone reading documentation. Improved documentation would be something like this:

Improved version

import { Deferred } from '@inertiajs/react'

function PermissionsChildComponent() {
    const { permissions } = usePage().props;
    return (
        <div>
            {permissions && permissions.type}
        </div>
    );
}

export default () => (
    <Deferred data="permissions" fallback={<div>Loading...</div>}>
        <PermissionsChildComponent />
    </Deferred>
)

Tldr

Unable to implement merged props in laravel + inertia js + react webapp due to incorrect and insufficient documentation