Firebase V9 Firestore Update Document Data Using setDoc()
Tags: javascript, firebase, programming, webdev
Published: 2022-07-12 12:04:52


---
canonical_url: https://softauthor.com/firebase-cloud-firestore-update-document-data/
---

There are two methods you can use to update an existing document in Firebase Version 9 Cloud Firestore.

- **setDoc()** → _you’re here_
- [updateDoc()](https://softauthor.com/firebase-firestore-update-document-data-updatedoc/)

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

- [Create A Firebase Project from Firebase Console](https://softauthor.com/add-firebase-to-javascript-web-app/#create-a-firebase-project-from-firebase-console)
- [Register an app for Web --JavaScript](https://softauthor.com/add-firebase-to-javascript-web-app/#register-app-for-web)
- [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 update:

- [Entire existing document](https://softauthor.com/firebase-cloud-firestore-update-document-data/#firestore-update-entire-document) or
- [Specific document field](https://softauthor.com/firebase-cloud-firestore-update-document-data/#firestore-update-document-field) in the Firestore Database.

In addition to that, you can also [add a brand new document to a collection](https://softauthor.com/firebase-firestore-add-document-data-using-setdoc/) using setDoc() method.

###Firestore Update Entire Document

Here is the sample data stored in the Cloud Firestore.

![alt text](https://softauthor.com/wp-content/uploads/2022/06/firebase-cloud-firestore-database-update-document-setdoc-1024x690.png)

Let’s update an entire document using the setDoc() method.

In order to update data entirely using the **setDoc()** method, we need three methods.

- **getDatabase()** → where we want to update a document.
- **doc()** → where we’ll be passing references of database, collection and ID of a document that we want to update.
- **setDoc()** → where we actually pass new data that we want to replace along with the **doc()** method.

Import **Firestore Database** and **de-structure** the three methods we need:

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

**Initialize Firestore** Database:

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

###Doc() Method

The first argument of the **setDoc()** method is the **doc()** method.

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

- **database** → db
- **collection name** → cities
- **document ID** → p4eZc05QV43InigxALJ (ID of a document – see screenshot above)

Call the **doc()** method and pass database references (**db**), collection name (**cities**) and document ID (**p4eZc05QV43InigxALJ**).

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

```JavaScript
const docRef = doc(db, "cities", "p4eZc05QV43InigxALJ");
```

###Document Data {}

The **second argument** of the **setDoc()** method is the **actual data** that we want to update an existing document entirely inside the **cities** collection.

>As you can see the new data has complete different than the existing document data in the Firestore database including the field name.

```JavaScript
const data = {
  title: "Vancouver",
  provinceName: "British Columbia",
  countryCode: "CA"
};
```

###SetDoc() Query To Update A Document

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

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

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

// Your Firebase SDK Initialization code here

const db = getFirestore(app);

const docRef = doc(db, "cities", "p4eZc05QV43InigxALJ");

const data = {
  title: "Vancouver",
  provinceName: "British Columbia",
  countryCode: "CA"
};

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

Run the **setDoc()** query…

And you can see an **existing document** has been update entirely inside the **cities** collection including field names.

![alt text](https://softauthor.com/wp-content/uploads/2022/06/firebase-cloud-firestore-database-update-document-setdoc-2-1024x622.png)

When you use the **setDoc()** method with an existing ID, it will **delete the entire document data** and replace it with the **newly provided data**.

###Firestore Update Document Field

What if we want to just **update** a value of a **specific field** in an **existing document**.

To do that, all we have to do is add a third argument to the **setDoc()** method.

It will be a **JavaScript object** with a single property:

**merge:true**

```JavaScript
import { getFirestore, doc, setDoc } from "firebase/firestore";
...
setDoc(docRef, data, { merge:true })
.then(docRef => {
    console.log("Document Field has been updated successfully);
})
.catch(error => {
    console.log(error);
})
```

When we add **merge:true**, the **setDoc()** method has 4 significant **behaviours** which are:

1. If the **data object is empty**, the query does nothing in the Firestore document when **merge:true** is set.
2. If the **data object** has an existing **field name** and **value matching exactly** in the Firestore document, the **query does nothing**.
3. If the **data object has any existing field name with the new value**, the query will **update a value of that field** in the Firestore document.
4. If the **data object has a field name with a value that does not exist** in the Firestore document, the query will **add that field to the document**.