Query custom page in an Infinite Query

[Tim4497]

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?

[markerikson]

Can you clarify what you mean by a "custom page/range"? Are you talking about what a getNext/PreviousPageParam function is supposed to calculate and return in general?

Overall, the page param system is designed to work off of the data already in cache, not passing in new arguments. In other words, it always looks at "what pages do we currently have cached?". From that, fetchNextPage() always gets "the next page after the last one in cache", and fetchPreviousPage() always gets "the previous page before the first one in cache".

So, if I have a query set up where page 0 is the first, and we have pages [0, 1, 2] cached, fetchNext() will fetch page 3, and fetchPrevious() will not do anything because we already have the first page cached. If I have pages [3, 4, 5] cached, next gets 6 and previous gets 2.

Either way, you don't pass arguments into fetchNext/PreviousPage().

[Tim4497]

Yes exactly, I want to jump over pages when I scroll really fast in my table and firstly add the currently focused page (or in my calendar the currently focused date range, 7 days are always one page) and then load the other ones which are in between after that.

At the moment when I scroll to far I have to wait until the data is "chronologically" fetched one by one until it reaches my current page/range.

Do you have any ideas how to solve this with Infinite query as I still want to keep all data in the same query and also fill the jumped over data to make the cache/calendar complete and continuous.

[markerikson]

Unfortunately RTKQ's infinite queries (which we based off of React Query's design) is not meant for that use case. We explicitly assume the cached dataset of pages is contiguous, and fetches are done at the start and end.

It's possible that approaching this is a separately-paginated set of fetches might work better in your case (ie, just passing in a page number to useQuery as part of its key so that each request is a separate cache entry).