Recursively Clean Firestore FieldValue.delete()

Recursively Clean Firestore FieldValue.delete()

How to recursively remove delete methods from the document’s object you just updated and have in memory. When you use Cloud Firestore, in order to delete specific fields from a document, you have to use the FieldValue.delete() method when you update a document (as displayed in the documentation).

This morning I had to improve a function we used in DeckDeckGo to recursively clean objects after persistence. Because I am currently quite busy but would not like to push my blogging habits too much on the side, I got the idea that this small “hack” would be a nice subject for a new blog post 🤗.

Introduction

When you use Cloud Firestore, in order to delete specific fields from a document, you have to use the FieldValue.delete() method when you update a document (as displayed in the documentation).

For example, your database contains a document such as the following:

{
  description: 'Hello World'
}

You would have to use the above method to remove it, as setting it for example to null would not remove the attribute but “only” set its value to null .

import * as firebase from 'firebase/app';
import 'firebase/firestore';

const firestore = firebase.firestore();

const ref = firestore.collection('users').doc('david');
const user = {
  description: firebase.firestore.FieldValue.delete()
};
await ref.update(user);

Thanks to this method, the above document’s example becomes {} in the database.

Issue

This method works like a charm but can lead to an issue. Indeed, if you are not refreshing your local object after its update, it will still contain the method FieldValue.delete() afterwards, which does not reflect its effective value in database.

Concretely, with our above example, if we would print out the user to the console, its output would be the following.

{
  description: n {h_: n}
}

This can lead to some unexpected behavior in your application, if you are still using the object after its update, notably if it is a state.

firebase programming javascript firestore web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Firebase Realtime Database For Web - Javascript

Firebase Realtime Database For Web - Javascript. Build simple list member app with CRUD operation with firebase firestore and how to implement the real time database.

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.