how to get both values of ORDER and OrderItems - reactjs

Question

I am trying to fetch data from Firebase Cloud Firestore and load it into my ReactJS app upon loading into the browser.
In this code, I only get the value of ORDER.
How to get both the values ORDER and OrderItems?
componentDidMount() {
firestore
.collection('ORDERS')
.get()
.then((querySnapshot) => {
const ORDERS = [];
querySnapshot.forEach((doc) => {
const data = doc.data();
ORDERS.push(data);
});
this.setState({ ORDERS: ORDERS });
})
.catch((error) => console.log(error));
}
how to get both the values

Answer 1

Fetching items from a sub-collection
You are currently fetching the items from the ORDERS collection. You can take an order document and fetch the orderItems within it by using a reference.
I've used async/await. However, you can easily convert this to use promises.
// Set the reference for the order document
const orderRef = firestore.collection('ORDERS').doc(orderId);
// Fetch the document and extract the data
const orderDS = await orderRef.get();
const orderData = orderDS.data();
// Fetch the orderItems and add them to an array
const orderItemsQS = await orderRef.collection('orderItems').get();
const orderItems = orderItemsQS.docs.map(orderItemQDS => (
const {id, ref, path} = orderItemsQDS; // You can add one or more of these to make it easy to update values back into Firestore
const data = orderItemsQDS.data();
return {id, ref, path, data};
));
You can either fetch these as you use your forEach and push or (recommended) only fetch orderItems when a user has selected an ORDER.
Alternative document references
Option 1
const orderRef = firestore.collection('ORDERS').doc(orderId);
const orderItemsQS = await orderRef.collection('orderItems).get();
Option 2
const orderItemsQS = await firestore
.collection('ORDERS').doc(orderId)
.collection('orderItems').get();
Option 3
const orderItemsQS = await firestore.collection(`ORDERS/${orderId}/orderItems`).get();
Naming conventions
I add the following suffixes to my variable names to make them easier to read:
QS = QuerySnapshot
QDS = QueryDocumentSnapshot
DS = DocumentSnapshot
Javascript reference
This is a really useful resource to help you when getting started.
https://firebase.google.com/docs/reference/js/firebase.firestore