Im trying to convert my version 8 working code to version 9 but I cant figure out why im getting the error: 'FirebaseError: Expected type 'Query', but it was: a custom DocumentReference object'. It seems not like messagesRes but I put in a query and I think im correctly getting the subcollection.
version 8: working
export async function getServerSideProps(context) {
const chatRef = db.collection('chats').doc(context.query.id);
const messagesRes = await chatRef
.collection('messages')
.orderBy('timestamp', 'asc')
.get();
const messages = messagesRes.docs
.map(doc => ({
id: doc.id,
...doc.data(),
}))
.map(messages => ({
...messages,
timestamp: messages.timestamp.toDate().getTime(),
}));
const chatRes = await chatRef.get();
const chat = {
id: chatRes.id,
...chatRes.data(),
};
return {
props: {
messages: JSON.stringify(messages),
chat,
},
};
}
version 9:
export async function getServerSideProps(context) {
const chatRef = doc(db, 'chats', context.query.id);
const messagesRes = await getDocs(
query(collection(chatRef, 'messages'), orderBy('timestamp', 'asc'))
);
const messages = messagesRes.docs
.map(doc => ({
id: doc.id,
...doc.data(),
}))
.map(messages => ({
...messages,
timestamp: messages.timestamp.toDate().getTime(),
}));
const chatRes = await getDocs(chatRef);
const chat = {
id: chatRes.id,
...chatRes.data(),
};
return {
props: {
messages: JSON.stringify(messages),
chat,
},
};
}
According to the API documentation:
export declare function getDocs<T>(query: Query<T>): Promise<QuerySnapshot<T>>;
And in your code you are doing:
const chatRes = await getDocs(chatRef);
That is why you are seeing the error:
'FirebaseError: Expected type 'Query', but it was: a custom DocumentReference object'.
because you are passing in your document reference and not a query.
Like you did here:
const messagesRes = await getDocs(
query(collection(chatRef, 'messages'), orderBy('timestamp', 'asc'))
);
You can see the correct usage of the API here.
Didn't work for me but I modified it a bit and used the firebase 9 collections and filtered the collection where the context.query.id is valid to SSR before the page load.
export async function getServerSideProps(context) {
const chatID = context.query.id;
const chatIDRef = collection(db, "chats");
//prep messages
const messagesRes = await getDocs(chatIDRef, where(chatID, "==", chatID));
console.log("ctx log: ", messagesRes);
const messages = messagesRes.docs
.map((doc) => ({
id: doc.id,
...doc.data(),
}))
.map((messages) => ({
...messages,
timestamp: messages.timestamp?.toDate().getTime(),
}));
//prep chat
const chatIDRef2 = doc(db, "chats", chatID);
const chatRef = await getDoc(chatIDRef2);
const chat = {
id: chatRef.id,
...chatRef.data(),
};
return {
props: {
messages: JSON.stringify(messages),
chat: chat,
},
};
}