-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Closed
Description
Hey there, maybe I am super stupid right now but I do not understand how to define a custom page/range in an Infinite Query Call:
This is my query:
export const getCalendarMatrix = ( b ) =>
b.infiniteQuery( {
infiniteQueryOptions : {
initialPageParam : {
startISO : null,
endISO : null
},
getNextPageParam : ( pageParam ) => {
console.log( "getNextPageParam called with:", pageParam );
return { nextPage: pageParam };
},
getPreviousPageParam : ( pageParam ) => {
console.log( "getPreviousPageParam called with:", pageParam );
return { prevPage: pageParam };
},
},
query( { queryArg, pageParam } ) {
const { viewId, resourceOffset, resourceLimit, startISO: propStartISO, endISO: propEndISO } = queryArg;
const startISO = pageParam.startISO ?? propStartISO ?? addDays( new Date().toISOString().slice( 0, 10 ), -3 );
const endISO = pageParam.endISO ?? propEndISO ?? addDays( new Date().toISOString().slice( 0, 10 ), +3 );
console.log( `Calendar Matrix Query: startISO=${startISO}, endISO=${endISO}, viewId=${viewId}` );
return {
url : "/calendar/matrix",
params : { startISO, endISO, viewId, resourceOffset, resourceLimit }
};
},
serializeQueryArgs : ( { queryArgs } ) =>
`matrix|${queryArgs.viewId}|off:${queryArgs.resourceOffset}|lim:${queryArgs.resourceLimit}|${queryArgs.startISO}|${queryArgs.endISO}`,
} );
now when I scroll up quite fast in my calendar I want to fetch the current page/daterange the first and then resolve the one in between my starting point and my current date range, so I build a task queue which buffers all pages I hit while scrolling up and do last in first out:
useEffect(() => {
if (processingRef.current) return;
if (!queueRef.current.length) return;
processingRef.current = true;
const task = queueRef.current.pop();
const pageParam = {
startISO: task.dates[0],
endISO: task.dates[task.dates.length - 1],
};
let p;
if (task.dir === "prev") {
p = fetchPreviousPage({ pageParam });
} else {
p = fetchNextPage({ pageParam });
}
Promise.resolve(p).finally(() => {
processingRef.current = false;
forceTick((v) => v + 1);
});
}, [
forceTickValue,
fetchPreviousPage,
fetchNextPage,
hasNextPage,
hasPreviousPage,
]);
But it seems that I cant pass any custom params as pageParam is always my last fulfilled call.
Can somone help me out please?
Metadata
Metadata
Assignees
Labels
No labels