Pagination

RTK Query makes 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.

Setup an endpoint to accept a page `arg`

src/app/services/posts.ts

import { createApi, fetchBaseQuery } from "@rtk-incubator/rtk-query";

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>
  );
};

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.

Pagination#

Setup an endpoint to accept a page arg#

Trigger the next page by incrementing the page state variable#

Example#

Pagination

Setup an endpoint to accept a page `arg`

Trigger the next page by incrementing the `page` state variable

Example