What is the best way to utilize the FirestoreDataConverter when updating data?

I've encountered an issue while utilizing the FirestoreDataConverter for transforming objects into firestore data. It appears that the converter functions properly with the addDoc and setDoc operations, but fails to trigger the toFirestore function when used in conjunction with the updateDoc operation.

Example for Reproduction

interface Article {
  title: string;
  content: string;
}

async function addAndUpdateArticle() {
  const colRef = collection(firestore, 'articles')
    .withConverter(articleConverter);
  const article: Article = { title: 'Title', content: 'Text'};
  const docRef = doc(colRef);
  await setDoc(docRef, article);                      // Triggers toFirestore function
  const addedArticle = (await getDoc(docRef)).data(); // Triggers fromFirestore function
  if (!addedArticle) return;
  await updateDoc(docRef, addedArticle)               // Does NOT trigger toFirestore function
}

const articleConverter: FirestoreDataConverter<Article> = {
  toFirestore(article: Article): DocumentData {
    console.log("Conversion happened in to-converter");
    return { ...article};
  },

  fromFirestore(docSnap: QueryDocumentSnapshot): Article {
    console.log("Conversion happened in from-converter")
    return docSnap.data() as Article;
  },
};

Expected Output in Console

Conversion happened in to-converter
Conversion happened in from-converter
Conversion happened in to-converter

Actual Output in Console

Conversion happened in to-converter
Conversion happened in from-converter

This issue specifically occurs with the use of updateDoc. When switching to setDoc, the functionality works properly. Could it be that updateDoc is not supported by the Converter? There doesn't seem to be any mention of this in the documentation. Link to Documentation

Answer №1

This software is specifically engineered to facilitate the conversion of the primary level (T) data structure. When using the set() function, the type of data you provide must be either T or partial T, which is why the conversion process takes place.

In contrast, the update() function is meant for updating fields within a document, even if they are nested inside the data structure and may not necessarily be considered as partial T. As a result, the converter will not be triggered in this scenario.

Answer №2

After examining your code, it appears that you are utilizing Firestore Web Version 9, which features new syntax for data setting and updating. For more information, please consult this resource.

The behavior you are experiencing is intentional. The updateDoc() function in Web Version 9 utilizes a novel UpdateData type that conducts type checking and backs Field Values.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to determine the tally of users who have achieved a score greater than that of [userID]?

I have this SQL code that helps to determine the position of a specific entry based on its score compared to other entries. select (select count(*) from entries e2 where e1.score < e2.score) + 1 as pos from entries e1 where e1.ID = 36; Transla ...

Async/await is restricted when utilizing serverActions within the Client component in next.js

Attempting to implement an infinite scroll feature in next.js, I am working on invoking my serverAction to load more data by using async/await to handle the API call and retrieve the response. Encountering an issue: "async/await is not yet supported ...

Vue and TypeScript: The elusive 'exports' remains unidentified

Since switching my App.vue to utilize typescript, I am facing a compiler error: [tsl] ERROR in \src\main.ts(2,23) TS2304: Unable to locate the name 'exports'. If I have vue-serve recompile after making changes, I encounter t ...

The problem arises when the type of a Typescript literal union becomes more specific within React children

Currently, I am in the process of converting our React/Redux project to TypeScript and encountering a challenge with TypeScript literal type union types. The issue that I'm facing is as follows: I have instantiated a Wrapper component with a type pr ...

When employing HTTP GET within Angular 2, it prompts the retrieval of a response in my subsequent HTTP POST request for

Greetings! I am relatively new to Angular 2 and I am encountering some unexpected HTTP behavior. Below is my login method used to send an HTTP POST request to my backend server and retrieve a token. It is functioning properly. public login(username, pass ...

HTTP provider is missing! Error: No HTTP provider found! encountered injectionError at this juncture

Encountered an error: No provider for Http! Error: No provider for Http! at injectionError Sample Component File: import { Component,Injectable } from '@angular/core'; import { HttpModule, Http } from '@angular/http'; import { IonicPa ...

The object holds a value

How can I successfully put an object into a value attribute, for example: <option value={valueSort}>// valueSort = {name: 'ASC'}, to sort by name in my project? Currently, the result shows as [object Object] and I'm unsure of what that ...

Are there any solutions to refresh a page by clicking a button in next.js?

I am currently learning how to work with next.js and I'm facing an issue where I need to reload my page to make a new API request. As a beginner, I'm not sure how to achieve this. I've tried a few methods but none of them seem to work. Below ...

The binding element 'dispatch' is assumed to have the 'any' type by default. Variable dispatch is now of type any

I came across this guide on implementing redux, but I decided to use TypeScript for my project. Check out the example here I encountered an issue in the AddTodo.tsx file. import * as React from 'react' import { connect } from 'react-redux ...

Display a list of items using *ngFor in a dropdown menu without using the optgroup

Is there a way to group data from *ngFor in the dropdown selection without using optGroup? You can find the JSON file link below: JSON Data Typescript Code getProducts() { if (this.products.length < 1) { this.productService.getProducts ...

Resolving the problem of <Link> error in React with Typescript using react-router-dom

Currently, I am facing an issue with the 'react-router-dom' library. This is my first experience using React with Typescript; Everything was functioning properly until I introduced the from 'react-router-dom', which caused the entire ...

How to extract a specific property from data using Angular's HttpClient-subscribe

It seems like this question has been asked before, but I can't seem to find the answers or know what terms to search for. I have a JSON file structured like this: { "pages": [{ "displayname": "PageA", "url": "http://google.de", " ...

The base class is invoking a function from its child class

There are two classes, a base class and a derived one, each with an init function. When constructing the derived class, it should: Call its base constructor which: 1.1. Calls its init function Call its own (derived) init function. The issue is that ...

does not have any exported directive named 'MD_XXX_DIRECTIVES'

I am currently learning Angular2 and I have decided to incorporate angular material into my project. However, I am encountering the following errors: "has no exported member MD_XXX_DIRECTIVES" errors (e.g: MD_SIDENAV_DIRECTIVES,MD_LIST_DIRECTIVES). Her ...

Reusing methods in Javascript to create child instances without causing circular dependencies

abstract class Fruit { private children: Fruit[] = []; addChild(child: Fruit) { this.children.push(child); } } // Separate files for each subclass // apple.ts class Apple extends Fruit { } // banana.ts class Banana extends Fruit { } ...

Creating a unique theme export from a custom UI library with Material-UI

Currently, I am in the process of developing a unique UI library at my workplace which utilizes Material-UI. This UI library features a custom theme where I have integrated custom company colors into the palette object. While these custom colors work perfe ...

What is the method for accessing an anonymous function within a JavaScript Object?

Currently facing an issue with a Node.js package called Telegraf, which is a bot framework. The problem arises when trying to create typings for it in TypeScript. The package exports the following: module.exports = Object.assign(Telegraf, { Composer, ...

Identify the most suitable HTTP method within a reusable function for making API requests with Angular's HTTPClient module

I am working on implementing a reusable service to handle requests to my API. Currently, it is functioning as expected, but only for GET requests. This is the current function in use: makeAPIRequest = ({ ...opts }) => { return this.http.get(opts ...

A simple method in JavaScript/TypeScript for converting abbreviations of strings into user-friendly versions for display

Let's say I am receiving data from my backend which can be one of the following: A, B, C, D Although there are actually 20 letters that could be received, and I always know it will be one of these specific letters. For example, I would like to map A ...

Tips for extracting the y-coordinate from a touch event using d3

I am utilizing d3.js to display data in my Ionic app. I have a touch event that allows me to move a line and retrieve the coordinates where it intersects with my chart. While I can easily obtain the x-coordinate representing the date, I am struggling to ge ...