How to optimize read-write operations in cloud Firestore?

Question

I am currently writing a react + Firebase project for learning purpose, and I am wondering which approach should I take to read from firebase efficiently.

Say I have this read only collection called product where it contains around 5000 documents hence when user access my react app then it would be charged for 5000 reads per access.

Source : Cloud Firestore: How is read calculated?

Since this would consume the read counts rather quickly if user spams refresh to react app, is there any proper way to read the data from firebase firestore ?

1. Store product information in localstorage

   • Once react app successfully loads the data, proceed to save product information into localstorage to avoid unnessary loading in the future.

2. use SOURCE.CACHE from firebase

   • The idea is similar to localstorage, but instead of using localstorage we can make use of SOURCE. CACHE to retrieve data from cache by forcing firebase into offline mode. Source : https://firebase.google.com/docs/firestore/manage-data/enable-offline
   • How to avoid unnecessary Firestore reads with Cache, this is the closest to my current query but my collection is only read only data and will not be updated I might not be able to add snapshot listener. Please kindly let me know if I have misunderstood the functionality.

3. limit read query ?

   • Limits a fixed amount of documents return of each load, but at the end of the day I will still have to load the full set of documents hence I am quite skeptical of this.

This is what I can think of so far, please kindly let me know if there is any golden standard or procedure in the your app building design.

Thank you.

Answer 1

You should definitely introduce a pagination strategy. Another smart way is to query based on last mutation time. Firestore automatically caches your data in the web if enablePersistence is configured(Otherwise its set to false).

You might introduce a strategy to only query using the network after a certain period has passed. You need to keep track per module when the last online query was made though.

function strategicFirestoreReadWrite(moduleKey, actionFn) {
  const lastFetchedDate = sessionStorage.getItem(moduleKey) || new Date();
  const difference = Math.abs(lastFetchedDate.getTime() - new Date().getTime())
  const hourDifference = difference  / 1000 / 3600
  const logToStorageFn = () => {
    sessionStorage.setItem(moduleKey, new Date())
  }

  // Performing operation offline when last fetch earlier than 3 hours
  if (hourDifference < 3) {
   firebase
     .firestore()
     .disableNetwork()
     .then(actionFn)
     .then(logToStorageFn)
  } else {
   firebase
       .firestore()
       .enableNetwork()
       .then(actionFn)
       .then(logToStorageFn)
  }
}

This can be a utility function for all your Firestore operations for a specific page session. Now what you wanna do is pass a unique identifier and whatever offline or online action you want to perform; maybe a fetch, insert, update or delete; with a function. You will be sure that the function performs in either in offline or online mode based on last read-write time.

strategicFirestoreReadWrite(window.location.href, () => {

   //whatever operation you want to perform in online or offline mode
})

Answer 2

You listed quite a few good options. We use pagination in our app to limit the read queries and also to improve the load speed. For example, we only show 50 items per page and load more on click or scroll (infinite scroll) If the data doesn't change often, you can cache it on the frontend, but this introduces a whole lot of additional problems :).