Firebase V9 Firestore Add Document Data Using addDoc() [2022]

There are two methods that we can use to add document data to the Firebase Version 9 Cloud Firestore.

addDoc() → you’re here

setDoc()

Other Firebase 9 Tutorials in this series:

Update Document Data Using setDoc()
UPDATE Document Data Using upda…

There are two methods that we can use to add document data to the Firebase Version 9 Cloud Firestore.

Other Firebase 9 Tutorials in this series:

Note: Before going further, you’ll need to do three things:

  1. Create A Firebase Project from Firebase Console
  2. Register an app for Web – JavaScript
  3. Add Firebase SDK to JavaScript Web app

In order to use the addDoc() method, we need to import three methods from the Firebase Firestore import statement.

  1. getDatabase() → Firestore database where we want to add data as a document.
  2. collection() → Where we want to add collection name and database references.
  3. addDoc() → Where we actually pass our data along with the collection name and db references.
import { getFirestore, collection, addDoc } from "firebase/firestore";

Initialize Firestore Database

Initialize Firestore database and store it in constant called db

const db = getFirestore(app);

The addDoc() method will take two arguments:

  • collection() – pass database and collection name references as arguments to it.
  • data {} – data that we want to add to a collection as one of its documents.

Collection() Method

This collection() method also takes two arguments.

  • databasedb
  • collection nameusers

Invoke the collection() method and pass database references (db) and collection name (users) in quotes to it.

Assign it to a constant called dbRef.

const dbRef = collection(db, "users");

As you can see, Firestore Database does not have the collection name users

You may wonder…

How can we add data to a collection that does not exist in the Firestore Database?

alt text

In the Firestore Database, you can only add one or more documents inside a collection.

But you won’t be able to add the collection itself without any document.

When you add data as a document to a collection, the addDoc() method will try to find the collection name specified in the collection() method.

In this case users.

If it’s unable to find the collection name users,

It will create a new collection called users and add the data inside it as a document.

Document Data {}

The second argument of the addDoc() method is the actual data that we want to store as a document inside the users collection.

The good news is that we can simply store a JavaScript object as document data inside the Firestore database.

So let’s create a JavaScript object with a couple of key-value pairs aka properties.

const data = {
   name: "Raja Tamil",
   country: "Canada"
};

Add Document Data Using addDoc()

Now we have both arguments we need in order to use addDoc() method successfully.

Let’s call the addDoc() method and pass dbRef and data as arguments to it.

import { getFirestore, collection, addDoc } from "firebase/firestore";
...
addDoc(dbRef, data)
.then(docRef => {
    console.log("Document has been added successfully);
})
.catch(error => {
    console.log(error);
})

Run the app.

Switch back to the Firestore Database page, then refresh and you can see we’ve successfully added data to the Firestore Database.

alt text

It has three columns.

  • First columnusers collection.
  • Second column → Firebase automatically created a unique document id which is normally an alpha numeric value.

This is super useful because we can identify any document in the users collection using this auto-id or document id.

  • Third columnActual data stored as a document in a key-value pair format.

Get The Document ID Using addDoc()

Sometimes, you would want to get the auto-generated document ID immediately right after data has been added to the Firestore Database.

Luckily, you can do that using the addDoc() method.

In order to get the auto-generated ID from the response, all we have to do is access the id property on the docRef object.

addDoc(dbRef, data)
.then(docRef => {
    console.log(dbRef.id); //p4eZcO5QV43IYnigxALJ
})
.catch(error => {
    console.log(error);
})

There are times when you want to add document data to Cloud Firestore using your own custom document id, such as email, etc instead of an auto-generated id.

Luckily, we can do that using the other method called setDoc().


Print Share Comment Cite Upload Translate
APA
Raja Tamil | Sciencx (2024-03-28T11:54:32+00:00) » Firebase V9 Firestore Add Document Data Using addDoc() [2022]. Retrieved from https://www.scien.cx/2022/07/04/firebase-v9-firestore-add-document-data-using-adddoc-2022/.
MLA
" » Firebase V9 Firestore Add Document Data Using addDoc() [2022]." Raja Tamil | Sciencx - Monday July 4, 2022, https://www.scien.cx/2022/07/04/firebase-v9-firestore-add-document-data-using-adddoc-2022/
HARVARD
Raja Tamil | Sciencx Monday July 4, 2022 » Firebase V9 Firestore Add Document Data Using addDoc() [2022]., viewed 2024-03-28T11:54:32+00:00,<https://www.scien.cx/2022/07/04/firebase-v9-firestore-add-document-data-using-adddoc-2022/>
VANCOUVER
Raja Tamil | Sciencx - » Firebase V9 Firestore Add Document Data Using addDoc() [2022]. [Internet]. [Accessed 2024-03-28T11:54:32+00:00]. Available from: https://www.scien.cx/2022/07/04/firebase-v9-firestore-add-document-data-using-adddoc-2022/
CHICAGO
" » Firebase V9 Firestore Add Document Data Using addDoc() [2022]." Raja Tamil | Sciencx - Accessed 2024-03-28T11:54:32+00:00. https://www.scien.cx/2022/07/04/firebase-v9-firestore-add-document-data-using-adddoc-2022/
IEEE
" » Firebase V9 Firestore Add Document Data Using addDoc() [2022]." Raja Tamil | Sciencx [Online]. Available: https://www.scien.cx/2022/07/04/firebase-v9-firestore-add-document-data-using-adddoc-2022/. [Accessed: 2024-03-28T11:54:32+00:00]
rf:citation
» Firebase V9 Firestore Add Document Data Using addDoc() [2022] | Raja Tamil | Sciencx | https://www.scien.cx/2022/07/04/firebase-v9-firestore-add-document-data-using-adddoc-2022/ | 2024-03-28T11:54:32+00:00
https://github.com/addpipe/simple-recorderjs-demo