I have a vuejs, vuex, firestore app that stores user state using vuex. All is working fine, however, I have a feature where a user submits a job to an aws lambda which takes a little while to process.
The lambda does its thing, and when it's done it updates a field on the user's document in firestore. My app needs to reload the user's state into my vuex store, but I don't know how to listen or trigger that action within my app, as the user will submit the long running job and then go on their way.
How can I have my vuejs app be notified that the single document's field has been updated at firestore so I can dispatch and re-load my vuex state?
Related
I need to listen for update on the client side whenever something in the Firestore database changes.
I need some clarification about this topic:
Let's say that we want to notify the user whenever a new document is created in a collection:
We have 2 cases:
when the user is on the app
when the user is out of the app
for the second point I can create a cloud function firestore trigger that notifies the user through the push notification service
But on the first point I don't know which is the best approach.
(maybe setting up a snapshotListener? but how can I do that on the global scope of the app? Is it the right approach?)
Should you implement a FCM notification for the second scenario, the notification will be fired to your app no matter if it is on background or foreground, so you can use this approach for both situations actually.
You can use this solution to not fire a notification (on the frontend) and in case you don't want to fire that if the app is in foreground you can just keep the completionHandler() blank and that's it.
I am using Firebase Database in my app and have a cloud function trigger for on update and create.
I have a scenario in app where data created and than deleted in app
when internet offline and later when connected to internet somehow the create event in cloud function is triggered and i am updating some common fields but while it gets updated / before it gets updated the delete action in queue from app occurs and later that ref child remains only with the updated keys.
I want to terminate create event ongoing async code in Cloud Function if delete is occurred.
Hope i explained my scenario clearly. if any confusion please ask in comments.
Thank You in advance.
I follow some guidelines to have my Vue.js state in sync with Firebase. I have set up references to Firebase and getters, mutations and actions in vue in a separate folder store. It seems to work when I update the states without Firebase connections (local) and it also works when I update Firebase from other components only using the Firebasereference and push - then the sync seems to work. My question is if I should update the state throw "action / mutation" and the mutation will do a push to the state array and in som magic way the Firebase will update which not happens in my case.
So - how to update? From the component using the reference, for example dbOrdersRef.push(order) or with a call to the store with for example this.$store.dispatch('setOrder', order) which don't updates Firebase (but other local variables updates).
I think scheme should be like this:
You should subscribe on firebase updates somehow (I'm not familiar with firebase but I'm sure that there should be some mechanism for that) and when updates come from firebase - you should mutate your store by dispatching some actions, to keep you store in sync with firebase.
Ideally, your app should work with your store only. Store should hide such implementation details as firebase usage. If tomorrow you will switch from firebase to something else, you shouldn't rewrite your components which work with the store. They still will work with the store and with the same actions.
When you update something in your store you need to update firebase as well. I think you can do it right in your actions, it should be fine. In that way, you can be sure that all changes which will appear in your store, will be in firebase. E.g. you call someAction which actually do some firebase manipulation. If you subscribed on firebase changes you won't even do something else in that action, except sending some command for firebase, because your subscription will update your store. Or you can mutate the store immediately (aka optimistic update), then wait for response from firebase, and then decide leave that update or call some mutation to rollback (however here you should be very careful because of subscription on firebase changes).
Or, alternatively, you can write some plugin for your store, which will send updates to firebase only when some change in your store has been done. In that case, updates from your app firstly will appear locally in your store, then your plugin will send them to firebase (maybe such plugin even already exist, idk).
I'm not an expert in firebase, but tried to share some thoughts about how it should work in general. Hope this helps.
Oh, back to your question:
dbOrdersRef.push(order) or with a call to the store with for example this.$store.dispatch('setOrder', order) which don't updates Firebase
I think you shouldn't use firebase in components at all and should use your store instead. So I'd rather advice to use the second option. But you should implement firebase updates by your own, there are no magic updates from store to firebase by default (at least if you aren't using some plugin with that magic).
Currently the open sourced cloud function provided by Firebase/Stripe uses onwrite to Firebase database to trigger the charge to Stripe:
https://github.com/firebase/functions-samples/tree/master/stripe
It seems that it would be more direct and faster to just call Stripe using https trigger instead of writing to Firebase local database which syncs/writes to Firebase server database, which then triggers the cloud function call to Stripe.
Will there be any problems using Https call to trigger Stripe call? What advantages are there for using onwrite trigger instead of https?
Beginner to beginner, this is my understanding:
Let's say you have an app where a you need to
(1) sign users up for a subscription using Stripe, and then
(2) when users use the app, check to make sure their subscription is still valid.
For (1),
you'd only do this once(ish) per user, and you need to tell Stripe "make a new subscription for this user," so it makes sense to use an https.onRequest or https.onCall function.
For (2),
you'd be checking to see whether the user is subscribed many times, and you're not telling Stripe something, you're asking it about stored information: "is this user's subscription still valid?"
If you're asking about stored information, it's a lot faster to check your own database rather than to wait for a response from Stripe. You just need to make sure the information in your database (e.g. Firestore) is up to date with Stripe.
So what you can do is create a Stripe webhook that will trigger an https.onRequest function whenever there is a change to a user's subscription status. Then, your function writes the change to your database.
So, rather than ask Stripe over and over, "is this user subscribed," and wait for a slow response, you just check your own database, knowing that it's kept up to date by the Stripe webhook.
I am currently writing react-native for a Chat feature for my app.
I am using Firebase as the mailBox. Since I don't want to save chat data on our database, I decided to save messages to the AsyncStorage, the device database.
So, the steps are like this:
1) User B's device listening to his mailBox changes on Firebase
2) User A send message to User B mailBox on Firebase
3) User B received the new message, because of Firebase listener
4) User B's device save the new message to AsyncStorage
5) User B's device detected changes on AsyncStorage and update the UI of Chat
Come to here, I need a listener to listen to the AsyncStorage changes so that the UI can be updated accordingly.
This come to the topic:
Can I add listener or a trigger, like DB trigger in Oracle database, to AsyncStorage?
Also, I would also like to know whether I should save users' messages in my server database. Thanks
I am not sure about the listener for async storage but a good alternative to your problem would be redux.
You can use redux for this purpose. Update the redux with the result when you are updating the Async Storage.
Make a common function that syncs your async storage and redux both. So whenever you make any change in async storage that will automatically get synced in redux as well.
Just connect the component with the redux state.
So as changes are synced in redux so the ui will change automatically because your component is connected to redux.