How to limit FIrebase Firestore Read in React JS by using Snapshot method

Question

I have 2 main questions here.

(1) I have been trying to find a way to limit() the read from Firestore but I could not find a way to limit it with the snapshot method. We are not planning to rewrite the whole function another way, just wonder how to add the limit to the current situation where every time we run it, it shows limit() is not a function. So while I am developing this app, I could just show 100 items, let's say

import { db } from "../utils/firebase.js"
import { collection, doc, setDoc, getDocs, getDoc, deleteDoc, onSnapshot, updateDoc } from "firebase/firestore"

// WORKING ON IT

export function getProduct(fn) {
    const colRef = collection(db, "companyproduct").limit(20).get() // collection name

    onSnapshot(colRef, snapshot => {
        const list = snapshot.docs.map(doc => {
            const d = doc.data() // get data called d
            return {
                id: doc.id, // just add auto-gen ID
                ...d, // put all data into array object
            }
        })

        fn(list)
    })
}

This is in another page.js

    const getData = async () => {
        await getProduct(list => {
            setTableData(list)
            setOriginalData(list) // just start searching from original data
        })
    }

So basically, what I am trying to do is to load all the 10,000 products at once, and then use OnClick in the table to add these products to POS system and create invoices/receipt. With that said, it will also alter the "available stock" for the product sold.

So my another question is (2) Without reloading the page (because the invoice created will be considered a write to another collection, and the State const [makeInvoice, setMakeInvoice] = useState([]) will be cleared right after invoices are made)

Will Firebase consider it as re-reading the whole 10,000 products? ps. the stock in each sold product already changed at the server, but does not need to reload.

We tried to limit the read in Firestore with snapshot method. Overall we like to alter the data in the collection along the way, while maintaining a low read volume.

Answer 1

I have been trying to find a way to limit() the read from FireStore but I could not find a way to limit it with the snapshot method. We are not planning to rewrite the whole function another way, just wonder how to add the limit to the current situation where every time we run it, it shows limit() is not a function.

If you want to limit the number of documents you read from Firestore, then you have to create a query and pass a limit(x) call to the query function. So please change the following line of code:

const colRef = collection(db, "companyproduct").limit(20).get()

To:

const queryCompanyProduct = query(collection(db, "companyproduct"), limit(20));
onSnapshot(queryCompanyProduct, snapshot => {
    //...
})

Will Firebase consider it as re-reading the whole 10,000 products?

If you're using a get() call, each time you reload the page, you are billed with the number of documents you read.

A query will read the documents from the cache only if the user loses the internet connectivity, otherwise, it will always read the online versions of the documents that exist on the Firebase servers. The cached version of the documents works only when the user is offline.

If you're using a real-time listener, you're only charged once, when you read the data, and right after that only for what's new. Perhaps, this article will help you better understand the billing concept.