The behavior for Date objects stored in Firestore is going to change

[marcoshuck]

Hi there, I want to share this error I have been getting when I try to test my firestore with my vuejs app

Console log

The behavior for Date objects stored in Firestore is going to change
AND YOUR APP MAY BREAK.
To hide this warning and ensure your app does not break, you need to add the
following code to your app before calling any other Cloud Firestore methods:

  const firestore = firebase.firestore();
  const settings = {/* your settings... */ timestampsInSnapshots: true};
  firestore.settings(settings);

With this change, timestamps stored in Cloud Firestore will be read back as
Firebase Timestamp objects instead of as system Date objects. So you will also
need to update code expecting a Date to instead expect a Timestamp. For example:

  // Old:
  const date = snapshot.get('created_at');
  // New:
  const timestamp = snapshot.get('created_at');
  const date = timestamp.toDate();

Please audit all existing usages of Date when you enable the new behavior. In a
future release, the behavior will change to the new behavior, so if you do not
follow these steps, YOUR APP MAY BREAK.

api.js

import Firebase from '@firebase/app'
import '@firebase/firestore'
import config from './config'

const firebaseApp = Firebase.initializeApp(config, {
  timestampsInSnapshots: true
})

const api = firebaseApp.firestore()

export default api

main.js

import Vue from 'vue'
import App from './App.vue'
import Firestore from 'vue-firestore'

Vue.use(Firestore)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

The view renders but there is no content from firestore.

Hope you can help me!!

Greetings from Argentina.

[amranidev]

hello @marcoshuck

Well, as mentioned in the log, you need to audit the usage of the dates, because timestamps stored in Cloud Firestore will be read back as Firebase Timestamp objects instead of as system Date objects.

Basically, you should add timestampsInSnapshots parameter into the Firestore.

• In api.js

import Firebase from '@firebase/app'
import '@firebase/firestore'
import config from './config'

const firebaseApp = Firebase.initializeApp(config, {
  timestampsInSnapshots: true
})

const api = firebaseApp.firestore({timestampsInSnapshots: true})

export default api

Finally, In your component, don't forget to parse the timestamps timeStamps.toDate()

Thanks!

[marcoshuck]

Hello @amranidev, thank you for your help.

I have solved the problem making changes on api.js as you suggested.

This is what I did, and it's working fine right now. Note that I'm not longer passing the settings through initializeApp() neither firestore(), I'm doing it on the settings() method as firebase suggested on the console log. For a weird reason this wasn't working last night.

import Firebase from '@firebase/app'
import '@firebase/firestore'
import config from './config'

const firebaseApp = Firebase.initializeApp(config)

const api = firebaseApp.firestore()
api.settings({timestampsInSnapshots: true})

export default api

[skndungu]

This Worked liked charm for mine after some pieces of struggle, Thanks @marcoshuck I borrowed alot from your post

import firebase from '@firebase/app' import 'firebase/firestore' import firebaseConfig from './firebaseConfig' const firebaseApp = firebase.initializeApp(firebaseConfig) export default firebaseApp.firestore() const api = firebaseApp.firestore() api.settings({timestampsInSnapshots: true})

[skndungu]

In my firebaseInit.js file I changed it to this and its very awesome now

[skndungu]

In my firebaseInit.js file I changed it to this and its very awesome now

import firebase from '@firebase/app' import '@firebase/firestore' import firebaseConfig from './firebaseConfig' const firebaseApp = firebase.initializeApp(firebaseConfig)

const api = firebaseApp.firestore() api.settings({timestampsInSnapshots: true}) export default api

[amranidev]

Glad it works 👍