API resources don't include pagination data when passed to Inertia render

[ceejayoz]

Pagination data in API resources appears to be handled by the toResponse function of Illuminate\Http\Resources\Json\PaginatedResourceResponse.

That means this:

return Inertia::render('Foo', [
    'foo' => FooResource::collection(Foo::paginate()),
]);

gets the correctly transformed collection, but it's missing the links (and other) metadata.

I'm able to work around it by doing this:

return Inertia::render('Foo', [
    'foo' => new FooCollection(Foo::paginate()),
]);

and having FooCollection do this:

return [
    'data' => FooResource::collection($this->collection),
    'links' => $this->links()
];

but it's not as elegant as the default behavior in Laravel.

[ceejayoz]

Here's both Resource classes, @adriandmitroca.

<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\JsonResource;

class FooResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request)
    {
        return [
            'id' => $this->id,
            'name' => $this->name,
        ];
    }
}

<?php

namespace App\Http\Resources;

use Illuminate\Http\Resources\Json\ResourceCollection;

class FooCollection extends ResourceCollection
{
    /**
     * Transform the resource collection into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request)
    {
        return [
            'data' => FooResource::collection($this->collection),
            'links' => $this->links()
        ];
    }
}

Make sure you're extending ResourceCollection instead of JsonResource in the collection one.

[adriandmitroca]

Yeah, that's basically exactly what I have. Is it working for you?

[adriandmitroca]

I see the issue - Laravel returns huge object of Illuminate\Support\HtmlString with entire HTML markup for default render method in this situation rather than actual array with pagination data.

:/

[reinink]

Folks, I'm not sure if this is helpful because I haven't read through the whole discussion, but I also ran into some issues with Laravel's pagination...with is very much designed for Blade/servers-side rendering. I ended up creating my own (somewhat complex) pagination class. See here:

https://github.com/inertiajs/pingcrm/blob/a49456b323ea6082cf1958b99a1e94d68d4f2e7f/app/Providers/AppServiceProvider.php#L58-L128

You might want to try that to see if it helps in your situation.

[ceejayoz]

@reinink Ah shoot, that's probably what @adriandmitroca is missing. I forgot I borrowed that from PingCRM a while back.

I still wind up having to do the FooCollection resource workaround when passing an API resource, but that block of code is probably why $this->links() at least works for me and not @adriandmitroca. Sorry.

[adriandmitroca]

This is definitely not my day - I've already tried to borrow Jonathan's workaround and I'm triggering it within register() method in AppServiceProvider but nothing changes - still HTML.

Losing my mind :(

[ceejayoz]

@reinink So, I've done a bit of digging, and I'm able to get the FooResource::collection's links/metadata to output. In Inertia\Response:

public function toResponse($request)
{
    $props = [];
    
    foreach($this->props as $key => $prop) {
        if($prop instanceof \Illuminate\Http\Resources\Json\ResourceCollection) {
            $response = $prop->toResponse($request);
            $props[$key] = $response->getData();
        } else {
            $props[$key] = $prop;
        }
    }

    $page = [
        'component' => $this->component,
        'props' => $props,
        'url' => $request->getRequestUri(),
        'version' => $this->version,
    ];

It's not super pretty, but it does get us all the data the ResourceCollection would normally have when converted to a response.

The results:

Controller call:

return Inertia::render('Foo', [
    'foo' => FooResource::collection(Foo::paginate()),
]);

Response:

{
  "component": "Foo",
  "props": {
    "foo": {
      "data": [
        {
          "id": 1,
          "name": "Adaptive zerodefect firmware"
        },
        {
          "id": 2,
          "name": "Reduced 5thgeneration forecast"
        },
        {
          "id": 3,
          "name": "Reverse-engineered 4thgeneration architecture"
        },
        ...
      ],
      "links": {
        "first": "https:\/\/foo.test\/foo?page=1",
        "last": "https:\/\/foo.test\/foo?page=4",
        "prev": null,
        "next": "https:\/\/foo.test\/foo?page=2"
      },
      "meta": {
        "current_page": 1,
        "from": 1,
        "last_page": 4,
        "path": "https:\/\/foo.test\/foo",
        "per_page": 15,
        "to": 15,
        "total": 50
      }
    },
  },
  "url": "\/foo",
  "version": null
}

(This leaves generating the list of page links to the JS side. Something like this component would probably do the trick.)

[adriandmitroca]

@ceejayoz This looks excellent to me. @reinink do you think this could be a part of the core?

[adriandmitroca]

I've gave it further thought and unfortunately it is impossible to pass current query parameters to a pagination created on the fly by API Resources.

I guess the best way way to do it is basically what Jonathan did in PingCRM app and overwriting pagination class to own needs.

[thoresuenert]

We are using a helper function for it:

/**
 * Gather the meta data for the response.
 *
 * @param  LengthAwarePaginator  $paginated
 * @return array
 */
function pagination($paginated)
{
    return [
        'current' => $paginated->currentPage(),
        'last' => $paginated->lastPage(),
        'base' => $paginated->url(1),
        'next' => $paginated->nextPageUrl(),
        'prev' => $paginated->previousPageUrl()
    ];
}

example of usage:

return Inertia::render('Foo', [
    'foo' => FooResource::collection(Foo::paginate()),
    'pagination' => pagination($foos),
]);

[njoguamos]

We are using a custom pagination vue components and this is how we have implemented

public function index()
{
    return Inertia::render('Users/Index', [
        'users' => new UserCollection(User::paginate(10))
    ]);
}

class UserCollection extends ResourceCollection
{
    /**
     * The resource that this resource collects.
     *
     * @var string
     */
    public $collects = UserResource::class;

    /**
     * Transform the resource collection into an array.
     *
     * @param \Illuminate\Http\Request $request
     *
     * @return array
     */
    public function toArray($request) {
        return [
            'data'       => $this->collection,
            'pagination' => [
                'size' => $this->perPage(),
                'total' => $this->total(),
                'current' => $this->currentPage(),
                // customise your pagination here
                // https://laravel.com/docs/5.8/pagination#paginator-instance-methods
            ],
        ];
    }
}

class UserResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param \Illuminate\Http\Request $request
     *
     * @return array
     */
    public function toArray($request) {
        return [
            'id'       => $this->id,
            'name'    => $this->name,
            'email'   => $this->email,
            'profile'  => new ProfileResource($this->whenLoaded('profile'))
        ];
    }
}

And then we accept the user props

[reinink]

Hey folks! I think this is probably best left out of this adapter. There seems to be different ways to solve this (admittedly) annoying problem. The whole issue is that the current links() functionality in Laravel returns HTML directly, and not JSON.

I hope to eventually make a PR to Laravel that adds jsonLinks(), or something like that, to the pagination class.

And, I think either way you're going to need to a pagination component on the front-end. However, that's pretty easy to put together. You can see the Ping CRM one here.

[reinink]

I've added support for "Responsable" props: 2b966ac

This will cause the additional resource information (ie. pagination data) to be included with your responses.

I've tested this with both single resource responses and collection resource responses, and it works great. 👍