Laravel Livewire Pagination Result Disappear After Clicking Next Page/Page Number - laravel

Question

i've been searching for a question like the one above but i can't find one, so i'm gonna make one
My problem is, when i make a very simple pagination with Laravel Livewire, the first page appear just fine, but when i click "Next Page/Page Number", the result just disappear, even though there are still more results to show, i'm absolutely got no idea, no mattter how i try.
As you can see, the simple pagination work just fine, there is next and previous button and a very big next and previous picture below
But the moment i click next page or page number, the result just disappear, the total number of result even go to 0
Here is my Component code:
namespace App\Http\Livewire;
use Livewire\Component;
use Illuminate\Http\Request;
use DB;
use Livewire\WithPagination;
class Category extends Component
{
use WithPagination;
public function render(Request $request)
{
$id = $request->id;
$product_count = DB::table('product')->where('category_id', $id)->count();
$page = $request->page ?? 1;
$product_all = DB::table('product')->where('category_id', $id)->paginate(3);
return view('livewire.category',[
'product_all' => $product_all,
'product_count' => $product_count,
'page' => $page,
]);
}
}
Here is my view code:
<div class="row">
#foreach ($product_all as $product)
<div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
#php
product($product);
#endphp
</div>
#endforeach
<!-- PAGINATION START -->
#if ($product_all instanceof \Illuminate\Pagination\LengthAwarePaginator)
{{ $product_all->links() }}
#endif
<!-- PAGINATION END -->
</div>
And a small notice, i try pagination(just normal laravel pagination) without livewire and it work perfectly fine, that's why i am really clueless of what is happening
I have already include the livewire #livewireStyles and #livewireScripts, and i can't find an answer anywhere else cause i don't see any question that match my problem, and i'm kinda new to livewire

Answer 1

I think your problems is related with the request parameter on the render method of the livewire component, once livewire on rerender can't access the request value, until next browser refresh.
public function render(Request $request)
instead, use livewire properties to bind the id and page with values livewire can read on rerenders
#livewire('some-component', ['category_id' => $parent_category_id, 'page' => $parent_page_value])
Like above, livewire bind this values to self properties and read from them on rerender
public $category_id, $page;
public function render()
{
$product_count = DB::table('product')->where('category_id', $this->category_id)->count();
$product_all = DB::table('product')->where('category_id', $this->category_id)->paginate(3);
return view('livewire.category',[
'product_all' => $product_all,
'product_count' => $product_count,
'page' => $this->page,
]);
}