Third Party API and Pagination

#1

I have a component that makes a call to a third party API end point. Then I turn the response into a collection to use in the view.

It works, but it doesn’t feel right. I have not worked out how I would handle pagination either. I don’t want to build all that out if I am going down the wrong path. Any advice would be appreciated.

Cheers!

TestComponent

class TestComponent extends Component
{

    public $search;
    public $aicUrl = 'https://api.artic.edu/api/v1/artworks/';
    public $page;

    public function render()
    {
        return view('livewire.test.test-component', [
                'data' => collect(Http::get(
                                    $this->aicUrl . 
                                    'search/?q=' . $this->search . 
                                    '&page=' . $this->page .
                                    '&limit=12')
                            ->json())
            ]
        );
    }
}

And the view test-component

<div>

    <input wire:model="search" type="text" class="border border-black">
    
    <div>
        @isset($data['data'])
            @foreach ($data['data'] as $art)
                <div class="shadow rounded-2xl px-4 py-6 bg-white">
                    <h3>{{ $art['title'] }}</h3>
                </div>
            @endforeach
        @endisset
    </div>