When trying to fetch a set of data from Firestore Database, I stumbled into a pretty basic challenge: the data is not shown on the screen.
This article suggests a solution for those who are learning Firebase and got caught by a similar problem.
What was the Situation?
When I was learning how to use Firebase V9 with a Udemy course, I was struggling to get the data that I manually created on Cloud Firestore.
I went through all the following processes twice just to make sure I don’t miss any essential steps to successfully fetch the data into my browser.
- Create a Firebase Project
- Create a web app under the project
- Copy the config and paste on a file in my local project
- Initialise firebase in the file using the copied config
- Initialise firestore and export the particular database from the file
- Install the latest firebase
- Run the application at localhost:3000
Problem
No error message, all seems fine except that no data from the database was shown in the place that it should be.
Solution
Did All The Process Again
Scraping the project to the bin, I downloaded the course file again, wrote the code again by watching the course video very carefully, and made sure that I didn't miss any step.
Checked if My Code Looks Exactly the Same as the Tutorial
No typo and no mistake. It’s impossible to be wrong.
Solution: Firebase Rules
If my code is perfect, then the problem should be on the side of firebase.
And here it is, the rules were written as below:
The 'if false' part was the cause of the problem.
If the part is false, no one can read and write the data.
For the sake of experimenting with data-fetching for this tutorial, I temporarily edited the sentence to 'allow read, write: if true'.
And now on the screen, I can see the data that I manually added on Firestore Database. This means the data is successfully fetched.
Please note that this is a bad practice if you’re actually developing an app with personal information as it allows any person can access and change the contents.
But if you’re just a beginner wanting to understand some basic functions of firebase and haven’t learned about the firebase rules yet, this could be a temporary solution.
You can always come back and modify the rules as you go.
Top comments (0)