What is the cleanest way to query All reference documents inside a of document while querying a collection of documents?

[catrawalkar]

Steps to reproduce

I have 2 different collections: animals (1) and types (2).

Animals Collection looks like this:

animals : {
     [
       name: Lion,
       type: wildAnimalsDocumentReference (referenceType)
     ],
     [
       name: Dog,
       type: domesticAnimalsDocumentReference (referenceType)
     ]
   }

Types Collection looks like this:

types : {
     (wildAnimalsDocument)
     [
       isDangerous: true,
     ],
    domesticAnimalsDocument
     [
       isDangerous: false,
     ]
   }

I want to query animals collection so that all the reference document information will also be available to me. Result I am looking for is like this:

animals : {
     [
       name: Lion,
       type: wildAnimalsDocumentReference (referenceType),
       typeDoc: {
              isDangerous: true
            }
     ],
     [
       name: Dog,
       type: domesticAnimalsDocumentReference (referenceType),
       typeDoc: {
              isDangerous: false
            }
     ]
   }

What is the cleanest way to do this?

Right now I am doing something like:

const animals = useFirestoreCollectionData(animalsRef);

  useEffect(() => {
    if (animals.length > 0) {
      animals.forEach(animal => {
        animal.type
          .get()
          .then(doc => (animal.typeDoc = doc.data()))
          .catch(err => console.log(err));
      });
    }
  });

[catrawalkar]

Sandbox Link

Ps It is still not really working for me in sandbox.

[JoFont]

Unfortunately I think Firebase doesn't have a way to natively pre populate references tho It would be great to have that feature with ReactFire even considering that it would iterate through references to populate the values, which would count to increased billed read ops.