useInfiniteQueryBug - queries to the end of page
I set up infinite scroll using the infinite query function in trpc. I have this bug right when the page loads, if you scroll super quick enough to the bottom of the webpage it'll cause a continuous retrigger until it's gone through the entire db. It seems like it's a race condition but I don't know the source of it.
Below is my route
Here is the react code
Any ideas what could be causing the problem?
import { z } from "zod";
import { createTRPCRouter, protectedProcedure } from "../trpc";
export const historyItemsRouter2 = createTRPCRouter({
infinitePosts: protectedProcedure
.input(
z.object({
limit: z.number().min(1).max(100).nullish(),
cursor: z.string().nullish(), // <-- "cursor" needs to exist, but can be any type
})
)
.query(async ({ input, ctx }) => {
// const { limit, cursor } = input;
const { cursor } = input;
const limit = input.limit ?? 50;
const items = await ctx.prisma.historyItems.findMany({
take: limit + 1, // get an extra item at the end which we'll use as next cursor
cursor: cursor ? { id: cursor } : undefined, // assuming 'id' is the cursor field
orderBy: {
id: "asc", // assuming 'id' is the cursor field
},
where: {
user_id: ctx.user.id,
},
});
let nextCursor: typeof cursor | undefined = undefined;
if (items.length > limit) {
const nextItem = items.pop();
nextCursor = nextItem?.id; // assuming 'id' is the cursor field
}
return {
items,
nextCursor,
};
}),
});
import { z } from "zod";
import { createTRPCRouter, protectedProcedure } from "../trpc";
export const historyItemsRouter2 = createTRPCRouter({
infinitePosts: protectedProcedure
.input(
z.object({
limit: z.number().min(1).max(100).nullish(),
cursor: z.string().nullish(), // <-- "cursor" needs to exist, but can be any type
})
)
.query(async ({ input, ctx }) => {
// const { limit, cursor } = input;
const { cursor } = input;
const limit = input.limit ?? 50;
const items = await ctx.prisma.historyItems.findMany({
take: limit + 1, // get an extra item at the end which we'll use as next cursor
cursor: cursor ? { id: cursor } : undefined, // assuming 'id' is the cursor field
orderBy: {
id: "asc", // assuming 'id' is the cursor field
},
where: {
user_id: ctx.user.id,
},
});
let nextCursor: typeof cursor | undefined = undefined;
if (items.length > limit) {
const nextItem = items.pop();
nextCursor = nextItem?.id; // assuming 'id' is the cursor field
}
return {
items,
nextCursor,
};
}),
});
import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
import { type NextPage } from "next";
import Head from "next/head";
import { api, type RouterOutputs } from "~/utils/api";
// import { Header } from "~/components/Header";
import React, { useState, useRef, useCallback, useEffect } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
// import Image from "next/image";
import useIntersectionObserver from "../hooks/IntersectionObserver";
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "../components/ui/table";
// there's an error of too many queries taking it to the end of the page out of nowhere
const Content: React.FC = () => {
const user = useUser();
const { data, fetchNextPage, isFetchingNextPage, hasNextPage } =
api.historyItemsV2.infinitePosts.useInfiniteQuery(
{
limit: 100,
},
{
getNextPageParam: (lastPage) => lastPage.nextCursor,
}
);
const handleFetchNextPage = () => {
if (
document.documentElement.scrollHeight <=
document.documentElement.clientHeight
) {
return;
}
if (hasNextPage && !isFetchingNextPage) {
void fetchNextPage();
}
};
const dataLength =
data?.pages.reduce((acc, page) => acc + page.items.length, 0) || 0;
const toShow = data?.pages.flatMap((page) => page.items) || [];
return (
<div>
<h1>History Items:</h1>
<InfiniteScroll
dataLength={dataLength}
next={handleFetchNextPage}
hasMore={!!hasNextPage}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: "center" }}>
<b>Yay! You have seen it all</b>
</p>
}
scrollThreshold={0.75}
>
// table component goes here
</InfiniteScroll>
</div>
);
};
export default Content;
import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
import { type NextPage } from "next";
import Head from "next/head";
import { api, type RouterOutputs } from "~/utils/api";
// import { Header } from "~/components/Header";
import React, { useState, useRef, useCallback, useEffect } from "react";
import InfiniteScroll from "react-infinite-scroll-component";
// import Image from "next/image";
import useIntersectionObserver from "../hooks/IntersectionObserver";
import {
Table,
TableBody,
TableCaption,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "../components/ui/table";
// there's an error of too many queries taking it to the end of the page out of nowhere
const Content: React.FC = () => {
const user = useUser();
const { data, fetchNextPage, isFetchingNextPage, hasNextPage } =
api.historyItemsV2.infinitePosts.useInfiniteQuery(
{
limit: 100,
},
{
getNextPageParam: (lastPage) => lastPage.nextCursor,
}
);
const handleFetchNextPage = () => {
if (
document.documentElement.scrollHeight <=
document.documentElement.clientHeight
) {
return;
}
if (hasNextPage && !isFetchingNextPage) {
void fetchNextPage();
}
};
const dataLength =
data?.pages.reduce((acc, page) => acc + page.items.length, 0) || 0;
const toShow = data?.pages.flatMap((page) => page.items) || [];
return (
<div>
<h1>History Items:</h1>
<InfiniteScroll
dataLength={dataLength}
next={handleFetchNextPage}
hasMore={!!hasNextPage}
loader={<h4>Loading...</h4>}
endMessage={
<p style={{ textAlign: "center" }}>
<b>Yay! You have seen it all</b>
</p>
}
scrollThreshold={0.75}
>
// table component goes here
</InfiniteScroll>
</div>
);
};
export default Content;
0 Replies