Firestore: Add Custom Object to db

Question

Good Morning,

I tried adding a new created object from this class:

export class Sponsor implements ISponsor {

  title: string;    
  description?: string;
  creation: ICreation;

  constructor(title: string, description: string, author: string) {
     this.title = title;
     this.description = description;
     this.creation = new Creation(author);
  }
}

and in my service, the create function looks like:

createSponsor(sponsor) {
   sponsor.id = this.afs.createId();
   return this.collection.doc(sponsor.id).set(sponsor);
}

When I try it this way, I get the following error:

FirebaseError: [code=invalid-argument]: Function DocumentReference.set() called with invalid data. Data must be an object, but it was: a custom Sponsor object

How can I solve this issue?

score 33 · Accepted Answer · answered Oct 10 '17 at 15:35

33

You can also use Object.assign({}, sponsor)

so in yor case it would be

this.collection.doc(sponsor.id).set(Object.assign({}, sponsor));

answered Oct 10 '17 at 15:35

sgt_lagrange

452
5
6

1

This works, but I found it very "hack-ish". Why Firebase has no correct way of dealing with this? – Bjarne Gerhardt-Pedersen Jan 30 '18 at 12:11
4

This works fine but you should take in care that `Object.assign` not working for deep clone. – Quethzel Diaz Feb 06 '18 at 19:40
2

doesn't suit for nested objects – Viacheslav Dobromyslov Jan 02 '20 at 20:21

score 24 · Answer 2 · edited Dec 10 '17 at 13:05

24

You could also serialize your object into JSON and deserialize it back into a regular JavaScript object like

this.collection.doc(sponsor.id).set(JSON.parse( JSON.stringify(sponsor)));

works with deep nesting.

edited Dec 10 '17 at 13:05

frogatto

28,539
11
83
129

answered Dec 10 '17 at 11:59

Peter

241
2
3

Have you experienced any limitations using this method? I'd assume it'd be way harded to query data or am I mistaken? – Ruben Szekér May 01 '21 at 08:49
3

this will corrupt the timestamp object when saving to firestore. – GorvGoyl Jul 28 '21 at 17:16

score 8 · Answer 3 · answered Jun 03 '18 at 15:52

8

Firestore does not support that. But you can use https://github.com/typestack/class-transformer It works perfectly fine for us.

answered Jun 03 '18 at 15:52

Jürgen Brandstetter

7,066
3
35
30

Which method is recommended? – João Eudes Lima Sep 06 '20 at 09:09
I found using a combination of '.set(classToPlain(yourObject))' works well – Alex Marchant Jan 11 '21 at 00:28
1

Since recently, firebase has a function called `withConverter`. You can through the `classToPlain` and `plainToClass` into it. That ways you code get's clearning. (That's all) https://firebase.google.com/docs/reference/node/firebase.firestore.FirestoreDataConverter – Jürgen Brandstetter Jan 11 '21 at 12:15

score 6 · Answer 4 · answered Oct 05 '17 at 07:09

6

Thx to Fabian Wiles - I got it!

while firebase could send the data inside your object to the database, when the data comss back it cannot instantiate it back into an instance of your class. Therefore classes are disallowed

just save an object like this:

interface Person{
  name: string;
  age: number
}

var person: Person = { name: 'Toxicable', age: 22} ;

answered Oct 05 '17 at 07:09

Coach

521
1
5
14

1

This is only fine as long as you only use an interface, and not a class constructor. – Bjarne Gerhardt-Pedersen Jan 30 '18 at 13:29

score 3 · Answer 5 · answered Nov 21 '21 at 06:37

Not sure if I'm missing something here but there seems to be a much simpler solution to this problem now.

Just use a spread operator to "splat" the class instance into an empty object like {...myClass}.

let myClass = new ClassInstance(
  "newClass",
  "This is a new class instance"
);

addDoc(dbReference, { ...myClass }).then(() => {
 console.log("Document successfully written!");
});

score 2 · Answer 6 · answered Jan 27 '18 at 05:51

2

For my solution I had an Interface:

export interface Launch {
 id: string;
 date: Date;
 value: number;

}

const project = {} as Launch;

this.db.collection('launches').add(project);

answered Jan 27 '18 at 05:51

Andre Evangelista

3,390
1
21
14

Anton Pegov · Answer 7 · 2017-10-24T16:52:22.517

It's really strange behavior from firebase. And that how I fixed it - by creating new Interface and adding convertation method to my class:

export class Happening {
 constructor(
  public date: EventDate,
  public participants: Array<string>,
  public title: string,
  public text: string,
  public uid?: string,
  public id?: string
 ){}

 public toDto = (): HappeningDto => {
  return {
    date: {
      year: this.date.year,
      month: this.date.month,
      day: this.date.day
    },
    participants: this.participants ? this.participants : [],
    title: this.title,
    text: this.text ? this.text : '',
    uid: this.uid,
    id: this.id ? this.id : null
  }
 }
}

export interface HappeningDto {
 date: {
  year: number,
  month: number,
  day: number
 },
 participants: Array<string>,
 title: string,
 text: string,
 uid?: string,
 id?: string
}

Now, I can do

add(event: Happening){
  event.uid = this.uid;
  this.$afs.collection<HappeningDto>('events').add(event.toDto())
    .then(
      (success) => console.log(success),
      (err) => console.warn(err)
    )
}

Kheldar · Answer 8 · 2018-02-04T19:33:38.070

If you use Angular and AngularFire2, you can use AngularFirestype. This module is meant to replace AngularFirestore and allow to get and set data to Firestore directly with custom objects.

To do so, 3 steps are required:

1. Install angular-firestype

`npm install angular-firestype --save`

2. Initialize AngularFirestype module with a mapping object

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFirestypeModule, ModelType } from 'angular-firestype';
import { environment } from '../environments/environment';

import { User } from './user.ts';
import { Address } from './address.ts';
import { Message } from './message.ts';

/**
 * Definition of the app model mapping.
 * For more information, see https://github.com/bricepepin/angular-firestype#mapping-object.
 */
const model: {[key: string]: ModelType<any>} = {
  users: {
    type: User,
    arguments: ['username', 'image'],
    structure: {
      adress: Address
    },
    subcollections: {
      messages: Message
    }
  }
};

@NgModule({
 imports: [
   AngularFireModule.initializeApp(environment.firebase),
   AngularFireAuthModule,
   AngularFirestypeModule.forRoot(model),   // Import module using forRoot() to add mapping information
 ],
 declarations: [ AppComponent ],
 bootstrap: [ AppComponent ]
})
export class AppModule {}

3. Inject AngularFirestype service

import { Component } from '@angular/core';
import { AngularFirestype, Collection, Document } from 'angular-firestype';

import { User } from './user.ts';

@Component({
 selector: 'app-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css']
})
export class AppComponent {
   const users: Observable<User[]>;
   const user: User;

   constructor(db: AngularFirestype) {
       const usersCollection: Collection<User> = db.collection<User>('users');
       usersCollection.valueChanges().subscribe(users => this.users = users);

       const userDoc: Document<User> = usersCollection.doc('user1');
       userDoc.valueChanges().subscribe(user => this.user = user);
       userDoc.set(this.user);
   }
}

You can basically use AngularFirestype like you use Angularfirestore.
For more details, see the homepage here: https://github.com/bricepepin/angular-firestype.

score 0 · Answer 9 · answered Nov 28 '20 at 13:26

0

I was having a similar problem using vue and nuxt

firebase.firestore().collection('example')
   .doc()
   .set({
       'foo' : 'boo'
   })

Error:

Data must be an object, but it was: a custom Object object

This link helped me

answered Nov 28 '20 at 13:26

Rodrigo João Bertotti

5,179
2
23
34

score 0 · Answer 10 · answered Aug 26 '21 at 13:44

export class Sponsor implements ISponsor {
  title: string;    
  description?: string;
  creation: ICreation;

  constructor(title: string, description: string, author: string) {
     this.title = title;
     this.description = description;
     this.creation = new Creation(author);
  }

 toJson(){
   return {
     title:this.title,
     description:this.description,
     creation:this.creation
   }
}

in service, the create function will looks like:

createSponsor(sponsor) {
   sponsor.id = this.afs.createId();
   return this.collection.doc(sponsor.id).set(sponsor.toJson());
}

Firestore: Add Custom Object to db

10 Answers10

1. Install angular-firestype

2. Initialize AngularFirestype module with a mapping object

3. Inject AngularFirestype service

Linked