Skip to content

Query custom page in an Infinite Query #5077

@Tim4497

Description

@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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions