Drizzle ORM Infinite Scroll Cursor Issue

Question

Please help, I have been battling with this issue for days now, infact I couldn't eat well.

I am trying to use Drizzle-orm for my Infinite Scroll Functionality, however, whenever a user scroll to the top of the page it reloads the same data rather than fetch a new data for the user from the database.

What I am trying to achieve is that when a user scrolls, to the last data on the screen, a new data is fetched. my limit was set to 10, that is 10 new data is fetched from the database on each load, however the issue I am having here is that instead of a new data to be fetched, the same data is reloaded to the page.

Please see my code to help me solve this issue.

getFileMessages: privateProcedure
.input(
  z.object({
    limit: z.number().min(1).max(100).nullish(),
    cursor: z.string().nullish(),
    fileId: z.string(),
  })
)
.query(async ({ ctx, input }) => {
  const { userId } = ctx;
  const { fileId, cursor } = input;
  const limit = input.limit ?? INFINITE_QUERY_LIMIT;

  const userFile = await db
    .select()
    .from(_file)
    .where(eq(_file.userId, userId));

  const selectedFile = userFile.find((_file) => _file.id === fileId);

  if (!selectedFile) throw new TRPCError({ code: "NOT_FOUND" });

  const userMessage = await db
    .select()
    .from(_message)
    .where(or(eq(_message.fileId, fileId), gt(_message.id, cursor!)))
    .limit(limit + 1)
    .orderBy(desc(_message.createdAt));

  console.log("USER_MESSAGE", userMessage);

  const selectedMessage = userMessage.map((_message) => ({
    isUserMessage: _message.isUserMessage!,
    createdAt: _message.createdAt!,
    text: _message.text!,
    id: _message.id!,
  }));

  console.log("SELECTED_MESSAGES", selectedMessage);

  let nextCursor: typeof cursor | undefined = undefined;
  if (selectedMessage.length > limit) {
    const nextItem = selectedMessage.pop();
    nextCursor = nextItem?.id;
  }
  return {
    selectedMessage,
    nextCursor,
  };
}),

});

Thank you for the help!