Infinite Queries

Implement pagination and infinite scroll patterns with RTK Query.

25 min

2 sections

pagination

infinite-scroll

queries

01. Use build.infiniteQuery

Section 1 of 2

RTK Query has a first-class infinite query API. Use it when the cache represents multiple pages for one logical list, such as an enterprise ticket queue or audit-event feed.

typescript

type Ticket = {
  id: string;
  subject: string;
  updatedAt: string;
};

type TicketPage = {
  items: Ticket[];
  nextCursor?: string;
};

export const supportApi = createApi({
  reducerPath: 'supportApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (builder) => ({
    getTicketQueue: builder.infiniteQuery<
      TicketPage,
      { orgId: string; queueId: string },
      string | undefined
    >({
      infiniteQueryOptions: {
        initialPageParam: undefined,
        getNextPageParam: (lastPage) => lastPage.nextCursor,
      },
      query({ queryArg, pageParam }) {
        const params = new URLSearchParams({
          orgId: queryArg.orgId,
          queueId: queryArg.queueId,
        });
        if (pageParam) params.set('cursor', pageParam);
        return `/tickets?${params.toString()}`;
      },
    }),
  }),
});

Error Handling

Optimistic Updates

Back to Course