SQL or NoSQL && Setting Up Cloud Firestore Database in React
Backstory: After using MongoDB with the MERN stack, I wanted to explore other NoSQL databases to get more experience using them. As a young developer, I want to expose myself to as many database options as possible and keep the learning train moving. There were a few to choose from, but Cloud Firestore was one of the first ones to pop into my head since I have prior experience using Firebase. Another factor that drove me to try it was the convenience of hosting my app’s frontend and backend on a single platform.
SQL or NoSQL
NoSQL (or non-relational) databases have been gaining a lot of popularity lately. It’s being used in a lot of big data and real-time applications due to its fast speeds, ease of use (flexibility), and high scalability.
NoSQL databases manage the data in a non-relational form, meaning there are no relationships between tables, instead data is stored as documents (think of JSON). Traditional SQL databases requires the data to be structured carefully prior to creating the database.
Some pros and cons to both include:
SQL
Pros
- Have reduced data storage (normalization and predefined relationships)
- Much more mature (developed in 1970s)
- ACID (Atomicity, Consistency, Isolation, Durability)
Cons
- Doesn’t scale as well (as tables grow, joins can get expensive)
- Requires up-front design to ensure performance (modifying schema can take time)
NoSQL
Pros
- Faster performance
- Built to scale
- Flexible data models (easier to make changes as requirements change)
Cons
- Not a great fit for complex queries
- Less mature (developed in the late 2000s)
- Not optimized for reducing data footprint (But data is cheap)
These are just a few pros and cons, I will link some resources below that go more in-depth.
What should I use?
At the end of the day, both databases are great and it should be picked on a case by case basis. If you’re working with complex queries or don’t anticipate a lot of schema changes or growth, consider SQL. If your app is getting very large and data consistency is not priority, consider NoSQL.
I’ve included some resources below that will help make the decision easier but it ultimately comes down to what you need for your app. Choose the one that is best suited to your situation. For this short tutorial, we will be using Cloud Firestore.
What is Cloud Firestore?
Cloud Firestore is a flexible, scalable NoSql cloud database from Firebase and Google Cloud Platform. A few key features include:
- Flexibility — store data in documents, organized into collections
- Expressive querying — can structure your queries very specifically (filtering, sorting, etc.)
- Realtime updates — up to date data on any connected device
- Offline support — caches current data even when offline, syncs changes whenever internet comes back
- Designed to scale — handles workloads from the world’s biggest apps
Setting Cloud Firestore up with React
Create project on Firebase. After the project is created, add an app to get started, we are going to be building a web app so click on the </> icon.
After you register the app with a nickname, it creates your app’s Firebase configuration. Save that in a clipboard for now.
Click continue to console and navigate over to the Develop tab, then create the database. Stick with test mode for now. It will ask you to select a database location. I kept mine default with nam 5 (us-central).
It’s time to create the React app. Open up the terminal and cd into your development folder and run npx create-react-app app-name. Then run npm install firebase. After the dependencies are installed, we can create a src/firebase.js file and begin setting up Firebase in our app.
Let’s hop over to src/App.js and test the connection.
Quick note about using .add() instead of .set():
- When using
set()to create a document, a specific ID for the document must be passed in:db.collection("food").doc("your-unique-food-id").set(yourData); add()will allow Cloud Firestore to auto-generate an ID.
Run npm start. If we go back to the Firebase database tab on our browser and refresh, it should show our recently created meal document!
Once tested, we can move our firebase stuff over to a separate component. For this example, we’ll be using react-hook-forms and data-fns. Create Form.js within src/components, and include the following:
In the code above, we import firebase, data-fns, and react-hook-forms. We also add the form data to our foods collection whenever onSubmit is triggered. The content is a textarea input, and users have the can enter multiple content by separating with a ,.
Now let’s create a component to grab and render our foods collection from firebase. Create a Meals.js component and include the following:
In the code above, we connect to firebase on mount and grab the documents from the foods collection.
It’s also possible to query the stuff we want using Cloud Firestore’s built in query methods.
where( )'s comparison operation: <, <=, ==, >, >=, array-contains, in, or array-contains-anyWe can clean up the code above and even make firebase listen for realtime updates!
Let’s ditch useEffect and replace the .get().then(snapshot) => ... with .onSnapshot(snapshot => .........) to listen for changes.
Now all there is left to do is import these two components to App.js and add some css. We are done!
Conclusion
I initially wrote this blog to help others out with setting up Firestore in React, but figured it was a good opportunity to discuss SQL vs NoSQL databases. There are pros and cons to both, but at the end of the day, choosing the database will depend on a lot of factors. Hopefully the resources included below will shed some light on that topic and inspire you to explore new databases.
