Paginate with useCollection

[igorjacauna]

I'm trying create a pagination with a collection with this:

let lastVisible: any = null;
const dataRef = collection(db, path);
const dataQuery = query(dataRef, orderBy(order, 'desc'), limit(pageSize));
const data = useCollection(dataQuery);

data.promise.value.then(async docs => {
  lastVisible = await getDoc(doc(db, path, docs[docs .length - 1].id));
});

function getNextPage() {
  if (lastVisible) {
    const nextQuery = query(
      dataRef,
      orderBy(order, 'desc'),
      startAfter(lastVisible),
      limit(pageSize),
    );

    getDocs(nextQuery)
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          data.data.value.push(doc.data());
        });

        if (querySnapshot.size < pageSize) {
          canLoadMore.value = false;
        } else {
          lastVisible = querySnapshot.docs[querySnapshot.size - 1];
        }
      })
      .catch(console.error);
  } else {
    canLoadMore.value = false;
  }
}

But I don't feel this is fancy. There is a better way to do this?

[dosstx]

I admit I haven't used vuefire yet (will be doing so soon), but have you looked into an "infinite loading" component instead? Something like this one: https://vue3-infinite-loading.netlify.app/

In my case, I am using Nuxt 3 and handling the data fetching on the backend, but vue3/client-side data fetching should be fine too.

Here's example of my data fetching from Firestore:

/components/PostSidebar.vue:

<template>
  <section>
    <h3 class="h5 pb-2 text-capitalize text-secondary">More</h3>
    <article v-for="post in posts" :key="post.id">
   <!--- post properties here -->
      </article>
    </section>

    <InfiniteLoading @infinite="infinitePostHandler">
      <template #spinner>
        <AppSpinner />
      </template>
      <template #complete>
        <span>There are no more posts</span>
      </template>
      <template #error="{ retry }">
        <button class="btn btn-outline-dark" @click="retry">
          Retry loading posts
        </button>
      </template>
    </InfiniteLoading>
  </section>
</template>

<script setup lang="ts">
import ChatLeft from '@/assets/icons/chat-left.svg'
import InfiniteLoading from 'v3-infinite-loading'
import 'v3-infinite-loading/lib/style.css'

const { posts, loadInitialPosts, infinitePostHandler } = useInfiniteLoading()

await loadInitialPosts()
</script>

/composables/useInfiniteLoading.ts:

interface Post {
  id: string
  title: string
  content: string
  imagePath: string
  caption: string
  uid: string
  displayName: string
  commentCount: number
}

export const useInfiniteLoading = () => {
    let posts = ref<Post[]>([])
    let page = 1

    const loadInitialPosts = async () => {
        const { data } = await useFetch(`/api/posts/lazy/${page}`)
        posts.value.push(...data.value)
    }

    const infinitePostHandler = async ($state: {
        complete: () => void
        loaded: () => void
        error: () => void
    }) => {
        console.log('loading more...')

        try {
            // Load more posts
            const { data } = await useFetch(`/api/posts/lazy/${page}`)

            if (data.value && data.value.length < 10) {
                $state.complete()
            } else {
                posts.value.push(...data.value)
                $state.loaded()
            }
            page++
        } catch (error) {
            $state.error()
        }
    }

    return { posts, loadInitialPosts, infinitePostHandler }
}

/server/api/posts/lazy/[page].get.ts:

import { firestore } from '@/server/utils/firebase'

export default defineEventHandler(async (event) => {
    // Get the page number from the route
    const page = parseInt(event.context.params.page)
    const pageSize = 10
    let query = firestore.collection('posts').orderBy('createdAt', 'desc').limit(pageSize)

    if (page > 1) {
        const lastPostOnPrevPage = await firestore.collection('posts').orderBy('createdAt', 'desc').limit((page - 1) * pageSize).get()
        query = query.startAfter(lastPostOnPrevPage.docs[lastPostOnPrevPage.docs.length - 1])
    }

    const posts = await query.get()
    return posts.docs.map((doc) => doc.data())
})

Hope this helps someone.

[igorjacauna]

Nice!

I only use backend to write. I use vuefire because it already have listeners and update the content when Firestore has updates. And also it populates references to others docs with its data

For infinite scroll I used vueuse infinite scroll

useInfiniteScroll(
  document,
  () => {
    if (!canLoadMore.value) return;
    getNextPage(); // The implementation of getNextPage is in the first post on this discussion
  },
  { distance: 10 }
)

[3zzy]

Would love to know if there's an elegant way for pagination. Its pretty basic so I feel it should be there, but I can't find anything in the docs.

[BenJackGill]

I'm also looking for pagination examples. If anyone has examples to share please do!

[BenJackGill]

Ok here is my latest attempt. Thank you @igorjacauna for providing your starting template, which this is heavily based on. I would have been lost without your code.

I only tweaked it slightly for my purposes. Maybe this will also help others.

It's written in TypeScript and I import Firestore collection and document references from a custom composable. But it should be easy to understand because I commented everything out step by step.

<template>
  <div class="q-pa-lg">
    <template v-for="(doc, index) in docs" :key="index">
      <p>
        {{ doc.id }}
      </p>
    </template>
    <q-btn label="Next" @click="loadNextPage" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { useCollection } from "vuefire";
import {
  useSerpGoogleMapsColRef,
  useSerpGoogleMapsDocRef,
} from "src/composables/firebase";
import {
  DocumentSnapshot,
  getDoc,
  getDocs,
  limit,
  orderBy,
  query,
  startAfter,
} from "firebase/firestore";
import { SerpGoogleMaps, WithId } from "@seoturbo/types";

// Set how many docs to fetch each time
const docsPerFetch = 1;

// Last document from each fetch, used as the start point for the next fetch
let lastVisibleDocSnap: DocumentSnapshot<SerpGoogleMaps> | null = null;

// Reference to the Firestore collection
const serpGoogleMapsColRef = useSerpGoogleMapsColRef();

// Initial query for the collection
const initialSerpGoogleMapsQuery = query(
  serpGoogleMapsColRef.value,
  orderBy("createdAt", "desc"),
  limit(docsPerFetch)
);

// Use VueFire to get the inital data from the Firestore query
const initialSerpGoogleMaps = useCollection(initialSerpGoogleMapsQuery);

// Create a ref to store the inital document and then later add new documents
const docs = ref<WithId<SerpGoogleMaps>[]>([]);

// Get the DocumentSnapshot of the last document and update the docs array
watch(initialSerpGoogleMaps, async () => {
  // Exit if there are no documents in the inital fetch
  if (initialSerpGoogleMaps.value.length === 0) return;

  // Update the last visible document
  const lastVisibleDocId = computed(
    () => initialSerpGoogleMaps.value[initialSerpGoogleMaps.value.length - 1].id
  );
  const lastVisibleDocRef = useSerpGoogleMapsDocRef(lastVisibleDocId);
  if (lastVisibleDocRef.value) {
    lastVisibleDocSnap = await getDoc(lastVisibleDocRef.value);
  }

  // Store the inital fetched documents in the docs ref array
  docs.value = initialSerpGoogleMaps.value;

  // Log the inital docs array
  console.log("docs: ", docs.value);
});

// Function to get the next page of data
const loadNextPage = async () => {
  // Check if lastVisibleDocSnap exists
  if (!lastVisibleDocSnap) return;

  // Create a new query starting after the last document from the previous fetch
  const nextPageQuery = query(
    serpGoogleMapsColRef.value,
    orderBy("createdAt", "desc"),
    startAfter(lastVisibleDocSnap),
    limit(docsPerFetch)
  );

  // Get the documents from the Firestore query
  const querySnapshot = await getDocs(nextPageQuery);

  // Add the new documents to the docs array
  for (const newDoc of querySnapshot.docs) {
    docs.value.push(newDoc.data());
  }

  // If there were any documents fetched, update lastVisibleDocSnap to the last document fetched
  if (querySnapshot.docs.length > 0) {
    lastVisibleDocSnap = querySnapshot.docs[querySnapshot.docs.length - 1];
  }

  // Log the updated docs array
  console.log("docs: ", docs.value);
};
</script>

[BenJackGill]

After some more tweaking I came up with two other versions.

These are much simpler, and primarily rely on the VueFire useCollection().

Hope it helps someone else. And if you have any improvements please share!

VERSION 1 - Using Firestore Document Snapshot as a pagination cursor:

The first version uses Firestore Document Snapshot as a pagination cursor so that we are only fetching a small batch of documents each time. This will save on document read costs.

<template>
  <div v-for="document in allDocs" :key="document.id">
    <p>
      {{ document.createdAt }}
    </p>
  </div>
  <button @click="loadNextPage">Next</button>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { useCollection, useFirestore } from "vuefire";
import {
  doc,
  collection,
  getDoc,
  limit,
  orderBy,
  query,
  startAfter,
  DocumentData,
} from "firebase/firestore";

const firestore = useFirestore();

const docsPerFetch = 1;
const collectionRef = collection(firestore, "myCollectionName");
const allDocs = ref<DocumentData[]>([]);
const lastVisibleDocSnap = ref();

// Build a computed collection query
const collectionQuery = computed(() => {
  if (!lastVisibleDocSnap.value) {
    // Default query
    return query(
      collectionRef,
      orderBy("createdAt", "desc"),
      limit(docsPerFetch)
    );
  } else {
    // Paginated query
    return query(
      collectionRef,
      orderBy("createdAt", "desc"),
      startAfter(lastVisibleDocSnap.value),
      limit(docsPerFetch)
    );
  }
});

const vueFireDocs = useCollection(collectionQuery);

// When vueFireDocs changes, push those new docs into the allDocs array
watch(vueFireDocs, () => {
  allDocs.value = [...allDocs.value, ...vueFireDocs.value];
  console.log(allDocs.value);
});

// When "Next" button is clicked change the lastVisibleDocSnap
// Because lastVisibleDocSnap is tracked in the computed collection query it triggers useCollection to get new docs
// Those new docs are then pushed into the allDocs array via the watch above
const loadNextPage = async () => {
  const lastVisibleDoc = allDocs.value[allDocs.value.length - 1];
  const lastVisibleDocRef = doc(firestore, "myCollectionName", lastVisibleDoc.id);
  lastVisibleDocSnap.value = await getDoc(lastVisibleDocRef);
};
</script>

VERSION 2 - Increase the limit counter:

This second version just increases the limit counter each time, no need to track and update the Document Snapshot startAfter as we did in Version 1. It's simpler, but the drawback is we are charged for all the document reads each time (instead of just a subsection in Version 1).

So if you have a large set of documents, and you want to save on document read costs, then use version 1. Otherwise, version 2 is simpler.

<template>
  <div v-for="document in docs" :key="document.id">
    <p>
      {{ document.createdAt }}
    </p>
  </div>
  <button @click="loadNextPage">Next</button>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useCollection, useFirestore } from "vuefire";
import { collection, limit, orderBy, query } from "firebase/firestore";

const firestore = useFirestore();

const collectionRef = collection(firestore, "myCollection");

const docsPerFetch = ref(1);

// Build a computed collection query
const collectionQuery = computed(() => {
  return query(
    collectionRef,
    orderBy("createdAt", "desc"),
    limit(docsPerFetch.value)
  );
});

const docs = useCollection(collectionQuery);

const loadNextPage = async () => {
  docsPerFetch.value = docsPerFetch.value + 1;
};
</script>

[BenJackGill]

Hmm that's true! Never thought of that. I'm no professional, just a self-taught coder. If you (or anyone else) has a workaround or better approach I'd love to hear it. I also think version 1 is kind of messy, so am hoping to find a cleaner approach if one exists.

[johnlawsharrison]

I think this is just an inherent limitation with Vuefire's useCollection. It's generally intended to be used as an immutable data source, and the spread operators are basically just copying values from the composable ref.

I think it would probably be possible to set up Firestore bindings for each of the documents in allDocs after they are concatenated from the query collection. I'm not very familiar with Vuefire/Firestore API yet, so there could be a usage pattern there that I'm not aware of. If there is a way of setting up those bindings on those values, it wouldn't surprise me if it involves some additional network requests.

Here's an interesting SO post with some proposed ideas, but looks like nobody (at least in that thread) has really worked it out yet.

[johnlawsharrison]

I'm probably going to make an attempt at implementing Solution #3 as mentioned in this answer for a project I'm working on, I'll update if I have some success!

[EliveltonRepolho]

any luck @johnlawsharrison on the Solution #3 as mentioned in this answer ?
Thank you very much guys on this example solutions, I am working on a project right now that I need to use a infinit scroll but keeping the realtime.

For now, I am starting with VERSION 2 - Increase the limit counter, which works fine, but I am corcerned about the costs

[BenJackGill]

@johnlawsharrison Do you have any updates for us regarding Solution number 3? I'm just revisiting this stuff now and would love to see what you came up with