How to useInfiniteQuery with Firebase

[apodacaduron]

Hey guys at the moment I'm trying to add pagination to a table, but I'm having trouble using react-query and firebase for this. I am aware that there's another library called react-query-firebase, but I've been having more issues with that so I'm trying to use only react-query. Also, this is a typescript project.

According to the docs is recommended to pass a cursor for pagination but when using firebase to fetch data i'm not sure on how should this be done, at the moment i have something like

  const patientCollection = getCollection('patients')
  const q = query(patientCollection, ...queries)

  const fetchPatients = async (queryParam?: Query<DocumentData>) => {
    const queryFallback = queryParam ?? q
    return await getDocs(queryFallback) // I feel like this is wrong
  }

  return useInfiniteQuery(
    ['patients', { workspaceId, ...context }],
    () => fetchPatients(),
    {
      getNextPageParam: (pageSnapshot, allPages) => {
        if (!pageSnapshot.docs.length) return
        const lastDocument = pageSnapshot.docs[pageSnapshot.docs.length - 1]
        return query(q, startAfter(lastDocument)) // I feel like this is wrong
      },

Edit: I was able to make it work by doing the following, it's not perfect but at least does the job

  const patientCollection = getCollection('patients')
  const q = query(patientCollection, ...queries)

  const fetchPatients = async (queryParam: Query<DocumentData>) => {
    return await getDocs(queryParam)
  }

  return useInfiniteQuery(
    ['patients', { workspaceId, ...context }],
    ({ pageParam = q }) => {
      return fetchPatients(pageParam)
    },
    {
      getNextPageParam: (pageSnapshot, allPages) => {
        if (!pageSnapshot.docs.length) return
        const lastDocument = pageSnapshot.docs[pageSnapshot.docs.length - 1]
        return query(q, startAfter(lastDocument))
      },

[Ali-Albaker]

I had the same issue. This is how I did it.

  const {
    status,
    data,
    error,
    isFetching,
    isFetchingNextPage,
    isFetchingPreviousPage,
    fetchNextPage,
    fetchPreviousPage,
    hasNextPage,
    hasPreviousPage,
  } = useInfiniteQuery({
    queryKey: ['patients'],
    queryFn: ({
      pageParam,
    }) => {
	// Initial request pageParam is undefined so startAfter should not be in
	const q = query(collection(db, 'patients'), orderBy('age'), limit(25), ...(pageParam ? [startAfter(pageParam)] : []));
	const documentSnapshots = await getDocs(q);

	const dataArray = [];
	documentSnapshots.forEach((document) => {
    		dataArray.push(document.data());
	});

	return {
		firstVisible: documentSnapshots.docs[0],
		lastVisible: documentSnapshots.docs[documentSnapshots.docs.length-1],
		data: dataArray,
	};
    },
	initialPageParam: undefined,
	getPreviousPageParam: (firstPage) => firstPage.firstVisible,
	getNextPageParam: (lastPage) => lastPage.lastVisible,
  })