Skip to main content

Black Friday 2025! Only until December 1st: coupon FRIDAY25 for 40% off Yearly/Lifetime membership!

Read more here

Data Pagination via API

Premium
3:04

Let's talk about pagination for products. Now, on the home page, we have all the products loaded, which, in this case, is twenty products. But in the real world, shops could have hundreds and thousands of products. So we need to paginate them.


In a regular Laravel project, instead of using get(), you would use paginate().

app/Http/Controllers/Api/ProductController.php:

class ProductController extends Controller
{
public function index()
{
$products = Product::with('category')->get();
$products = Product::with('category')->paginate(9);
 
return ProductResource::collection($products);
}
}

And in the Blade, you would do $products->links(), and it would generate the pagination with links.

But in the API, we work only with the data. How do we tell the frontend the links for the pagination, how many records are there, how many pages, and what the next and previous pages are? When using Resources and returning a collection, Laravel handle...

The Full Lesson is Only for Premium Members

Want to access all of our courses? (31 h 16 min)

You also get:

55 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

M
M ✓ Link copied!

The line colour of code should be green not red:

    await fetch(`http://api.test/api/products?page=${page}`)

Also, watch out for the backticks: ` (that caught me out not coming from Vue)

M
Modestas ✓ Link copied!

It is green, at least when I search for that specific line - it's green :)

Previous call is red, and this one is green as we added additional parameter