0

It is known that firebase bills with number of doc reads. there is a daily limit to firestore doc read (50k read per day). but when i fetch in my react app it prompts the quota exceed error.

FirebaseError: Request failed with error: Quota exceeded.

what i actually did was i created an async function to get documents, and called it. but this way it listens to every change in firestore, and read all over again. i haven't even opened the console b/c it listens to changes as well.

let me explain what i'm building. I'm building an amazon type web. and in the home page it display the products. so to prevent more read i need to limit the number of fetched docs. initially, the first items fetched should be 21 products. and when the user reach the end of the list they click the load more button and it loads an additional 21 products.

so my questions are, How can i Limit the number of docs fetched? even if it's limited does it cache the previously loaded docs or it reloads them again? and if i use snapshot listener does that reload every docs or updates the latest one? is there a right way to fetch firestore documents?

this is how i used it

const getData = async () => {
    const constraints = [];

    if (price)
      constraints.push(orderBy("price", price == "1" ? "desc" : "asc"));

    if (date)
      constraints.push(orderBy("postedDate", date == "1" ? "desc" : "asc"));

    const livings = collection(db, "livingPosts");
    let q = query(livings, ...constraints);

    const qSnapshot = await getDocs(q);

    const dataQ = qSnapshot.docs.map((doc) => ({
      ...doc.data(),
      id: doc.id,
    }));
    // console.log(dataQ);
    setDatas(dataQ);
  };

getData();
Mohammed Bekele
  • 727
  • 1
  • 9
  • 25

1 Answers1

1

You should use the pagination options suggested in firebase here You can limit docs fetched by for example 21 using the .limit option see example here

In case of snapshot listeners, if you read 100 docs then it is considered 100 reads and if there is any update to any of those 100 docs...it is pushed to client, so it is considered an additional read AFAIK.

best option to use query, pagination and limit to achieve what you want, as per what you have mentioned. it does not need snapshot listeners.

Example of how to do this available in a old post which you can adapt to current firebase version

thezohaan
  • 324
  • 1
  • 10
  • in case of limit or pagination, let's say i want to fetch the 21 docs from the latest. and then add more 21 docs. does this mean the doc read is 21? and when i request more read does it count it as another 21? – Mohammed Bekele Feb 12 '23 at 18:20
  • let's say i have 1000 docs. when i request `const first = query(collection(db, "cities"), orderBy("population"), limit(25));` it displays the first 25 docs. what will i do if i wanted to request the next 25. do i change the limit `.limit(50)` ? – Mohammed Bekele Feb 12 '23 at 18:22
  • regarding your first comment - answer is yes. regarding the second comment - answer is no. you need to use the limit along with the cursor as per the first link i shared. you cannot simply change the limit to 50. limit works in combination with cursor to read 25 docs first and then 25 docs next....and so on... – thezohaan Feb 12 '23 at 18:26
  • so how can i implement this in my code? – Mohammed Bekele Feb 12 '23 at 18:28
  • does it automatically fetch the next 25 when i reach to the last item fetched? – Mohammed Bekele Feb 12 '23 at 18:29
  • unfortunately without access to what you want to present... i wont be able to provide you a full working code for you for this..you need to go through firebase docs / video in that help page and then implement it based on your data structure, how your document ids and data is structured. there is a comprehensive description of different scenarios in the help page which you can try out. – thezohaan Feb 12 '23 at 18:33
  • i visited the link u gave me, i read to use `startAfter`. so in my code do i need to call the `getData()` function inside useEffect? – Mohammed Bekele Feb 12 '23 at 18:33
  • you can check this ...but bear in mind this is probably with older firebase versions...but concept is similar https://stackoverflow.com/questions/53044791/how-to-paginate-cloud-firestore-data-with-reactjs – thezohaan Feb 12 '23 at 18:35
  • thank you. this clarifies most of my problems. but to avoid the query listener in my code do i have to call `getData()` function inside `useEffect` ? – Mohammed Bekele Feb 12 '23 at 18:44