notrebekahmikaelson Posts - Answer Overflow

notrebekahmikaelson

•Created by notrebekahmikaelson on 5/10/2024 in #questions

@tanstack/react-virtual not displaying my virtual list

i have an announcement page where i am fetching all the announcements from the trpc's useInfiniteQuery hook and i am using @tanstack/react-virtual for rendering and refetching query i saw docs on trpc's use infinite query for implementing. link for the same - https://trpc.io/docs/v10/client/react/useInfiniteQuery also i saw the @tanstack/react-virtual for infinite query example. link for the same - https://tanstack.com/virtual/latest/docs/framework/react/examples/infinite-scroll and i modified them according them to my own needs i am able to get the data successfully from the backend but it is not rendering in my app code is below :- Backend Code

getBySociety: protectedProcedure
    .input(
      z.object({
        societyId: z.string().cuid(),
        limit: z.number().min(1).max(100).nullish(),
        cursor: z.string().nullish(),
      }),
    )
    .query(async ({ ctx: { db }, input: { societyId, cursor, limit } }) => {
      const _limit = limit ?? 2;
      const announcements = await db.announcement.findMany({
        where: {
          societyId,
        },
        take: _limit,
        cursor: cursor ? { id: cursor } : undefined,
        orderBy: {
          createdAt: "desc",
        },
        select: {
          id: true,
          member: {
            select: {
              image: true,
              name: true,
            },
          },
          content: true,
          attachments: { select: { name: true, uri: true } },
          _count: {
            select: { comments: true },
          },
        },
      });

      let nextCursor: typeof cursor | undefined = undefined;
      if (announcements.length > _limit) {
        const nextItem = announcements.pop();
        nextCursor = nextItem!.id;
      }

      return {
        announcements,
        nextCursor,
      };
    }),

getBySociety: protectedProcedure
    .input(
      z.object({
        societyId: z.string().cuid(),
        limit: z.number().min(1).max(100).nullish(),
        cursor: z.string().nullish(),
      }),
    )
    .query(async ({ ctx: { db }, input: { societyId, cursor, limit } }) => {
      const _limit = limit ?? 2;
      const announcements = await db.announcement.findMany({
        where: {
          societyId,
        },
        take: _limit,
        cursor: cursor ? { id: cursor } : undefined,
        orderBy: {
          createdAt: "desc",
        },
        select: {
          id: true,
          member: {
            select: {
              image: true,
              name: true,
            },
          },
          content: true,
          attachments: { select: { name: true, uri: true } },
          _count: {
            select: { comments: true },
          },
        },
      });

      let nextCursor: typeof cursor | undefined = undefined;
      if (announcements.length > _limit) {
        const nextItem = announcements.pop();
        nextCursor = nextItem!.id;
      }

      return {
        announcements,
        nextCursor,
      };
    }),

8 replies

Gaming

Programming