Realmente no puedo entender cómo se hace esto. No creas que la documentación lo explica muy bien, o tal vez simplemente no lo entiendo :)
Lo que estoy tratando de hacer es tener una lista que comience mostrando X elementos. Luego, con un clic de un botón, cargue los siguientes X elementos de la colección...
He creado esta función genérica a la que puedo llamar:
let latestDoc = null; export const getDocumentsPaginated = async <T extends { id?: string }>(collectionPath: string, numberOfDocs: number) => { const items: T[] = []; const q = query(collection(db, collectionPath), orderBy('createdAt', 'desc'), startAfter(latestDoc || 0), limit(numberOfDocs)); const querySnapshot = await getDocs(q); console.log('querySnapshot', querySnapshot) latestDoc = querySnapshot.docs[querySnapshot.docs.length - 1]; querySnapshot.forEach((doc) => { const data = doc.data(); items.push({ ...data, id: doc.id } as T); }); return items; };Luego, tratando de llamarlo desde un componente Vue:
const fetchExercises = async () => { isLoading.value = true; try { const result = await getDocumentsPaginated<ExerciseDocument>(`exercises/${companyId}/exercises`, 5); console.log('internal', result); exercises.value = result; isLoading.value = false; } catch (e) { throw new Error('cant load exercises ' + e); } };Parece que esto no funciona. ¿Acabo de recuperar una matriz vacía aunque sé que la colección tiene muchos documentos?
¿Qué estoy haciendo mal? Realmente usa una mano amiga
La paginación de Firestore no funciona en función de las compensaciones, por lo que agregar 20 a un contador no funcionará (como descubrió).
La paginación de Firestore funciona según el objeto de los cursores . Esto significa que para consultar los documentos de la segunda página, debe conocer los datos del último elemento de la primera página.
Dado que orderBy('createdAt', 'desc') , necesitará conocer el valor createdAt (y el ID del documento) del último documento en la primera página, y pasarlos a startAfter para obtener los documentos para la segunda página.
La forma más fácil de hacer que la paginación funcione en Firestore es mantener la DocumentSnapshot del último elemento de la página actual en una variable con algo como:
const querySnapshot = await getDocs(q); lastDocumentOnCurrentPage = querySnapshot.docs[querySnapshot.docs.length-1]; Luego, cuando necesite cargar la siguiente página de datos, pase esta variable a la condición startAfter de la consulta.