Skip to main content

Pagination

RTK Query does not include any built-in pagination behavior. However, RTK Query does make it straightforward to integrate with a standard index-based pagination API. This is the most common form of pagination that you'll need to implement.

Pagination Recipes#

Setup an endpoint to accept a page arg#

src/app/services/posts.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'interface Post {  id: number  name: string}interface ListResponse<T> {  page: number  per_page: number  total: number  total_pages: number  data: T[]}
export const api = createApi({  baseQuery: fetchBaseQuery({ baseUrl: '/' }),  endpoints: (builder) => ({    listPosts: builder.query<ListResponse<Post>, number | void>({      query: (page = 1) => `posts?page=${page}`,    }),  }),})
export const { useListPostsQuery } = api

Trigger the next page by incrementing the page state variable#

src/features/posts/PostsManager.tsx
const PostList = () => {  const [page, setPage] = useState(1);  const { data: posts, isLoading, isFetching } = useListPostsQuery(page);
  if (isLoading) {    return <div>Loading</div>;  }
  if (!posts?.data) {    return <div>No posts :(</div>;  }
  return (    <div>        {posts.data.map(({ id, title, status }) => (          <div key={id}>{title} - {status}</div>        ))}        <button onClick={() => setPage(page - 1)} isLoading={isFetching}>          Previous        </button>        <button          onClick={() => setPage(page + 1)}          isLoading={isFetching}        >         Next        </button>    <div>  );};

General Pagination Example#

In the following example, you'll see Loading on the initial query, but then as you move forward we'll use the next/previous buttons as a fetching indicator while any non-cached query is performed. When you go back, the cached data will be served instantaneously.