I am using vuexfire to bind firebase references to my app state.
This works fine:
bindRef: firebaseAction(({bindFirebaseRef}, payload) => {
let firebaseRef = db.collection(`/${payload}`)
bindFirebaseRef('storeProperty',firebaseRef)
})
I, however, only want to do the binding after a successful get; just so that I can be able to catch errors and also set progress indication.
Something like this:
bindRef: firebaseAction(({bindFirebaseRef}, payload) => {
let firebaseRef = db.collection(`/${payload}`).get().then(e => {
//where ref is same as firebaseRef
bindFirebaseRef('questions',ref)
})
})
You need to declare the reference to that collection as a variable and only then you can pass it on to your function:
bindRef: firebaseAction(({bindFirebaseRef}, payload) => {
let firebaseRef = db.collection(`/${payload}`)
firebaseRef.get().then(e => {
//pass firebaseRef to the function
bindFirebaseRef('questions',firebaseRef)
})
})
Related
I have the following query:
let unsubscribe = firebase.firestore().collection('threads')
.doc(threadData.threadId).collection('comments')
.doc(item.commentId).collection('replies')
.orderBy('timestamp', 'asc').onSnapshot(async (snapshot) => {
snapshot.docChanges().forEach(change => {
if (change.type === 'added') {
... process the data
}
})
})
What I need
I need to know whether the 'added' docs are from the initial fetch for this query or if they have been added since the listener has been set. Is there a way to do this?
A fairly simple way to manage this is to set your own variable to track:
let isInitialFetch = true;
let unsubscribe = firebase.firestore().collection('threads')
.doc(threadData.threadId).collection('comments')
.doc(item.commentId).collection('replies')
.orderBy('timestamp', 'asc').onSnapshot(async (snapshot) => {
if (isInitialFetch) { /* do initial fetch stuff */ }
isInitialFetch = false;
// ... rest of function
})
})
I am using firebase for my app and the data i read i want to put that in state to use it in different places.
it kinda works but when i want to console.log the state it updates like 30 times a second, am i doing something wrong?
this is my code
const db = firebase.firestore();
const [PBS1Detail, setPBS1Detail] = useState();
db.collection('Track').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
renderTracks(doc)
}
)
});
const renderTracks = (doc) => {
let data = doc.data().data[0].Module;
return setPBS1Detail(data);
}
console.log(PBS1Detail)
i already tried to store it in a variable instead of state but thats not working for me, i can't get the variable from the function global
i am a noob i get it xd
You don't need a return statement when setting state. Also, it looks like you're performing some async function which means that when your component renders for the first time, PBS1Detail will be undefined since the db is a pending Promise.
You could/should put your async functions in useEffect hook:
useEffect(()=> {
db.collection('Track').get().then((snapshot) => {
snapshot.docs.forEach(doc => {
renderTracks(doc)
}
)
});
}, [])
const renderTracks = (doc) => {
let data = doc.data().data[0].Module;
setPBS1Detail(data);
}
Finally, your renderTracks function doesn't seem correct as it appears you're looping over docs and resetting your state each time.
Instead, maybe consider having an array for PBS1Detail
const [PBS1Detail, setPBS1Detail] = useState([]);
Then modify your async call:
useEffect(()=> {
db.collection('Track').get().then((snapshot) => {
let results = []
snapshot.docs.forEach(doc => {
results.push(renderTracks(doc))
}
)
setPBS1Detail(results)
});
}, [])
const renderTracks = (doc) => {
return doc.data().data[0].Module;
}
This way you're only setting state once and thus avoiding unnecessary re-renders and you're saving all of your docs instead of overwriting them.
Trying to read a pushToken from a given user in the users collection (after an update operation on another collection) returns undefined
exports.addDenuncia = functions.firestore
.document('Denuncias/{denunciaID}')
.onWrite((snap, context) => {
const doc = snap.after.data()
const classificadoId = doc.cid
const idTo = doc.peerId
db.collection('Classificados').doc(classificadoId)
.update({
aprovado: false
})
.then(r => {
getToken(idTo).then(token => {
// sendMsg...
})
}).catch(updateErr => {
console.log("updateErr: " + updateErr)
})
async function getToken(id) {
let response = "getTokenResponse"
console.log("id in getToken: " + id)
return db.collection('users').doc(id).get()
.then(user => {
console.log("user in getToken: " + user.data())
response = user.data().pushToken
})
.catch(e => {
console.log("error get userToken: " + e)
response = e
});
return response
}
return null
});
And this is from the FB console log:
-1:43:33.906 AM Function execution started
-1:43:36.799 AM Function execution took 2894 ms, finished with status: 'ok'
-1:43:43.797 AM id in getToken: Fm1RwJaVfmZoSgNEFHq4sbBgoEh1
-1:43:49.196 AM user in getToken: undefined
-1:43:49.196 AM error get userToken: TypeError: Cannot read property 'pushToken' of undefined
-1:43:49.196 AM returned token: undefined
And we can see in this screenshot from the db that the doc does exist:
Hope someone can point me to what I'm doing wrong here.
added screenshot of second example of #Renaud as deployed:
As Doug wrote in his comment, you need to "return a promise from the top level function that resolves when all the async work is complete". He also explains that very well in the official video series: https://firebase.google.com/docs/functions/video-series/ (in particular the 3 videos titled "Learn JavaScript Promises"). You should definitely watch them, highly recommended!
So, the following modifications to your code should work (untested):
exports.addDenuncia = functions.firestore
.document('Denuncias/{denunciaID}')
.onWrite(async (snap, context) => { // <- note the async keyword
try {
const doc = snap.after.data()
const classificadoId = doc.cid
const idTo = doc.peerId
await db.collection('Classificados').doc(classificadoId)
.update({
aprovado: false
});
const userToSnapshot = await db.collection('users').doc(idTo).get();
const token = userToSnapshot.data().pushToken;
await sendMsg(token); // <- Here you should take extra care to correctly deal with the asynchronous character of the sendMsg operation
return null; // <-- This return is key, in order to indicate to the Cloud Function platform that all the asynchronous work is done
} catch (error) {
console.log(error);
return null;
}
});
Since you use an async function in your code, I've used the async/await syntax but we could very well write it by chaining the promises with the then() method, as shown below.
Also, I am not sure, in your case, that it adds any value to put the code that gets the token in a function (unless you want to call it from other Cloud Functions but then you should move it out of the addDenuncia Cloud Function). That's why it has been replaced by two lines of code within the main try block.
Version with chaining promises via the then() method
In this version we chain the different promises returned by the asynchronous methods with the then() method. Compared to the async/await version above, it shows very clearly what means "to return a promise from the top level function that resolves when all the asynchronous work is complete".
exports.addDenuncia = functions.firestore
.document('Denuncias/{denunciaID}')
.onWrite((snap, context) => { // <- no more async keyword
const doc = snap.after.data()
const classificadoId = doc.cid
const idTo = doc.peerId
return db.collection('Classificados').doc(classificadoId) // <- we return a promise from the top level function
.update({
aprovado: false
})
.then(() => {
return db.collection('users').doc(idTo).get();
})
.then(userToSnapshot => {
if {!userToSnapshot.exists) {
throw new Error('No document for the idTo user');
}
const token = userToSnapshot.data().pushToken;
return sendMsg(token); // Again, here we make the assumption that sendMsg is an asynchronous function
})
.catch(error => {
console.log(error);
return null;
})
});
I am trying to update several Firestore documents, based on the result of a third-party service inside a transaction. Problem is, I am getting the following error:
Error: Cannot modify a WriteBatch that has been committed.
Here is my code:
export default async function debitDueTransactions(context: any) {
const now = new Date().getTime();
return db.runTransaction(async (transaction: FirebaseFirestore.Transaction) => {
const chargesToCaptureRef = db.collection(`charges_to_capture`)
.where('dateToCapture', '>=', now)
.where('dateToCapture', '<=', (now + 86400000))
.where('captureResult', '==', null);
return transaction.get(chargesToCaptureRef).then((chargeToCaptureQuerySnap: FirebaseFirestore.QuerySnapshot) => {
chargeToCaptureQuerySnap.forEach(async (doc: FirebaseFirestore.QueryDocumentSnapshot) => {
const chargeToCapture = <ChargeToCapture>doc.data();
chargeToCapture.id = doc.id;
let errorKey = null;
// Calling third party service here, waiting response
const captureResult = await captureCharge(chargeToCapture.chargeId).catch((error: any) => {
errorKey = error.code ? error.code : 'unknown_error';
});
transaction.update(doc.ref, { captureResult: captureResult, errorKey: errorKey });
});
return new Promise((resolve) => { resolve(); });
})
});
}
Can't get what I am doing wrong, any idea ?
As you can see from the API documentation, transaction.get() only accepts a DocumentReference type object. You're passing it a Query object. A Firestore transaction isn't capable of transacting on a Query. If you want to transact on all the documents returned from a Query, you should perform the query before the transaction, then use transaction.get() on each DocumentReference individually.
I'm trying to code as "good practice" as possible while learning Vuex.
From what I learning I tought that Actions are used to do for example external API calls, the result of that is passed to a Mutation via a commit().
Now I want to increment a counter for a certain user on Firebase. This is working when I code my action like this
ADD_CREDIT(context, user) {
user.credits++;
firebase.database().ref('users').child(user.id)
.update({credits: user.credits})
.then(() => {});
}
So in my action I already update the state before calling the API call. Is this good practice? I tried it the other way using the following code, but that just looks to complicated.. And it doesn't work for now.
Action
ADD_CREDIT({commit, state}, user) {
const newcredits = user.credits + 1;
firebase.database().ref('users').child(user.id)
.update({credits: newcredits})
.then(() => {
commit('CREDIT_CHANGED', user.id, newcredits)
});
}
Mutation
CREDIT_CHANGED(state, userid, newcredits) {
let user = state.users.find(user => {
return user.id = userid
});
user.credits = newcredits;
}
The pattern of a mutation function is
function mutation(state, payload) {
...
// do something with state
state.person = payload;
...
}
It doesn't have anymore argument than that 2.
So, your mutations should pass an object with all of your information. Like this:
CREDIT_CHANGED(state, payload) {
let user = state.users.find(user => user.id === payload.userid);
user.credits = payload.newcredits;
}
And then you action should commit like this:
ADD_CREDIT({commit, state}, user) {
const newcredits = user.credits + 1;
firebase.database().ref('users').child(user.id)
.update({credits: newcredits})
.then(() => {
commit('CREDIT_CHANGED', {
userid: user.id,
newcredits: newcredits
})
});
}