Inertia.js merge

[patie]

Inertia supports merging properties, which is used, for example, for infinite scrolling (https://inertiajs.com/merging-props).

That means my DTO for the response should look like this, because Inertia::merge() returns a MergeProp:

<?php

namespace App\Data\Client;

use Illuminate\Pagination\Paginator;
use Inertia\Inertia;
use Inertia\MergeProp;
use Spatie\LaravelData\Resource;

class ClientListResponse extends Resource
{

    private function __construct(
        MergeProp $clients,
        int       $current_page,
        bool      $has_more_pages,
    )
    {
    }

    /**
     * @param Paginator<\App\Models\Client> $paginator
     * @return self
     */
    public static function fromPaginator(Paginator $paginator): self
    {
        return new self(
            Inertia::merge($paginator->items()),
            $paginator->currentPage(),
            $paginator->hasMorePages(),
        );
    }
}

However, the problem here is that in TypeScript, clients should not be of type MergeProp (it doesn’t even have a T template annotation), but rather Client[]. Do you have any suggestions on how to handle this elegantly? Thanks.

[patie]

One of the functional ideas that comes to mind is:

Controller:

public function list()
{
    /** @var Paginator<Client> $paginator */
    $paginator = QueryBuilder::for(Client::class)->simplePaginate(10);

    return Inertia::render('Client/List', new ClientListResponse($paginator));
}

Response DTO:

<?php

namespace App\Data\Client;

use Illuminate\Contracts\Support\Arrayable;
use Illuminate\Pagination\Paginator;
use Inertia\Inertia;

readonly class ClientListResponse implements Arrayable
{
    /** @var Client[] */
    public array $clients;
    public int $current_page;
    public bool $has_more_pages;

    public function __construct(Paginator $paginator)
    {
        $this->clients = $paginator->items();
        $this->current_page = $paginator->currentPage();
        $this->has_more_pages = $paginator->hasMorePages();
    }

    public function toArray(): array
    {
        return [
            'clients' => Inertia::merge($this->clients),
            'current_page' => $this->current_page,
            'has_more_pages' => $this->has_more_pages,
        ];
    }
}

This way, the correct values are passed to Inertia.js on the JavaScript side, and TypeScript will have the correct interface. The main drawback is that there could be mistake in property names or values, since the response and the TypeScript interface aren't taken from the same source.