getDatabase() → Firestore database where we want to add data as a document.
collection() → Where we want to add collection nam e and database references.
addDoc() → Where we actually pass our data along with the collection name and db references.

import { getFirestore, collection, addDoc } from "firebase/firestore";

JavaScript

Copy

1. Initialize Firestore Database

Initialize Firestore database and store it in constant called db

const db = getFirestore(app);

JavaScript

Copy

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.

2. Collection() Method

This collection() method also takes two arguments.

database → db
collection name → users

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");

JavaScript

Copy

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?

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 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.

3. 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"
};

JavaScript

Copy

4. 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);
})

JavaScript

Copy

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.

It has three columns.

First column → users collection.
Second column → Firebase automatically created a unique document id which is normally an alphanumeric value.

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

Third column → Actual data stored as a document in a key-value pair format.

5 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(docRef.id); //p4eZcO5QV43IYnigxALJ
})
.catch(error => {
    console.log(error);
})

JavaScript

Copy

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().

Disqus Recommendations

We were unable to load Disqus Recommendations. If you are a moderator please see our troubleshooting guide.

❮

3 years ago
1 comment

The onAuthStateChanged() method is triggered when a user's authentication state …

5 years ago
3 comments

Add an image as a background of an HTML element then resizing and …

5 years ago
8 comments

Learn how to create reusable and scalable form validation for Signup and login …

4 years ago
1 comment

In this short Firebase tutorial, you're going to see a side by side comparison of …

4 years ago
1 comment

In this short tutorial, I'm going to show how to implement Marker …

6 years ago
1 comment

Learn how to design a simple header / banner using HTML & CSS for …

5 years ago
2 comments

Learn how to get up and running with the VueJS 3 project from scratch with …

4 years ago
14 comments

Learn how to get a specific document data by its id using getDoc() method in …

❯

tempest.services.disqus.com

tempest.services.disqus.com is blocked

This page has been blocked by an extension

Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

Disqus Comments

We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.

Join the discussion…

Comment

Log in with

or sign up with Disqus or pick a name

Disqus is a discussion network

Don't be a jerk or do anything illegal. Everything is easier that way.

Read full terms and conditions

This comment platform is hosted by Disqus, Inc. I authorize Disqus and its affiliates to:

Use, sell, and share my information to enable me to use its comment services and for marketing purposes, including cross-context behavioral advertising, as described in our Terms of Service and Privacy Policy, including supplementing that information with other data about me, such as my browsing and location data.
Contact me or enable others to contact me by email with offers for goods or services
Process any sensitive personal information that I submit in a comment. See our Privacy Policy for more information

Acknowledge I am 18 or older

Favorite this discussion
Discussion Favorited!

Favoriting means this is a discussion worth sharing. It gets shared to your followers' Disqus feeds, and gives the creator kudos!

Find More Discussions

Tweet this discussion
- Share this discussion on Facebook
- Share this discussion via email
- Copy link to discussion
Best
- Newest
- Oldest

I want to append new documents to the existing collection whenever new data sets are available from client-side. As of now, while using addDoc(), it's appending even the existing documents, which is increasing the length of the collection.

For ex: At first, there are 30 documents (records), events fetched from Google Calendar API, added to events collection, and the next time when user has more events in their calendar, I want to append/update the new events/documents ONLY to the events collection instead of the old ones as well.

The above scenario is giving me something like this:

At first, 30 events.

When user has 10 more: 30+30+10

I am using addDoc(). And I don't see setDoc() or updateDoc() doing that. Is there any way to acheive that?

Show more replies

Hello, kindly update the last code snippet

```

console.log( dbRef.id); //p4eZcO5QV43IYnigxALJ

```

console.log( docRef.id); //p4eZcO5QV43IYnigxALJ

```

Ahh. Thank you for the catch. Updated now! :)

Load more comments

live.rezync.com

live.rezync.com is blocked

This page has been blocked by an extension

Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

pippio.com

pippio.com is blocked

This page has been blocked by an extension

Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

Twitter Widget Iframe

Firebase Version 9 Tutorial (Modular)

Firebase Version 8 Tutorial (Namespaced)

1. Initialize Firestore Database

2. Collection() Method

3. Document Data {}

4. Add Document Data Using addDoc()

5 Get The Document ID Using addDoc()

tempest.services.disqus.com is blocked

Log in with

or sign up with Disqus or pick a name

Disqus is a discussion network

Discussion Favorited!

live.rezync.com is blocked

pippio.com is blocked