Livewire: Wrong pagination link for a list that just got paginated

[mokhosh]

I've set pagination count to 10. I have 10 items in my list. I create another item and the pagination links show up but with wrong links (it's the route name). Is it only me or has this happened to anyone else?

[GertjanRoke]

Did you also add the trait to you component class?

use WithPagination;

Because that should replace the Laravel pagination links with the Livewire version.

[mokhosh]

Of course, how else would I get the links in the first place?

[GertjanRoke]

Your variable name and call the links method:

<div class="container">
    @foreach ($users as $user)
        {{ $user->name }}
    @endforeach
</div>

{{ $users->links() }}

And then your done.

[mokhosh]

@GertjanRoke Thanks for taking the time, but I have the links. Everything works just fine. The only problem is when I add the single item that makes the query builder start paginating the results, that's when I get incorrect link hrefs.

[GertjanRoke]

I would love to help you but then I need some code to see the thing you’re trying to solve.

[alexjustesen]

I'm having the same issue, latest version of Laravel 6.18 and Livewire 1.0.1.

Use in livewire view:

@ foreach($foo as $bar)
    ...
@ endforeach

$foo->links();

User in livewire component:

use Livewire\Component;
use Livewire\WithPagination;

use App\Foo;

class fooTable extends Component
{
    use WithPagination;

    public function render() {
        $collection = Foo::query()
            ->when($search, function($query, $search) {
                return $query->where('name', 'like', '%'. $this->search .'%';
            )};
            ->paginate(10);

        return view('livewire.foo-table', ['foo' => $collection]);
    }
}

My pagination view is the standard Laravel pagination view updated to use Tailwind UI.

[GertjanRoke]

Apart from some typos in your example I don’t see anything wrong.. I will try to reproduce it.

[GertjanRoke]

Hmm.. works fine for me with Laravel 6.18 and Livewire 1.0.1
This is how it looks like:

Model:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Foo extends Model
{
    protected $guarded = [];
}

Component:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Foo as FooModel;
use Livewire\WithPagination;

class Foo extends Component
{
    use WithPagination;

    /**
     * @var string
     */
    public $search = '';

    /**
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
     */
    public function render()
    {
        $collection = FooModel::query()
            ->when($this->search, function($query) {
                return $query->where('name', 'like', '%'. $this->search .'%');
            })
            ->paginate(10);

        return view('livewire.foo', [
            'foo' => $collection
        ]);
    }
}

View:

<div>
    <input type="text" wire:model="search">

    @foreach($foo as $bar)
        <li>{{ $bar->name }}</li>
    @endforeach

    {{ $foo->links() }}
</div>

So if you have done it like this and it still isn't, I think you should try to dump($collection) and slowly debug what is going wrong.

[alexjustesen]

Did a dump of the collection this morning, in the options I'm getting a livewire message path instead of the expect page.

#options: array:2 [▼
    "path" => "http://127.0.0.1:8080/livewire/message/foo-table"
    "pageName" => "page"
  ]

[GertjanRoke]

@alexjustesen hmm.. strange, it shows the page where the components are shown for me, is it maybe something you changed to the pagination view or did you add something to the ->links() method?

If you would like to share that, I think the problem is maybe somewhere there, because you both said you had custom view for the pagination.

[mokhosh]

Same. This is the url that my pagination links have:

/livewire/message/admin.episodes?page=1

I also get this bug when I do something that causes a livewire back-and-forth on a paginated page. The links get messed up.

[alexjustesen]

I whipped up a quick repo to show the error, it can be found here: https://github.com/alexjustesen/livewire-pagination-error

Edit: Adding WithPagination does work, without that class I do see the error. I'm going back to more testing as I've got WithPagination in a private project I'm still seeing the error.

[alexjustesen]

After more digging, looks like the issue comes up with overriding the pagination view, I've updated the repo to show the error.

[alexjustesen]

This issue was also reported in #420

[GertjanRoke]

Hey Alex, I was just looking at the pagination view you wanted to use and that is the problem.
Your using the normal http links instead of the wire:click function Livewire uses in there own view.

Take a close look to this file and compare the way the next and prev links work in this view compared with yours:

https://github.com/livewire/livewire/blob/master/src/views/pagination-links.blade.php

[verdenkaf]

@GertjanRoke

Thanks, was missing the wire:click as well, fully working with custom views now.

[GertjanRoke]

@mokhosh I'm just playing around with Livewire some more and I maybe ran into the same issue you have.

Do you use the $this->fill([...]) method inside your component?

[dave-alvarez]

@GertjanRoke @mokhosh The WithPagination Trait and pagination-links blade view use wire:click buttons calling its methods nextPage(), previousPage() and gotoPage() in place of the normal $paginator->nextPageUrl() type of URL generation.

Any pagination requests beyond the initial page load will now show the Livewire XHR request URLs if you try to use Laravel's paginator URL methods or something like the url() helper.

Because I'm adding some SEO-friendly link types for prev, next and canonical, what I'm doing for the time being is passing the route name to the Livewire pagination view generator:

{{ $results->links('my-pagination-blade-view', ['routeName' => 'my-route-name']) }}

Then in my own pagination blade view, I'm using this, which is inserted in the head of the page layout:

@if ($paginator->hasPages())

<link rel="canonical" href="{{ route($routeName) }}">

@unless ($paginator->onFirstPage())
<link rel="prev" href="{{ route($routeName, ['page' => $paginator->currentPage() - 1]) }}">
@endunless

@if ($paginator->hasMorePages())
<link rel="next" href="{{ route($routeName, ['page' => $paginator->currentPage() + 1]) }}">
@endif

@endif

[mokhosh]

@mokhosh I'm just playing around with Livewire some more and I maybe ran into the same issue you have.

Do you use the $this->fill([...]) method inside your component?

I do.

My components have gotten very complex by now. I have an abstract Livewire component that almost uses all of Livewire's features, then I have little components that inherit from that abstract component.

But the link you sent actually solved my problem:
https://github.com/livewire/livewire/blob/master/src/views/pagination-links.blade.php

I changed the default tailwind pagination views to use wire:click and everything is working so far.

@GertjanRoke I'm interested in seeing what's causing you the same issue even though you're using wire:click. Please share some details.

[jetwes]

I have a strange behaviour here (livewire 1.0.12, even with the default livewire pagination): After clicking on a pagination link the same page is loaded, only after clicking a second time on the same link the correct page is loaded... any suggestions?

[johncarter-]

If anyone needs the default vendor Laravel Tailwind pagination in Livewire format, I made a gist: https://gist.github.com/johncarter-/122c7135e8923949e455c3c480fee2df