الصفحات اللي بتتلم

app.get("/api/students", async (req, res) => {  const page = parseInt(req.query.page) || 1;  const limit = 20;  const students = await prisma.student.findMany({    skip: (page - 1) * limit,    take: limit,  });  const total = await prisma.student.count();  const hasMore = page * limit < total;  res.json({    students,    nextPage: hasMore ? page + 1 : null,  });});

import { useInfiniteQuery } from "@tanstack/react-query";function getStudents({ pageParam }) {  return fetch(`/api/students?page=${pageParam}`).then((res) => res.json());}function StudentsList() {  const {    data,    fetchNextPage,    hasNextPage,    isFetchingNextPage,    isPending,  } = useInfiniteQuery({    queryKey: ["students"],    queryFn: getStudents,    initialPageParam: 1,    getNextPageParam: (lastPage) => lastPage.nextPage ?? undefined,  });  if (isPending) return <p>جاري التحميل...</p>;  return (    <div>      {data.pages.map((page, i) => (        <div key={i}>          {page.students.map((s) => (            <div key={s.id}>{s.name}</div>          ))}        </div>      ))}      <button        onClick={() => fetchNextPage()}        disabled={!hasNextPage || isFetchingNextPage}      >        {isFetchingNextPage          ? "بيحمّل..."          : hasNextPage            ? "عرض المزيد"            : "مفيش أكتر"}      </button>    </div>  );}

import { useEffect, useRef } from "react";function StudentsList() {  const {    data,    fetchNextPage,    hasNextPage,    isFetchingNextPage,    isPending,  } = useInfiniteQuery({    queryKey: ["students"],    queryFn: getStudents,    initialPageParam: 1,    getNextPageParam: (lastPage) => lastPage.nextPage ?? undefined,  });  const observerRef = useRef(null);  useEffect(() => {    if (!observerRef.current || !hasNextPage) return;    const observer = new IntersectionObserver(      (entries) => {        if (entries[0].isIntersecting && !isFetchingNextPage) {          fetchNextPage();        }      },      { threshold: 1 },    );    observer.observe(observerRef.current);    return () => observer.disconnect();  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);  if (isPending) return <p>جاري التحميل...</p>;  return (    <div>      {data.pages.map((page, i) => (        <div key={i}>          {page.students.map((s) => (            <div key={s.id}>{s.name}</div>          ))}        </div>      ))}      <div ref={observerRef} style={{ height: 1 }} />      {isFetchingNextPage && <p>بيحمّل المزيد...</p>}    </div>  );}

useInfiniteQuery({  queryKey: ["messages"],  queryFn: getMessages,  initialPageParam: 0,  getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,  getPreviousPageParam: (firstPage) => firstPage.prevCursor ?? undefined,});

app.get("/api/students", async (req, res) => {  const cursor = req.query.cursor;  const students = await prisma.student.findMany({    take: 20,    skip: cursor ? 1 : 0,    cursor: cursor ? { id: cursor } : undefined,    orderBy: { id: "asc" },  });  res.json({    students,    nextCursor: students.length === 20 ? students.at(-1).id : null,  });});

useInfiniteQuery({  queryKey: ["students"],  queryFn: ({ pageParam }) =>    fetch(`/api/students?cursor=${pageParam ?? ""}`).then((r) => r.json()),  initialPageParam: null,  getNextPageParam: (lastPage) => lastPage.nextCursor ?? undefined,});