JSON API call then Firestore query - cascading data sheets?

Hi I’m trying to display a list of store locations based on a zip code input by a user.

I have a long list of store locations in a Firestore DB - each with a zip code and long / lat. Let’s call this data sheet “stores”.

What I’m doing currently is save the zip code input by the user into a data slot. Then call an JSON API with that zip code - which returns to a data sheet a list of zip codes and long / lat nearby (Eg. with 3 miles). Let’s call this data sheet MultiZip. See screenshot.

My question is how would I then use these zip codes returned to query the “stores” data sheet. Eg. take the next one in the screenshot from 90210 (Beverly Hills) which is 90077, and query the data sheet “stores” for rows matching 90077? Ideally I would like to have a number of these zip codes returned by the API (Eg. take 90077, 90069, 90290, etc) and query all of them against the FIrestore DB for a match then display them directly in a list in a following screen.

It seems like I have exhausted the line of cascading action possible. As in I know with a button press, I can have either a data sheet filled out by an JSON API, or a data sheet filled out by a Firestore plugin. In this case, I need the FIrestore plugin to take some data from the first data sheet and return a query.

Maybe a custom script? I have seen some examples but have no idea what the script would look like in this case.

Thanks in advance.

Hi,

This is more about the backend related stuff than React Studio frontend.

I’m afraid that this logic should be done in the server. Maybe you could create a Cloud function which returns the needed data from Firebase backend every time when user updates the Data slot value? You could then refer to cloud function then with Generic JSON plugin and use the Data slot value in the API endpoint url.

Thanks @Antti_Neonto. Will give that a try at some point. For the time being, I went with making the API call ahead of time batching the database, such that the API result is part of the database already. This would also have the somewhat unintended consequence of speeding up the data query itself since the API call is no longer made at run time.

Also, it seems like Cloud Function latency can be in the ~10 second range as per Google’s documentation. So that might be out of the question for what I was looking for some quick data manipulation in between screen navigation.

I think long term when I do incorporate the API at run time, things could work out. I’ve figured out that the API call + subsequent search results do not have to be a single step transparent to the user. Looking at what other applications do (Eg. Zillow), they break it up into steps which are actually logical to the user.

Step 1 - User enters zip code. API call goes out. A number of zip codes are retrieved and inserted into the MultiZip data sheet.

Step 2 - We echo the correct zip code “hit” (or hits) back to the user as city name - under the text box. Basically it looks like an “auto lookup” to the user.

Step 3 - User then clicks on one of the city names. We assign an interaction to this click to update the “stores” data sheet and navigate to the next screen to display search results.

I’m sure the actual implementation will run into more challenges, but this is the high level solution that I think will work.

Also, I started using scripts to manipulate data along with data sheets and data slots, and that has helped me out a lot. Plus I’ve also read up on Cloud Functions, and I can see how it’s another great tool to compliment React Studio for triggers / data manipulation in the backend.

Keep up the good work !