Skip to main content

useInfiniteQuery

info
  • Your procedure needs to accept a cursor input of any type
  • For more details on infinite queries read the react-query docs
  • In this example we're using Prisma - see their docs on cursor-based pagination

Example Procedure#

import * as trpc from '@trpc/server';import { Context } from './[trpc]';
trpc.router<Context>()  .query('infinitePosts', {    input: z.object({      limit: z.number().min(1).max(100).nullish(),      cursor: z.number().nullish(), // <-- "cursor" needs to exist, but can be any type    }),    async resolve({ input }) {      const limit = input.limit ?? 50;      const { cursor } = input;      const items = await prisma.post.findMany({        take: limit + 1, // get an extra item at the end which we'll use as next cursor        where: {          title: {            contains: 'Prisma' /* Optional filter */,          },        },        cursor: cursor ? { myCursor: cursor } : undefined,        orderBy: {          myCursor: 'asc',        },      })      let nextCursor: typeof cursor | null = null;      if (items.length > limit) {        const nextItem = items.pop()        nextCursor = nextItem!.myCursor;      }
      return {        items,        nextCursor,      };    })

Example React Component#

import { trpc } from '../utils/trpc';
function MyComponent() {  const myQuery = trpc.useInfiniteQuery(    [      'infinitePosts',      {        limit: 10,      },    ],    {      getNextPageParam: (lastPage) => lastPage.nextCursor,    },  );  // [...]}