Is it advisable to perform several Firestore queries within a single cloud function to minimize round-trip times?

Exploration

Within my application scenario, I have a specific screen that displays 8 different lists of items. Each list requires a separate query to Firestore, running asynchronously to retrieve documents from various collections. Through profiling the execution time of these 8 queries, I've observed a total wait time ranging from 3 to 6 seconds:

execution time: 5539.793ms

For every query, an average of 30 documents is being fetched. Below is a typical query structure:

const query = playersRef
    .where("random", ">=", randomId)
    .where("level", "==", currentUserLevel)
    .where("location.country", "==", currentUserCountry)
    .orderBy("random")
    .limit(30);

Curiosity

I find myself in a state of confusion. While I understand that initiating 8 requests would lead to 8 round-trip times (RTTs), I am unsure whether the majority of time consumed is due to the physical distance to the data center or the complexity of the queries themselves, regardless of the distance (originating from Spain to Iowa).

Could consolidating all these queries into a single Cloud Function (deployed in Iowa and returning all data collectively) potentially diminish the overall execution time significantly?

I appreciate your insights on this matter.

Answer №1

It's challenging to determine the optimal solution, as mentioned by Doug in the comments. Though benchmarking is recommended, here are some factors to consider:

  • Latency impact of physical distance: The closer your app, cloud function, and firestore are located, the faster your app will perform. Consider using the region europe-west2 (London) for proximity and pricing benefits. Check out this site for an unofficial ping measurement tool between you and GCP regions.

  • Asynchronous calls to firestore: Utilize async calls for each query to optimize fetching time by running queries concurrently instead of waiting for each one to finish before starting the next.

  • Implement performance tips from documentation to enhance your code's performance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing asynchronous loading of an image onto a webpage using JavaScript

Is it possible to asynchronously load an image specified in the src attribute of an HTML image tag? I am trying to invoke a Java class using an image src tag, but I want this to happen asynchronously without affecting the current functionality of the web ...

JavaScript: Incorporating an operator into a specific object (instead of the entire class)

Are you familiar with how to include an operator in an object (rather than the entire class)? When it comes to a method, I know you can achieve that by: my_object.new_function = function(){return 1}; Then invoking my_object.new_function() will output ...

Assigning a property to the Next.js response object

I recently discovered a fascinating concept involving setting an attribute on the response object within a Next.js API handler and being able to access that attribute in subsequent requests. This functionality took me by surprise as I couldn't find an ...

Finding the tiniest match within a regex pattern

Looking for a way to match the fourth element in this expression: var string = [a][1] [b][2] [c][3] [d .-][] [e][4] The element we're trying to target is [d .-][]. This specific element can contain any character within the first set of brackets, whi ...

What is the method with the greatest specificity for applying styles: CSS or JS?

When writing code like the example below: document.querySelector('input[type=text]').addEventListener('focus', function() { document.querySelector('#deletebutton').style.display = 'none' }) input[type=text]:focu ...

Learn how to efficiently pre-load data using the prefetchQuery method in React-Query

Attempting to pre-fetch data using react-query with prefetchQuery. The network tab in browser DevTools shows the requested data coming from the back-end, but strangely, the data is not present in the react-query DevTools cache. Any ideas on what might be c ...

Having trouble accessing the information stored in the Firebase Database?

As a newcomer to Firebase and JS, I am attempting to showcase user information on a webpage that is stored within the Firebase database. The data format resembles the image linked here I have written this Javascript code based on various tutorials. Howev ...

Tips for accessing and modifying parent state resolve data within the onEnter function of a child state in a UI router

Within my ui-router state configuration, I have the following setup: Parent state $stateProvider .state('profile',{ url: '/profile', views: { 'contentFullRow': { ...

Customizing the default settings of a d3 funnel chart

I recently used the following link to create a funnel chart using D3: jakezatecky/d3-funnel Everything was working perfectly. However, I wanted to adjust the block heights in proportion to their weight as mentioned in the tutorial by changing the D3 defau ...

JavaScript image sorting function fails to sort multiple ID elements that match

Currently, I am working on a project to develop an image sorter using toggle buttons. However, I have encountered an issue where my function is only effective for the first image ID and not any others. Below is the JavaScript function in question: functi ...

Deleting a specific element in React: Step-by-step guide

Having an issue with the handleDelete() method in DisplayList.JSX where it is deleting the first element instead of the selected element. How can this be resolved? Github Display.jsx import {DisplayList} from './DisplayList'; class Display e ...

Modify the image source using Javascript

I need to update the src attribute of an image in a parent element nested within a ul li when a link is clicked. Here's my code so far. I know how to use JavaScript to change the src attribute, but I'm not sure how many levels I need to go up to ...

Angular 5 Service Unit Testing for UPDATE Function

Currently, I am implementing a stepper feature with back, step, next steps. On the last step, when the user clicks 'done,' I need to call a service to update user data. While I have successfully tested the backStep() and nextStep() methods, I now ...

Using ReactJS to dynamically change styles based on state variables can sometimes cause CSS

Currently delving into the world of React. Learning about states/props and the art of dynamically altering elements. I've set up the component states like this: constructor(props) { super(props); this.modifyStyle = this.modifyStyle.bind(thi ...

How to automatically redirect empty routes to a specific route in Next.js

When visiting a non-existent endpoint in Next.js, I receive a 404 error. What I actually want is for all unused routes to automatically redirect to a default route; specifically, the landing page. I've spent more than an hour trying to figure this ou ...

React component not displaying HERE map controls

Having trouble implementing zoom in and zoom out controls on HERE maps in React. Despite following the documented steps, I am unable to find a solution. I have meticulously followed all instructions provided at: The link to my map component can be found ...

Navigating the intricacies of handling login with ajax

Essentially, the process of logging in typically unfolds as follows: The user inputs their information into the login form and submits it, The server (whether it be Ruby, PHP, Node.js, or any other) processes this data and either, a) redirects to the lo ...

Utilizing individual values from JSON in Knockout JS through single-use options

I am currently receiving data from another view model which I want to display in a dropdown menu. Each option from the other view model needs to be unique per line, so that once a user adds an item to the list, that specific option is no longer available. ...

Changing the position of an element in CSS using the center as the reference point, based on a JavaScript variable: How can it be done?

I have an image marking a scale, with the marker's position in HTML set as: <image class="red-marker" xlink:href="./assets/images/marker.png" [attr.x]=percentage width="12" height="40" y="0" ></image> But I want the middle of the marker ...

What is the best way to trigger an API call every 10 seconds in Angular 11 based on the status response?

I am in need of a solution to continuously call the API every 10 seconds until a success status is achieved. Once the success status is reached, the API calls should pause for 10 seconds before resuming. Below is the code I am currently using to make the A ...