Why is Firebase Query [ ] despite async/await? - javascript

I'm still struggling to understand how to extract values from a Firestore Query and put them into a global variable. I (now) understand that the asynchronous nature means that code isn't executed in the order that it is written. But, why is user still undefined in the following code block despite the await keyword inside of an async function? I understand (based on this question) that await should be applied only up to get(), otherwise there may not be values to iterate over.
My question is similar to this, but I run into the same issue as the comment and it looks like the question was never marked as answered. It is also similar to this, but pushing all gets to a Promise and then resolving that promise still didn't assign the data to a variable. It just printed an empty array.
I can print the variable, so my question is about assignment, I think. This function is a handler for an Intent in DialogFlow. I strongly prefer to have the data available outside of the call to the db. Adding to agent responses in a call to firestore doesn't always add the text to the agent, so I'd like to avoid that.
async function loginHandler(agent){
username = agent.parameters.username.name;
password = agent.parameters.password;
const user = await db.collection("users")
.where("name","==",username)
.where("password","==",password)
.limit(1)
.get()
.then(querySnapshot =>{
querySnapshot.forEach(docSnapShot =>{
return docSnapShot.data();
//console.log.(docSnapShot.data()); //prints correct contents, so error is in programming logic
agent.add("Response"); // Would prefer to avoid this, but could refactor if I am fundamentally misunderstanding how to access Firebase data
})
})
.catch(error => console.log);
console.log(user);
console.log("bort");
}
Picture of Firestore to demonstrate that the correct data do exist:

You might be able to split the code up. Return the data from the database first, then map over the data to extract the details, and then assign that result to the user variable.
async function loginHandler(agent) {
username = agent.parameters.username.name;
password = agent.parameters.password;
// `await` the promise and assign it to
// `querySnapshot`
const querySnapshot = await db.collection('users')
.where('name', '==', username)
.where('password', '==', password)
.limit(1)
.get()
.catch(error => console.log);
const user = querySnapshot.docs.map(docSnapShot => {
agent.add('Response');
return docSnapShot.data();
});
console.log(user);
}

forEach iterates the results but doesn't return anything, so your return inside there isn't doing what you'd expect (forEach returns void so you're returning the snapshot to a function that is returning void). You can create a local variable to hold the results you iterate and then return that:
const user = await db.collection("users")
.where("name","==",username)
.where("password","==",password)
.limit(1)
.get()
.then(querySnapshot =>{
// Set up an empty array to return later
let data = []
querySnapshot.forEach(docSnapShot =>{
// Add each snapshot's data object to the array
data = [...data, ...docSnapShot.data()]
})
// Return `data` which will populate `user`
return data
})
.catch(error => console.log);

Have you checked what the correct answer is?
Please clarify whether you mean undefined as you say in the title, or empty array as you say in the text.
Your code looks correct to me. I would not expect the output of console.log(user) to be undefined. However, an empty list [ ] would be a perfectly reasonable answer.
Perhaps there is nobody in that collection with that username and password?
Have you tried removing the condition of equality of username and password? That should get you an element of the collection, if it is not entirely empty.

Related

Unable to perform a Firebase query on a timestamp and receiving an empty body in response

Can someone explain to me why I am not able to perform a simple Firebase query checking for a specific timestamp in a subcollection?
The code below works if I try to retrieve the whole document, but if I add the where query it just returns a 200 response with an empty body.
I have also tried to replace db.collection with db.collectionGroup and in this case I get a 500 response with the following message Collection IDs must not contain '/'.
Here you can see how I have structured my data and my code:
try {
const reference = db.collection(`/data/10546781/history`).where("timestamp", "==", 1659559179735)
const document = await reference.get()
res.status(200).json(document.forEach(doc => {
doc.data()
console.log(doc.data())
}))
} catch(error) {
res.status(500).json(error)
console.log(error)
};
It seems you are looking for map() that creates a new array and not forEach() loop that returns nothing. Try:
const reference = db.collection(`/data/10546781/history`).where("realtimeData.timestamp", "==", 1659559179735)
const snapshot = await reference.get()
const data = snapshot.docs.map((d) => ({
id: d.id,
...d.data()
}))
res.status(200).json(data)
Additionally, you need to use the dot notation if you want to query based on a nested field.
#Dharmaraj Thanks for the help. Your answer was part of the solution. The other part concerned how my data was structured. The timestamp needed to be at the parent level of the subcollection document. So either outside the realTimeData object or the whole object needs to be flattened at the parent level.

Result of querying Firestore Database shows up in console but won't be printed to screen in React Native [duplicate]

I'm learning React and Firestore currently and am a bit stuck. I'm trying to retrieve a users name from a firestore collection by searching their uid.
The following code is executed in a map of 'lessons' to create a list.
{lesson.post_author && findName(lesson.post_author)}
The following code is the findName function.
let findName = uid => {
firebase.firestore().collection("users")
.where('uid', '==', uid)
.get()
.then(querySnapshot => {
console.log(querySnapshot.docs[0].data().name);
});
};
Currently, the findName function will console log all of the names to the console successfully. I've altered the code to be able to console log outside of the firestore call, but that returns a promise pending in console.
The goal of the code is to return the name rather then the uid in the list.
Any help would be much appreciated.
Thank you!
As others have explained, you can't return that value, since it's loaded from Firestore asynchronously. By the time your return runs, the data hasn't loaded yet.
In React you handle this by putting the data in the component's state, and using it from there. If you do this, your render method can simply pick it up from the state, with something like:
{lesson.post_author && findName(lesson.post_author_name)}
(the above assumes that lesson indirectly comes from the state.
It's a bit easier if we pretend there's only one lesson, and you have these values straight in the state:
{state.post_author && findName(state.post_author_name)}
Now I'll assume you already have the post_author and you just need to look up the author's name. That means that somewhere in/after componentDidMount you'll load the additional data and add it to the state:
componentDidMount() {
firebase.firestore().collection("users")
.where('uid', '==', this.state.uid)
.get()
.then(querySnapshot => {
this.setState({ post_user_name: querySnapshot.docs[0].data().name });
});
}
Now the loading of the data still happens asynchronously, so the call to setState() happens some time after componentDidMount has completed. But React is aware that changing the state may require a refresh of the component, so it responds to the call to setState() by rerendering it.
Note that I'd highly recommend using each user's UID as the ID of the documents in users. That way you don't need a query and can just do a directly lookup:
componentDidMount() {
firebase.firestore().collection("users")
.doc(this.state.uid)
.get()
.then(doc => {
this.setState({ post_user_name: doc.data().name });
});
}
I'm trying to retrieve a users name from a firestore collection by
searching their uid.
This is accomplished by using the asyncronous .get method on a Firestore reference. In your case, you probably have a users collection of firebase.auth().currentUser.uid named documents.
var userRef = firebase.firestore().collection('users').doc(users.uid);
userRef.get().then(function(doc) {
if (doc.exists) {
console.log("Users first name is:", doc.data().firstName);
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});

How to use Promise.all with multiple Firestore queries

I know there are similar questions to this on stack overflow but thus far none have been able to help me get my code working.
I have a function that takes an id, and makes a call to firebase firestore to get all the documents in a "feedItems" collection. Each document contains two fields, a timestamp and a post ID. The function returns an array with each post object. This part of the code (getFeedItems below) works as expected.
The problem occurs in the next step. Once I have the array of post ID's, I then loop over the array and make a firestore query for each one, to get the actual post information. I know these queries are asynchronous, so I use Promise.all to wait for each promise to resolve before using the final array of post information.
However, I continue to receive "undefined" as a result of these looped queries. Why?
const useUpdateFeed = (uid) => {
const [feed, setFeed] = useState([]);
useEffect(() => {
// getFeedItems returns an array of postIDs, and works as expected
async function getFeedItems(uid) {
const docRef = firestore
.collection("feeds")
.doc(uid)
.collection("feedItems");
const doc = await docRef.get();
const feedItems = [];
doc.forEach((item) => {
feedItems.push({
...item.data(),
id: item.id,
});
});
return feedItems;
}
// getPosts is meant to take the array of post IDs, and return an array of the post objects
async function getPosts(items) {
console.log(items)
const promises = [];
items.forEach((item) => {
const promise = firestore.collection("posts").doc(item.id).get();
promises.push(promise);
});
const posts = [];
await Promise.all(promises).then((results) => {
results.forEach((result) => {
const post = result.data();
console.log(post); // this continues to log as "undefined". Why?
posts.push(post);
});
});
return posts;
}
(async () => {
if (uid) {
const feedItems = await getFeedItems(uid);
const posts = await getPosts(feedItems);
setFeed(posts);
}
})();
}, []);
return feed; // The final result is an array with a single "undefined" element
};
There are few things I have already verified on my own:
My firestore queries work as expected when done one at a time (so there are not any bugs with the query structures themselves).
This is a custom hook for React. I don't think my use of useState/useEffect is having any issue here, and I have tested the implementation of this hook with mock data.
EDIT: A console.log() of items was requested and has been added to the code snippet. I can confirm that the firestore documents that I am trying to access do exist, and have been successfully retrieved when called in individual queries (not in a loop).
Also, for simplicity the collection on Firestore currently only includes one post (with an ID of "ANkRFz2L7WQzA3ehcpDz", which can be seen in the console log output below.
EDIT TWO: To make the output clearer I have pasted it as an image below.
Turns out, this was human error. Looking at the console log output I realised there is a space in front of the document ID. Removing that on the backend made my code work.

Firestore: How to correctly update multiple docs with a query

Base on this:
Can Firestore update multiple documents matching a condition, using one query?
I do below but not very sure why I am getting this error: doc.update is not a function.
let db = firebase.firestore()
db.collection('posts')
.where('uid', '==', userId)
.get()
.then((snapshots) => {
snapshots.forEach((doc) =>
doc.update({
username: username,
})
)
})
All the posts have a uid field and I am trying to change the username.
The doc itself is not the reference to the document. It's a DocumentSnapshot which has a property ref which is a DocumentReference. Try this:
let db = firebase.firestore()
db.collection('posts')
.where('uid', '==', userId)
.get()
.then(async (snapshots) => {
const updates = []
snapshots.forEach((doc) =>
updates.push(doc.ref.update({
username: username,
}))
)
await Promise.all(updates)
})
You can also use a batch write instead of pushing separate update promises.
Update: See the answer provided by Dharmaraj for a more simple, straightforward answer. I didn't consider using the .ref property as he suggests, which makes a lot of sense.
Also, my answer assumed the userID was equal to the document ID, which actually wasn't the case in this scenario. Using a query is needed when the document ID and the userID are not equal.
The querySnapshot.forEach() function passes a "QueryDocumentSnapshot" to the callback, and this QueryDocumentSnapshot does not have the update() method available.
From the docs:
"A Query refers to a Query which you can read or listen to. You can also construct refined Query objects by adding filters and ordering."
Notice the specification "read" and "listen". So if you want to write to a document, you will need to use something besides a query.
The update() method is available on DocumentReference. (If you read the quick description on the DocumentReference you'll notice it does specify 'write' as a use-case) So if we rewrote your code above to get a DocumentReference rather than a query it would look something like this:
let db = firebase.firestore();
// grabbing the DocumentReference that has a document id equal to userID
let userRef = db.collection('posts').doc(userID);
// update that document
userRef.update({username: username})
Here I'm just getting the DocumentReference using the .doc() method and storing the value in userRef. Then I can update that document with .update().
I hope this helped!

Saving a field from firestore that is an array

I am currently working on a mobile app on React and I am having trouble understanding how to save a field from fire store that is an array.
Since I can't post images my database structure is all strings such as username, first name, etc but I have a field called follow list that is an array.
What I want to do is save the usernames from the following list into an array to later search fire store for the username's in the array, this is basically what I want to do so I can render my app's social Feed. I do know that I can probably create another subcollection and write something familiar to what I did to search for users but that was a QuerySnapShot which was overall documents not a specific one and I also know firebase creates an ID for arrays and it increases as the array gets bigger.
I do not want to end up making two more subcollections one for followers and following which I think not ideal right? My current approach is this
export const fetchUserFollowing = async (username) => {
const ref = firebase.firestore().collection('users').doc(username)
let results = []
ref
.get()
.then( doc => {
let data = doc.data()
results = data
})
.catch((err) => {
return 'an error has occurred ', err
})
}
From what I understand is that a DocumentSnapShot .get() function returns an object but what I want is to store follow list into results and then return that but I am not sure how to manipulate the object return to just give me follow List which is an array
https://rnfirebase.io/docs/v5.x.x/firestore/reference/DocumentSnapshot
link to docs

Categories

Resources