Paginated Results
This guide explains hot to handle paginated results in Lens.
Lens API uses cursor-based pagination to navigate through lists of results. This is crucial for both performance and user experience, as it allows the API to return only the data required at a given time.
Paginated Responses
- TypeScript
- GraphQL
With T representing the item type being queried, all paginated queries yield a Paginated<T> object:
Paginated<T>
type Paginated<T> = { items: readonly T[]; pageInfo: PaginatedResultInfo;};where items contains the current page of results and pageInfo contains information about the pagination state:
- TypeScript
- GraphQL
PaginatedResultInfo
type PaginatedResultInfo = { prev: Cursor | null; next: Cursor | null;};The Cursor type is an opaque scalar that can be used to fetch a different page of results.
Paginated Requests
All paginated queries accepts two optional parameters: pageSize and cursor.
- TypeScript
- GraphQL
where
pageSize determines the number of items to return per page.
cursor is the value of the next or prev field from a previous response.
The meaning of prev and next depends on the query and the sorting order. For example, when sorting by creation date with most recent first, prev will return newer items and next will return older items.
Examples
Let's use an example to illustrate how to handle paginated results.
- TypeScript
- GraphQL
- React
Let's say you want to fetch the paginated posts by a specific author:
posts.ts
import { evmAddress } from "@lens-protocol/client";import { fetchPosts } from "@lens-protocol/client/actions";
const page1 = await fetchPosts(sessionClient, { filter: { authors: [evmAddress("0x1234…")], }, pageSize: PageSize.FIFTY,});
if (page1.isErr()) { return console.error(page1.error);}
const { items, pageInfo } = page1.value;The result value will contain the first page of posts and a pageInfo.next cursor:
- TypeScript
- GraphQL
- React
Use the pageInfo.next cursor to fetch the next page of posts:
posts.ts
const page2 = await fetchPosts(sessionClient, { filter: { authors: [evmAddress("0x1234…")], }, pageSize: PageSize.FIFTY, cursor: page1.pageInfo.next,});Remember to retain the same search criteria and pageSize of the initial query when fetching subsequent pages.
That's it—you can apply the same approach to any paginated query in Lens.