Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

cdchap's avatar

Third party API and pagination

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>
0 likes
5 replies
martinbean's avatar
martinbean
5 years ago
Best Answer
Level 80

@cdchap It depends what you’re trying to achieve? What’s wrong with your current implementation? It fetches n number of records from the API, and you have a Livewire property to specify the page number.

Looking at a sample response of that API, it has pagination data like a Laravel API would (could even be a Laravel-powered API judging by the response shape), so you can build your pagination controls based on the data coming from the API. You can see how many pages they are, what page number you’re currently on, and therefore if there are any next/previous pages.

1 like
cdchap's avatar

Thanks for the reply and pointing in me in the right direction . I have never worked with an api before, only calls to a database via eloquent, which laravel makes easy to implement pagination. I look forward to recreating the controls on my own!

martinbean's avatar

No problem.

In your Livewire component, after you’ve made the API call I’d then just pull out the pagination data so you can use that to build pagination controls in your view:

class TestComponent extends Component
{
    public $search;
    public $page;
    public $records;
    public $nextPageUrl;
    public $previousPageUrl;

    public function mount()
    {
        $response = Http::get('https://api.artic.edu/api/v1/artworks/search', [
            'q' => $this->search,
            'page' => $this->page,
            'limit' => 12,
        ])->json();

        $this->records = $response['data'];
        $this->previousPageUrl = Arr::get($response, 'pagination.prev_url');
        $this->nextPageUrl = Arr::get($response, 'pagination.prev_url');
    }

    public function render()
    {
        return view('livewire.test.test-component');
    }
}

This will do the API call and then assign the items in the data key to the $records property, and assign the pagination.prev_url to the $previousPageUrl property and pagination.next_url to the $nextPageUrl property if they exist. You can then render some basic pagination controls in your view based on these variables:

<nav aria-label="pagination">
  @if($previousPageUrl)
    <a href="?page={{ $page-1 }}">Previous</a>
  @endif

  @if($nextPageUrl)
    <a href="?page={{ $page+1 }}">Next</a>
  @endif
</nav>
cdchap's avatar

Excellent examples. I certainly learned something, thank you. I think in my case since in my case the api is already giving me (small) paginated results, that I don't need to do it the collection that I created. I can use the information that comes from their api.

Cheers

Please or to participate in this conversation.