T
tRPC

How do I prefetch the nextPage of an infiniteQuery?

How do I prefetch the nextPage of an infiniteQuery?

Yygorperez5/13/2023
I have a custom infiniteQuery hook, and I want to prefetch the next page on success. My current implementation is this:
onSuccess(data) {
const cursor = data.pages.[data.pages ?.length - 1]?.nextCursor
console.log(cursor)
if (cursor?.albums || cursor?.tracks cursor?.artists) {
void utils.spotify.getSearch.p refetchInfinite {
searchTerm, limit, cursor: cursor})
}}
onSuccess(data) {
const cursor = data.pages.[data.pages ?.length - 1]?.nextCursor
console.log(cursor)
if (cursor?.albums || cursor?.tracks cursor?.artists) {
void utils.spotify.getSearch.p refetchInfinite {
searchTerm, limit, cursor: cursor})
}}
On the console I get this: the console.log with the cursor {albums: 10, tracks: 10, artists: 10}, the prefetch gets sent with the cursor undefined, but the fetch next page has the right cursor: {albums: 10, tracks: 10, artists: 10} how is this possible?
Nnlucas5/13/2023
This may be down to how you set up your infinite scrolling Typically you set a param for how many items from the bottom the next page will be loaded. So if you have a page size of 100 you might set it to 20 for instance. And for prefetching the next page eagerly you could set it to nearer 100 instead
Yygorperez5/16/2023
Sorry I didn't fully comprehend what you said, could you give me an example or try explaining it in another way please? Are you talking about a parameter for how many items to retrieve?
HHussam5/17/2023
why don't you call query.fetchNextPage based on the scrollbar position, if you want to prefetch it, make it in such a way that next page is fetched well before the user reaches the bottom of the page. you have to figure out when you want to prefetch, I don't think you would want to call it repeatedly until there are no results left.
Yygorperez5/23/2023
I already do this, but if the user scrolls to fast I would want to have it prefetched
HHussam5/23/2023
then keep calling fetchNextPage on the onSuccess handler until there are no results

Looking for more? Join the community!

T
tRPC

How do I prefetch the nextPage of an infiniteQuery?

Join Server
Recommended Posts
is it possible to use trpc on next js api routeslike can i use trpc mutation or query on `/api/test`Dockerfile in TubrorepoHi I have a Turborepo where I have a nextjs frontend “web” and an express backend “api” both connectQuerying external api in trpc router not workingHi guys! So I'm trying to query an api endpoint that I created through a separate node server inside[HOW TO?] Call trpc endpoints from vanilla nextJs api routesSpinoff from an og thread here: https://discordapp.com/channels/867764511159091230/10323011989901353Tutorial for setting up tRPC with Next13 app dir?Anyone has a goos tutorial (blogpost / YouTube) on setting up tRPC with Next13 app dir for both clieStack trace in Client?I've just found that in production I can see stack trace for TRPCErrors. Isin't it supposed to not sSequential batch mutationHow one would make a mutation as a sequential mutation batch call? Say I have to add 10 apples to thHave middleware require a "base" inputIs there a way to have middleware add a minimum required input, like an org id? So that every procedIs it possible to dynamically change the url of httpBatchLink in runtime?I need to do it because I have 2 domians that share the same NextJS project and I need to be able togetting manually a subdomainFor some reason I can fetch here the route /test, but not /tester/eAbility to perform a tRPC request form a terminal, curl-likeHey, I wanted to ask if there is conventional a way to do that? I wanted to warmup my lambda but canUsage of useQuery after pageload?Hi all! I am new to TRPC so my apologies in advance for a very nooby question: In my [id].tsx file ISecurity question about tRCPIf I export the tRCP router as type in order to import that type in my client JS, wouldn't it mean tReal-world Large Application Examples?Are there any OSS examples (besides cal.com) demonstrating large tRPC code bases? I want to see how