Fetching Firestore Collections & Documents
Deprecated
Firebase is no longer a first-party integration so these docs are only intended for legacy users
You can access your connected Firestore data using the following components under Lists & Data.
| Component | Description |
|---|---|
| Firebase Collection | A component that is used in a screen's Layout to map a list of data from a Collection in Firestore. |
| Firebase Document | A component that is used in a screen's Layout to read the data from a particular document under a Firestore Collection. |
Fetching a Collection
If you'd like to map a collection to a screen (for example, to populate a list of items), follow the steps:
- Add a Firebase Collection component in the screen's Layout tree and select it.
- From the Properties panel, select the name of the Firestore collection as a value to the Collection property.
Then select the List component in the Layout tree. On the "Data" tab in the Properties panel, you'll select the Firebase Collection to map the data into this List.
Where
The Where condition in a Firebase Collection allows you to map data to the list based on a condition. It takes three parameters:
- a field to filter on
- a comparison operator
- a value
It has the following operators available:
| Operator | Descripotion |
|---|---|
== | equal to |
!= | not equal to |
< | less than |
<= | less than or equal to |
> | great than |
>= | greater than or equal to |
array-contains | filter result based on array values |
array-contains-any | returns documents where the given field is an array that contains one or more of the comparison values |
in | returns documents where the given field matches any of the comparison values |
not-in | returns documents where the given field exists is not null, and does not match any of the comparison values |
For example, consider the Firestore document structure below. Each document in the collection books has a field rating that has some value.
You can use the Where condition to display only those items in the list that has less than or equal to the rating value of 3.
Order By
The Order By condition is used to sort the items in the List either in Ascending or Descending order. It takes two parameters:
- a field to filter on
- direction of to map values in the list
Fetching a Document
Mapping a single document to a screen is similar to mapping a collection. If you'd like to map a document to a screen follow the steps:
- Add a Firebase Document component in the screen's Layout tree and select it.
- From the Properties panel, select the name of the Firestore collection as a value to the Collection property.
- Select the Document id. It can be provided as a Navigation param, preferably, from a list on another screen where the data is being fetched from a Firestore collection.
Next, choose the data-enabled component in the Layout tree that you want to map your document data to.
Here's an example of how to do this with a text component:
Screen Level Data
Screen Level Data is another way to connect to fetch data from the Firestore. It's an alternate to Firebase Collection and Firebase Document components.
We only recommend you to use this option when you want to use Custom Code with Firebase.
To enable Screen Level Data, select the screen component and go to the Data tab in the Properties panel on the right-hand side. You will find the option to enable Screen Level Data.
Click the Add Data button and
- set the Source to **Firebase
- set the Type to a Firestore Collection or Document
- set the Collection/Document you want to fetch data in the screen
Fetching data, using Where and Order By conditions work in the same way as descrbied above.
Additional Resources
Updated 5 months ago