Link headers pagination in Flutter

#flutter #dart #api #frontend

Pagination is a common technique used in web development to improve the performance of APIs and user experience when dealing with large amounts of data.

What is link headers pagination ?

Link headers pagination is one of the popular pagination methods used in APIs. In this article, we will discuss link headers pagination in Dart when building an app that works with APIs.

Link headers pagination is a pagination method that is used to split a large amount of data into smaller portions that can be easily retrieved. This method uses HTTP link headers to provide information about the next and previous pages of data. In this way, clients can retrieve only the data they need, reducing the load on the server and improving performance.

How to make it in Flutter app ?

When building an app that works with APIs, link headers pagination can be implemented in Dart using the http_pagination package.

This package provides a easy headers parsing from the box.

Make an initial HTTP request to the API to retrieve the first page of data. The response should contain a Link header that includes information about the next page of data.

import 'package:http/http.dart' as http;

final response = await http.get('https://example.com/api/data');
final headers = response.headers;

Parse the Link header to extract the URL of the next page of data. The Link header can contain a URLs with a rel attribute set to "first", "next", "prev", "last".

This URLs can be used as links for getting next page.
But what we should do if we work with API froms our service or repository with writted method like in example bellow ?

final listData = await somethingRepository.getData(page: 2, perPage: 10);

Using http_pagination package

Install http_pagination in your pubspec.yaml file

dependencies:
  http_pagination: ^0.2.0

And add this simple code line after your api call

import 'package:http/http.dart' as http;

final response = await http.get('https://example.com/api/data');
final pagination = PagesPagination.fromHeaders(response.headers);

PagesPagination contains int fields [first, next, prev. last]
And you can use any of this fileds to send as current loading page in your api call.

Working with GitHub api example

import 'package:http_pagination/http_pagination.dart';

final headers = {
  'link': [
    '<https://api.github.com/user/9287/repos?page=3&per_page=100>; rel="next", ' +
    '<https://api.github.com/user/9287/repos?page=1&per_page=100>; rel="prev", ' +
    '<https://api.github.com/user/9287/repos?page=5&per_page=100>; rel="last"'
  ],
};
final pagination = PagesPagination.fromHeaders(headers);
print(pagination); // PagesPagination(first: null, next: 3, prev: 1, last: 5)

Make a new HTTP request to the URL of the next page of data. Repeat steps 2 and 3 until there are no more pages of data to retrieve.

Cursor and Pages(offset) pagination

CursorPagination is another pagination style with same logic.
Link types is only one difference for cliend side code.

Cursor typed pagination client recive links with String id of next or last content when Pages(offset) pagination recive int index of next or last pages

Cursor pagination example

import 'package:http_pagination/http_pagination.dart';

final headers = {
  'link': [
    '<http://example.com/items?cursor=a>; rel="first", ' +
    '<http://example.com/items?cursor=b>; rel="next", ' +
    '<http://example.com/items?cursor=c>; rel="prev", ' +
    '<http://example.com/items?cursor=d>; rel="last"',
  ],
};

final pagination = CursorPagination.fromHeaders(headers);
print(pagination); // CursorPagination(first: a, next: b, prev: c, last: d)

Link headers pagination is a powerful technique that can help improve the performance of your app when working with APIs that return large amounts of data. By splitting the data into smaller portions and providing information about the next and previous pages of data, clients can retrieve only the data they need, reducing the load on the server and improving performance.