Issue with TRPC
I am facing a problem with my tweetRouter that has a timeline query returning tweets and a NextCursor. However, I encounter an error when trying to access useInfiniteQuery in my components.
** Property 'useInfiniteQuery' does not exist on type '{ useQuery: **
Translation: Trying to access useInfiniteQuery on an object where it doesn't exist.
Here is the component causing trouble:
export function Timeline() {
const data = trpc.tweet.timeline.useInfiniteQuery(
{
limit: 10,
},
{
getNextPageParam: (lastPage) => lastPage.nextCursor,
}
);
return (
<Container maxW="xl">
<CreateTweet />
<Box
borderX="1px"
borderTop="1px"
borderColor={useColorModeValue("gray.200", "gray.700")}
>
{data?.tweets.map((tweet) => {
return <Tweet key={tweet.id} tweet={tweet} />;
})}
</Box>
</Container>
);
}
This is my tweet.ts router:
import { z } from "zod";
import { tweetSchema } from "../../../components/CreateTweet";
import { protectedProcedure, publicProcedure, router } from "../trpc";
export const tweetRouter = router({
create: protectedProcedure.input(tweetSchema).mutation(({ ctx, input }) => {
const { prisma, session } = ctx
const { text } = input
const userId = session.user.id
return prisma.tweet.create({
data: {
text,
author: {
connect: {
id: userId,
}
}
}
})
}),
timeline: publicProcedure.input(
z.object({
cursor: z.string().nullish(),
limit: z.number().min(1).max(100).default(10)
})
).query(async ({ ctx, input }) => {
// The implementation code for timeline query goes here
})
})
This is my Prisma model structure:
model Tweet {
id String @id @default(cuid())
text String
author User @relation(fields: [authorId], references: [id])
authorId String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
The auto-complete feature only shows useQuery and useSuspenseQuery.
I was expecting to implement infinite scroll functionality using useInfiniteQuery.