Firestore references create a "TypeError: Converting circular structure to JSON"

Question

I'm using Firebase's Firestore inside a Vue JS app:

"firebase": "^5.8.0",
"vue-firestore": "^0.3.16",

When I try fetching a document which has a field referencing another document (reference type in Firestore), I get the following error:

[Vue warn]: Error in render: "TypeError: Converting circular structure to JSON"

Whenever I change the type of that field in the document to a string, it seems to work fine.

I understand this is because of something in the Firestore JS SDK that is trying to serialize the document (and a bunch of metadata coming with the document) to JSON and there is a circular reference somewhere?

In my data's structure and fields I do not have a circular reference. It's simply one field that is referencing another document, and the referenced document has no more references to any other document.

My code for fetching the data is:

methods: {
      getContent() {
        const db = this.$firebase.firestore();
        db
          .collection('places')
          .doc(this.$route.params.placeKey)
          .orderBy('name')
          .get()
          .then(snap => {
            this.places = []

            snap.forEach(doc => {
              this.places.push(doc.data())
            })
          })
      }

So my questions are:

1) First of all, am I doing something incorrectly in my code? Even if there was no error being raised, would Firestore's JS SDK resolve the reference for me? Or would I have to call the reference and resolve it myself to get the referenced document's data? 2) What's the best practice with Firestore when you have documents you can be referenced? Should you use references? When? When would you denormalize?

Thanks!

Answer 1

To answer to your second question about storing References: actually, at the time of writing this answer, there is no real advantage of storing References (i.e. path elements) as Reference type instead of storing them as String.

Please watch this official video from Firebase https://www.youtube.com/watch?v=Elg2zDVIcLo&t=274s which contains detailed explanations (starting at 4:34).