Use withConverter together with bindFirestoreRef for firestoreAction

[sceee]

Is it possible to use withConverter to convert streaming data from Firestore directly within a firestoreAction action so that objects can be transformed/converted to custom types?

I tried it but the issue is that bindFirestoreRef(..) requires a firestore.CollectionReference<firestore.DocumentData> | firestore.Query<firestore.DocumentData> as second parameter (the query/Firestore reference). So you cannot just append .withConverter(...) to the query that is handed to the bindFirestoreRef(...).

Is this possible somehow?

[taylorhoward92]

I've been able to use withConverter. I'm using vuex-module-decorators so my syntax might be different to yours.

import * as schema from '@vendida/schema';
import { Action, Module, VuexModule } from 'vuex-module-decorators';
import firebaseApp from '../../utils/firebase';
import { firestoreAction } from 'vuexfire';

@Module({ name: 'Categories' })
export default class Categories extends VuexModule {

  categories: schema.models.Category[] = [];

  @Action
  bindCategories() {
    return (firestoreAction(
      ({ bindFirestoreRef }) =>
        bindFirestoreRef(
          schema.models.Category.COLLECTION_NAME,
          firebaseApp
            .firestore()
            .collection(schema.models.Category.COLLECTION_NAME)
            .withConverter(schema.models.Category.getFirestoreConverter())
        )
    ) as Function)(this.context);
  }

  @Action
  unbindCategories() {
    return (firestoreAction(
      ({ unbindFirestoreRef }) =>
        unbindFirestoreRef(schema.models.Category.COLLECTION_NAME)
    ) as Function)(this.context);
  }

}

[Chippd]

This is the second time I've arrived here looking for this answer, so for future Chris, here you go, past Chris got it working.

bindUserData: firestoreAction(async ({ bindFirestoreRef }, uid) => {

		try {
			let bound = await bindFirestoreRef('userData',
				db.collection('users')
				.withConverter(helpers.userDataConverter)
				.doc(uid)
			);
		console.log('user data bound to id:', uid)
		return bound
		} catch(e){
			console.log('binding error:', e)
			return new Error(e)
		}
}),

[posva]

Implemented in 18224e4 (might still change and feedback welcome once it's released)