quickest-silver

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

optimistic-gold•2y ago

I don't understand the question ..

quickest-silverOP•2y 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,
  }));
};

optimistic-gold•2y ago

so you need to implement getNextPageParam on the infinite query ?

Gaming

Programming

fetch next page

Did you find this page helpful?