Demo code `trpc.infinitePosts.add` on infinitedQuery not working

Doc here: https://trpc.io/docs/useInfiniteQuery#getinfinitedata, I created an my query like this:
infinitePosts: protectedProcedure
.input(
z.object({
limit: z.number().min(1).max(100).nullish(),
cursor: z.string().nullish(), // <-- "cursor" needs to exist, but can be any type
})
)
.query(async ({ ctx, input }) => {
const limit = input.limit ?? 20;
const { cursor } = input;
const items = await ctx.prisma.post.findMany({
take: limit + 1, // get an extra item at the end which we'll use as next cursor
cursor: cursor ? { id: cursor } : undefined,
orderBy: {
updatedAt: 'asc',
},
});
let nextCursor: typeof cursor | undefined = undefined;
if (items.length > limit) {
const nextItem = items.pop();
nextCursor = nextItem!.id;
}
return {
items,
nextCursor,
};
}),
infinitePosts: protectedProcedure
.input(
z.object({
limit: z.number().min(1).max(100).nullish(),
cursor: z.string().nullish(), // <-- "cursor" needs to exist, but can be any type
})
)
.query(async ({ ctx, input }) => {
const limit = input.limit ?? 20;
const { cursor } = input;
const items = await ctx.prisma.post.findMany({
take: limit + 1, // get an extra item at the end which we'll use as next cursor
cursor: cursor ? { id: cursor } : undefined,
orderBy: {
updatedAt: 'asc',
},
});
let nextCursor: typeof cursor | undefined = undefined;
if (items.length > limit) {
const nextItem = items.pop();
nextCursor = nextItem!.id;
}
return {
items,
nextCursor,
};
}),
Then on my client: api.post.infinitePosts, but there is no .add or .delete on it, am I miss something or is there any detail doc?
useInfiniteQuery | tRPC
- Your procedure needs to accept a cursor input of any type (string, number, etc)