Inertia deepMerge, Laravel Resource Collections & Pagination (page=NaN)

Hi all,

I’m implementing infinite scroll with Inertia.js (latest), Laravel, and the new deepMerge feature. I’m following the approach from Laracasts Inertia 2 Unleashed, Ep 5, but running into issues.

Controller:

public function index(Request $request)
{
    $data = $request->all();
    $data['user_id'] = auth()->id();

    $projects = $this->service->all($data);

    return Inertia::render('Projects/Index', [
        'projects' => Inertia::deepMerge(ProjectResource::collection($projects)),
        'filters' => $request->query(),
    ]);
}

Service:

public function all(array $data = [])
{
    // ...filters...
    return Project::query()
        ->with(['owner', 'status'])
        // ...filters...
        ->orderBy('updated_at', 'desc')
        ->paginate(5)
        ->withQueryString();
}

Vue:

<WhenVisible
    :always="!reachedEnd"
    :params="{
        only: ['projects'],
        data: {
            page: projects.current_page + 1,
        },
    }"
/>

Problem:
I get page=NaN in the URL. Using projects.meta.current_page instead of projects.current_page fixes it, since the paginator meta is under meta when using a resource collection.

However, the Laracasts course didn’t do this (but only merge existed then, not deepMerge). I’m wondering if using a resource collection is causing issues with deepMerge, as the docs say it should work with nested paginator objects.

Questions:

• Is it best to use the paginator directly with deepMerge, or can I use a resource collection?
• What’s the recommended way to get infinite scroll working with resources and deepMerge?

Any advice appreciated!