vicious-gold

fetch next page

https://tanstack.com/query/latest/docs/framework/react/guides/query-functions#query-function-variables is there a way to pass the data that has been retrieved when fetchNextPage is being executed? i wanted to use the document data (retrieved from the initial fetch) as my cursor instead of incementing or decrementing one by one.

Query Functions | TanStack Query React Docs

A query function can be literally any function that returns a promise. The promise that is returned should either resolve the data or throw an error. All of the following are valid query function configurations:

3 Replies

correct-apricot•17mo ago

I don't understand the question ..

vicious-goldOP•17mo ago

I'm working with useInfiniteQuery in React Query and want to leverage retrieved data as a cursor for infinite scroll pagination. This approach involves using the last item in the fetched data array to indicate the starting point for the next request, essentially requesting documents after the last one received. However, I'm encountering challenges in implementing this with React Query. my function looks like this

const fetchThoughts = async (lastPost?: Timestamp): Promise<IThought[]> => {
  let q = query(
    thoughtsCollectionRef,
    orderBy('createdAt', 'desc'),
    limit(THOUGHTS_PER_PAGE)
  );

  if (lastPost) {
    q = query(q, startAfter(lastPost));
  }

  const querySnapshot = await getDocs(q);

  return querySnapshot.docs.map((doc) => ({
    ...(doc.data() as Omit<IThought, 'id'>),
    id: doc.id,
  }));
};

const fetchThoughts = async (lastPost?: Timestamp): Promise<IThought[]> => {
  let q = query(
    thoughtsCollectionRef,
    orderBy('createdAt', 'desc'),
    limit(THOUGHTS_PER_PAGE)
  );

  if (lastPost) {
    q = query(q, startAfter(lastPost));
  }

  const querySnapshot = await getDocs(q);

  return querySnapshot.docs.map((doc) => ({
    ...(doc.data() as Omit<IThought, 'id'>),
    id: doc.id,
  }));
};

correct-apricot•17mo ago

so you need to implement getNextPageParam on the infinite query ?

Gaming

Programming

fetch next page

Did you find this page helpful?