Inconsistent Response - Githubissues

in this code when I click on load more button it gives me 20 images. but the second time it does not give me any image.

note: there are 26 images in my database

TRPC Procedure :


export const getImages = protectedProcedure
  .input(
    z.object({
      cursor: z.string().nullish(),
      limit: z.number().default(20),
    }),
  )
  .query(async ({ input, ctx }) => {
    try {
      const { db } = ctx;
      const { cursor, limit } = input;

      const images = await db.query.ImageTable.findMany(
        withCursorPagination({
          limit,
          cursors: [
            [
              ImageTable.createdAt,
              "desc",
              cursor ? new Date(cursor) : undefined,
            ],
          ],
        }),
      );

      const nextCursor = images.length
        ? images[images.length - 1]?.createdAt?.toISOString()
        : null;
      return {
        images,
        nextCursor: nextCursor,
      };
    } catch (error) {
      throw customError(error);
    }
  });

Frontend Code =>

import { useEffect, useMemo, useRef } from "react";
import Image from "next/image";
import ImageSkeleton from "@/components/shared/skeleton/ImageSkeleton";
import { api } from "@/utils/trpc/client";
import { Loader } from "lucide-react";
import { Button } from "@ui/components/ui/button";

type ImageType = {
  id: string;
  smallUrl: string | null;
  mediumUrl: string | null;
  largeUrl: string | null;
};

const ImageGallery = () => {
  const lastImageRef = useRef<HTMLDivElement | null>(null);

  const { data, isLoading, fetchNextPage, isFetchingNextPage } =
    api.media.resources.useInfiniteQuery(
      {
        // limit: 5,
      },
      {
        getNextPageParam: (lastPage) => lastPage.nextCursor,
      },
    );

  const images = useMemo(
    () => data?.pages.flatMap((page) => page.images ?? []),
    [data],
  );

  return (
    <>
      {/* Skeleton */}
      {isLoading && (
        <div className="flex flex-wrap gap-2 ">
          {Array.from({ length: 20 }).map((_, index) => (
            <ImageSkeleton key={index} />
          ))}
        </div>
      )}

      <div className="mt-1 flex max-h-[250px] flex-wrap gap-2 overflow-y-auto">
        {images &&
          images?.length > 0 &&
          images?.map((image, index) => {
            return (
              <div
                key={image.id}
                className={`relative h-28 w-28`}

              >
                <Image
                  src={image.smallUrl!}
                  alt="image"
                  className="cursor-pointer rounded border-4 border-slate-900 object-cover"
                  fill
                  sizes="120px"
                />
              </div>
            );
          })}
      </div>

      <div className="flex w-full justify-center">
        <Loader
          className={`animate-spin  ${isFetchingNextPage ? "visible" : "invisible"}`}
        />
      </div>
      <Button onClick={async () => {

        fetchNextPage()
      }}>Load More</Button>
    </>
  );
};

export default ImageGallery;

miketromba / drizzle-pagination

Inconsistent Response #3