Improve response to a user action

I keep digging how to make things efficient when saving data in Xano. I was used to the inmediate response from Firebase and I believe I have to change the way to do some things.

I have a post card where there is a like icon that has 2 states:

  • If there is no userID in the “likes” array of the document, it will be in state 0 (grey color).

  • If the userID is in the “likes” array, the icon will appear in green.

So far so good. I have configured the action and when the user clicks in the icon, it will either save the userID in the array and change the state, or remove the userID and change the state. This action goes just fine because I have specifically configured several actions and state will change without any waiting from the database. So it is inmediately that the icon turns green when the user clicks on it even though the response from the database may take a few more seconds.

My issue is because I have two other fields where this data is shown. There is a counter next to the icon showing the array.length. That number does not increase inmediately when the user clicks the icon. It goes up a couple of seconds later after the database response.

Same for a text that I have listing the name of the teachers that have pressed the icon. It is not automatically updated, and the change comes after a few seconds.

Captura de pantalla 2022-03-21 a las 19.50.34

Captura de pantalla 2022-03-21 a las 19.50.59

I have configured the action to also refresh the datasheets related with this data, but still it is not as inmediate as I would expect. I was wondering if it would be possible to manually increase that number and add the element to the list even though there is no response from the database yet, the same way I change the state of the icon.

Thanks!

Hi,

This is a great question and to be honest I dont think there is a way to make this work without some custom coding to project.

My guess is that you can’t edit the prop inside the component so you cannot increase the ”like count” prop value even with a script and then do the saving and reading to/from backend…

1 Like

Hi,

Thank you for your answer as always @Antti_Neonto. I understand and that is what I guessed. I will leave it as it is right now.

Not related with this but I have been reading very good things about Supabase and I have seen that there was a possibility you could create a plugin to integrate it with React Studio. Do you have plans for it? It would be great to have that alternative as a dabase.

Thanks!

Supabase is code, not infrastructure. Wouldn’t it be difficult for React Studio users to scale their own backend?

I think you need a single source of truth for both the icon color, and the 2 other fields. How about you use a component property?

Firestore has a local cache, which is why it may look instant, even before the Websocket has completed the sync.

Thank you so much for your suggestion @dry. Would you mind to elaborate and explain a little bit further how to create that component property? It would be great to create that “local cache” into de project so some data is shown inmediately to the user even though the database hasn’t responded yet. That would open a lot of possibilities.

I am not a programmer myself but just learning as a hobby so I can confirm that I would fit into the user profile not being able do much more than what React Studio team would prepare for the user. I believe Firestore is quite similar to Supabase. You can create manually in their UI some data using their graphic interface, but you need to use code in your project to connect, query or CRUD. So it would be a matter of creating plugin that allows to connect React Studio with the Supabase database, and then the linking between the dataSheets and the “collections” or “tables”.

I understand that it is just a question of creating the plugin but my knowledge is limited and I am sure I am not able to develop that plugin. I have struggled before to conect a rich text editor content with a dataSlot and it was with @Oliver_Burrell help that I could finally make it.

You can create a property like “likedby” here in the component:

I just tried Xano for the first time, and it seems like it already implements a local cache for you, so you just need to use a single source of truth for all your fields, and not changing an element manually after some action. In my screenshot above, you can see that the “Thumb” and the “Likes Count” are all coming from the same data.

Here is the version that shows instant update to multiple components. I didn’t know how to update instead of creating records in Xano, and it creates a ghost record when you send multiple requests before the server has finished responding. Also, I just colored the “Thumb” when the “Like Count” is an even number, but you get the idea.

I was wrong. I thought with Supabase, you had to have your own server. It’s open-source and can be self-hosted, but they have a BaaS offering. I guess it is up to the React Studio team.

https://medium.com/@bishtnarottam/firebase-vs-supabase-which-one-you-should-prefer-and-why-c3b2334c9604
However, it seems like it’s still in beta, more expensive, and SQL performance may not scale as well as NoSQL when you hit global scale. The syntax looks closer to MongoDB than Firestore to me.

Personally, I think React Studio would benefit from focusing on the front-end than back-end integrations, given the competitors in this space since Firestore and Xano are already viable backends.

I just tried Xano for the first time, and it seems like it already implements a local cache for you, so you just need to use a single source of truth for all your fields, and not changing an element manually after some action.

I don’t know if you are referring to the Cache functions by Redis which are reserved for users with a paid plan. I am just using the free tier.

In my screenshot above, you can see that the “Thumb” and the “Likes Count” are all coming from the same data.

Here is the version that shows instant update to multiple components. I didn’t know how to update instead of creating records in Xano, and it creates a ghost record when you send multiple requests before the server has finished responding. Also, I just colored the “Thumb” when the “Like Count” is an even number, but you get the idea.

Hey! That example is just perfect! Are you using Xano as backend? I have already a very similar component as that:

In my component, the icon with thumb up save in the Xano database the userID in the array with the likes. I have placed other actions to refresh the datasheets. Next to the icon you can see the counter:

I have stablished in the source data the “dataSheetRow.likes” array for the carried property. I understand that I have to create an additional property and save to that property the counts. But how would I link the data from the Xano database and the likedby property? I would really appreciate more details. I am sorry if it is obvious but I am just a noob :slight_smile:

Thank you!

Redis is server-side cache. I meant Xano seems to have a client-side cache. You can see this in my example. As soon as you click, the number and color changes instantly, before the server finishes the database operation. Since this UI change is driven by the data, not by the properties of the elements, it can only be this fast if there’s a client-cache that waiting for server sync on response.

I think your main issue is that you have too many interactions. 5 is a lot! Usually you should need only 1. You need to drive the UI with the data, not scripts. This should be a very simple example, but it’s hard to explain all the things you might be doing wrong. My advice would be to try to do as much as possible without scripts, and if you do use scripts, it should be 1 or 2 lines.

If you have a React friend, they should be able to explain to you the data flow philosophy of components.

Here’s my example for your reference.

By the way, does the rsproj contain my Xano credentials? Please let me know if you can access my backend with this file so that I can invalidate it.

Thank you so much for your explanation and the sample project. There are not any credentials in the project so it is fine. The reason I had up until 5 actions is because, precisely, I was trying to reduce the time for the counter to change. Here are my actions:

  1. Change the state of the icon/thumb up to filled and green.

  2. Save post ID in a dataSlot to locate the appropriate post and use the id later.

  3. Save the userID in the postID.likes in Xano.

  4. Refresh general post datasheet.

  5. Refresh selectedPost datasheet.

The last two actions are there precisely to update the counter and the list but I believe it does nothing because it behaves the same with those or without them. So I have removed them.

As for your example, I believe it is applicable to my project. My counter is a postID.likes.length, so it counts the previous likes stored in the database. I could create a property like your likedby but that property wouldn’t have the database previous value.

The ideal would be to be able to modify the prop adding a number, and by the time the response comes from the database, the UI is showing the right number. But ai believe it is not possible.

Let me know if I am missing something and it is indeed possible to achieve.

Thanks.

Ok. Let’s see if providing more information and reviewing the given project I can make better the response that I have right now. Here there is an example of the 9 seconds to obtain a response after the user clicks in the thumb up icon:

The way that I have it configured is:

  • The counter next to the icon has as source the array “likes” with the IDs of the users that has clicked before the icon. Here’s a screenshot:

And the icon has 3 actions:

  1. Change the state of the icon to State 2. That is the reason it turns green right in that moment it is clicked.
  2. Save in the dataSlot the userID.
  3. The information is sent to the Xano API like this:

I tried to improve those 9 seconds with additional actions for the icon (refreshing a couple of datasheets related with the posts), but still the response is not enough. Being like this, every user tends to click several times sending duplicated information to the API or reaching the limits.

Then, going to @dry example, I am a little bit confused with the inputs. There is a component with the two states of the thumb up icon. On of the states (state 1) has no interaction. The other state (State 2) has an action to save the input likedby:

But then there is an additional interaction with the user clicks the component placed in other component:

I wonder if that example is contemplating to read/get the number of likes from Xano and then update it after the user interaction. Probably it is me not understanding something but I am looking forward to improving this behaviour.

Thanks!

#1 should happen automatically when you do #3.

The thumbs up icon and the counter should be using 1 data source, not 2.

I am not saving the input. It is a calculated field to determine the state of the UI.