Hello everyone!
I’m using Xano as my backend, but I encountered a challenge. Whenever a change is made in Xano, to make it appear on the Bubble frontend, it requires a manual refresh (unlike Bubble’s native backend, which automatically refreshes as soon as a change is made in the database).
Is there any way to automatically synchronize the data with the frontend?
Thank you in advance for your help!
1 Like
Hello! You’ll need to incorporate a good ol’ websocket! 
Not the easiest implementation but there is a plugin that could possibly help you with that, or if you’re like me, implement it yourself!
If you’re interested in more information on how to do this approach, just let me know.
1 Like
I agree with @GH5T that we need a websocket, but unfortunately Xano doesn’t support websocket at all. The only way we have been able to implement realtime push update to frontend on Xano is through Ably (we were building some chat feature), but this is usually very complicated to implement.
In this case, I recommend doing a continuous pooling of data (your workflow unit is going to suffer if you decide on going through with this). You will create a Do every 5s workflow where you will do Display list in Repeating Group and pass the API request to the Repeating Group datasource again.
Note that Bubble caches your external API request (to Xano) so you need a cache buster, which is essentially a random parameter on the API that will be passed in different data for each call (I just pass in the current date).
1 Like
I hate to say it but this is not a good idea. You do not want anything in your app repeating itself over-and-over. Unless it’s a backend recurring workflow, which you still don’t want to repeat over and over.
3 Likes
Maybe it is an option to use Bubble’s existing websocket functionality? So, when certain data in Xano is updated, update a date field (which is datetime) in a table entry in Bubble through API. In the frontend just use search condition to compare the date of the table entry to the date entry in a custom state (that you update everytime a refresh of data has been done). When the date entries do not match, trigger a refresh:
Something like this:
Xano just adds or adjusts an entry in table Updates through API. And using the search in the image above, a refresh is trigger on the client.
3 Likes
@GH5T I disagree, it’s not the nature of things repeating over-and-over that is bad, it’s how frequently you want things to be updated. I do agree that 1s per pool with API connector is pretty bad (that’s why I said this is going to really hurt your WU). But if you can somehow shift that 1s per pool over frontend only it might be better (this is still an acceptable pattern with traditional coding)
@culturalia.pt as I was typing this, I came up with another solution. You will still want to push the changes from Xano to Bubble. You can achieve this by setting up a table on Bubble and use Xano to call the Data API. This is sort of a data parallel pipeline.
3 Likes
I implemented it and it works quite well. Still have to see what the impact is on WU. Would be great if Xano had this feature natively… Now I have to manually send an API call whenever something changes
2 Likes
But from what I’m understanding, does this solution only work when the page is loaded, or is it reactive to changes in the Bubble database?
I’m interested! How would the implementation of this solution be done?
For the ones interested in the implementation.
- Define when you want that Bubble refreshes its Xano calls
- Create a function that handles the data updates to bubble (Just for usability purposes)
- Insert the function into the Xano APIs function stacks when you want to update data in Bubble
- Send an API to a BWF in Bubble: I send the data type to refresh and the organisation of which the data is part of (so I only refresh the user who can see the data)
- Your BWF creates a data object that stores the send data (in my case the organisation and the data to refresh (stored in an OS))
- A listener on your page refreshes the Xano call (I use the plugin which makes it easy to refresh a data query to Xano)
Hope this helps
6 Likes
It is reactive to changes in the Bubble db.
1 Like
Nice! Thank you!!
1 Like
Here you go
5 Likes
Hello Neil!
I had already seen this video, but in this case, it doesn’t apply because there needs to be a frontend action for it to refresh with the backend…
But I appreciate the help!
In Xano you can’t do that
1 Like
Hey guys, i have a fonctionnal app with this stack :
- bubble for the front end and user management
- All data and most of the workflow, functions in xano
I struggled as you did with this ability to refresh data in realtime. I am building chat and feeds features. I use the bubble websocket to refresh the xano connector data.
- I have a refresh table in bubble with the id of the thing to refresh (a channel, a feed…) and a timestamp.
- I use this timestamp in an additionnal parameter in the xano call - Format ISO or anything that can embed seconds. I use the xano connector plugin to avoid the latence of the bubble api connector
- When something change in my app, i trigger a custom event that update the refresh timestamp with current date time.
It’s works fine, the next stuff i have to finetune is to get the response back from xano after a post in a js to bubble element to be sure that the data is already updated on the xano side when the call refresh. For now i have 2 updates of the timestamp : 0,5 sec and 2 sec.
2 Likes