Firebase V9 Firestore Add Data Using setDoc()
Tags: firebase, javascript, webdev, beginners
Published: 2022-08-01 11:55:05

---
canonical_url: https://softauthor.com/firebase-firestore-add-document-data-using-setdoc/
---

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

- [addDoc()](https://softauthor.com/firebase-firestore-add-document-data-using-adddoc/)
- **setDoc()** → _you’re here_

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

1. [Create A Firebase Project from Firebase Console](https://softauthor.com/add-firebase-to-javascript-web-app/#create-a-firebase-project-from-firebase-console)
2. [Register an app for Web (JavaScript)](https://softauthor.com/add-firebase-to-javascript-web-app/#register-app-for-web)
3. [Add Firebase SDK to JavaScript Web app](https://softauthor.com/add-firebase-to-javascript-web-app/#add-firebase-sdk-to-javascript-web-app)

Using the **setDoc()** method, you can add a document to the Firestore database by creating:

- [Auto-generated ID](https://softauthor.com/firebase-firestore-add-document-data-using-setdoc/#add-document-data-setDoc-auto-id) or
- [Custom ID](https://softauthor.com/firebase-firestore-add-document-data-using-setdoc/#add-document-data-setdoc-custom-id)

###Add Data Using setDoc() With Auto-ID

In order to use the **setDoc()** method, we need to import **three methods** from the Firebase **Firestore Import Statement**.

```JavaScript
import { getFirestore, collection, setDoc } from "firebase/firestore";
```

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. **setDoc()** → Where we actually pass our **data** along with the **collection name** and **db** references.

Initialize Firestore database:

```JavaScript
const db = getFirestore(app);
```

####Collection() Method

The first argument of **setDoc()** method is the **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 (**countries**) in quotes to it.

Assign it to a constant called **dbRef**.

```JavaScript
const dbRef = collection(db, "countries");
```

####Document Data {}

The **second argument** of the **setDoc()** method is the **actual data** that we want to store as a **document** inside the **countries** 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**.

```JavaScript
const data = {
   name: "Ottawa",
   country: "Canada",
   province: "ON"
};
```

####Make A setDoc() Query

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

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

```JavaScript
import { getFirestore, collection, setDoc } from "firebase/firestore";

// Your Firebase SDK Initialization code here

const db = getFirestore(app);

setDoc(dbRef, data)
.then(docRef => {
    console.log("Document has been added successfully);
})
.catch(error => {
    console.log(error);
})
```

Run the **setDoc()** query…

And you can see a **brand new document** has been created inside the **countries** collection with an **auto-generated document ID**.

![alt text](https://softauthor.com/wp-content/uploads/2022/06/Add-Data-To-Firestore-Using-setDoc-Auto-ID-1024x556.png)

###Add Data Using setDoc() With Custom-ID

With the **setDoc()** method, we can create our own **custom document ID** when adding data to Firestore database.

Instead of using the **collection()** method, we need to use the **doc()** method.

```JavaScript
import { getFirestore, doc, setDoc } from "firebase/firestore";
```

1. **getDatabase()** → **Firestore database** where we want to add data as a document.
2. **doc()** → Where we want to add **collection name** and **database references** as well as our **custom document ID**.
3. **setDoc()** → Where we actually pass our data along with the collection name and db references.

####Doc() Method

The first argument of the **setDoc()** method when creating a custom document ID will be **doc()** method.

This **doc()** method takes three arguments.

- **database** → db
- **collection name** → countries
- custom document ID → **my.custom.id@gmail.com** (_this could be anything you would like_)

Invoke the **doc()** method and pass **database** (db) reference and **collection name** (cities) in quotes and your own **custom document ID** (my.custom.id@gmail.com) as arguments.

Assign it to a constant called **docRef**.

```JavaScript
const docRef = doc(db, "countries", "my.custom.id@gmail.com" );
```

####Document Data {}

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

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

```JavaScript
const data = {
   name: "Ottawa",
   country: "Canada",
   province: "ON"
};
```

####Make A setDoc() Query

Let’s call the **setDoc()** method and pass **docRef** and **data** as arguments to it.

```JavaScript
import { getFirestore, collection, setDoc } from "firebase/firestore";

// Your Firebase SDK Initialization code here

const db = getFirestore(app);

const docRef = doc(db, "countries", "my.custom.id@gmail.com" );

const data = {
   name: "Ottawa",
   country: "Canada",
   province: "ON"
};

setDoc(docRef, data)
.then(() => {
    console.log("Document has been added successfully);
})
.catch(error => {
    console.log(error);
})
```

Run the **setDoc()** query…

And you can see a **brand new document** has been created inside the **countries** collection, but this time with our own **custom document ID**.

![alt text](https://softauthor.com/wp-content/uploads/2022/06/Add-Data-To-Firestore-Using-setDoc-Custom-ID-1024x553.png)

>Note: One of the cases for using a **custom document ID** would be an email address as they’ll be unique to each user.

>However, it’s often **recommended** to let Firestore create the **Auto-generated Document ID** in order to avoid accidental duplications.

Using **setDoc()** method, you can also update existing document data.