@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

useInfiniteQuery

useInfiniteQuery

useInfiniteQuery hook
and i am using

@tanstack/react-virtual

@tanstack/react-virtual

@tanstack/react-virtual

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

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

useInfiniteQuery | tRPC

Your procedure needs to accept a cursor input of any type (string, number, etc) to expose this hook.

React TanStack Virtual Infinite Scroll Example | TanStack Virtual Docs

An example showing how to implement Infinite Scroll in React using TanStack Virtual.

@tanstack/react-virtual not displaying my virtual list

Similar Threads

Similar Threads

Similar Threads