TRPC：类型“{ useQuery：”上不存在属性“useInfiniteQuery”

Question

TRPC问题

我有一个带有时间线查询的 tweetRouter，它返回推文和 NextCursor，但是当我尝试在组件中访问 useInfiniteQuery 时，会出现错误。

** 类型“{ useQuery: **”上不存在属性“useInfiniteQuery”

翻译：您正在尝试访问useInfiniteQuery不包含它的对象。

我的组件：

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

我的 tweet.ts 路由器：

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 }) => {
    const { prisma } = ctx
    const { cursor, limit } = input

    const tweets = await prisma.tweet.findMany({
      take: limit + 1,
      orderBy: [
        {
          createdAt: "desc"
        }
      ],
      cursor: cursor ? { id: cursor } : undefined,
      include: {
        author: {
          select: {
            name: true,
            image: true,
            id: true
          }
        }
      }
    })

    let nextCursor: typeof cursor | undefined = undefined;

    if (tweets.length > limit) {
      const nextItem = tweets.pop() as typeof tweets[number];

      nextCursor = nextItem!.id;
    }

    return {
      tweets,
      nextCursor,
    };
  })
})

我的棱镜模型：

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
}

我的自动补全仅显示useQuery和useSuspenseQuery

我期望使用 useInfiniteQuery 进行无限滚动

Answer 1

尝试在 tsconfig.json 中compilerOptions.strict进行设置。true这为我解决了。