Reload repeat item

GiantGuf · 2024-05-08T15:21:07.694+00:00

How do you reload a repeat item without refreshing the page?When I add a new item to my Supabase database I want the repeat item on the page reflect the added item. I call the API to read all the items again but the repeat item doesn't update until I refresh the page.

GiantGuf
1 year ago
How do you reload a repeat item without refreshing the page?
When I add a new item to my Supabase database I want the repeat item on the page reflect the added item. I call the API to read all the items again but the repeat item doesn't update until I refresh the page.
@GiantGuf
How do you reload a repeat item without refreshing the page?
When I add a new item to my Supabase database I want the repeat item on the page reflect the added item. I call the API to read all the items again but the repeat item doesn't update until I refresh the page.
Lucas G
1 year ago
Are you using an attribute for it? Or a variable or straight from the API call?
Lucas G
1 year ago
All the repeat items should automatically update unless you are using something that isn't reflecting the changes
GiantGuf
1 year ago
@Lucas G I figured it out myself. I didn't call the read function after On success of the previous... 😅
GiantGuf
1 year ago
Hmm.. I still have issues with this. When calling the API for the updated list the page refreshes and my variables get nulled. How can I prevent this? Have tried to store the variables in Session storage, but it's kinda fiddly as you cannot see the stored values.
@GiantGuf
Hmm.. I still have issues with this. When calling the API for the updated list the page refreshes and my variables get nulled. How can I prevent this? Have tried to store the variables in Session storage, but it's kinda fiddly as you cannot see the stored values.
Lucas G
1 year ago
Does this happen only in the editor or also on the frontend preview?
GiantGuf
1 year ago
Both
Lucas G
1 year ago
Are you using a form submit to fetch the new data?
Or why is the page refreshing
Chris Laupama
1 year ago
From memory you can recall the call for the list on success of adding the new item.
GiantGuf
1 year ago
The page gets refreshed when I read the updated list from the API call. The repeat item list gets updated with a new row and the page refreshes when it does.
@GiantGuf
The page gets refreshed when I read the updated list from the API call. The repeat item list gets updated with a new row and the page refreshes when it does.
Lucas G
1 year ago
Theres likely no need to refresh the page. That’s what I’d try to find out
If things are null then the variable might be used before it is set
GiantGuf
1 year ago
I've been trying to figure out this and tried different things and this is where I'm at right now:
I got it to stop refreshing the page but I have another issue now. 😅
When logging in to my app I don't get it to load the right information when I use URL parameters. Somehow the parameters changes themselves and loads the last item in my repeat item list.... I made a video showing what happens.
https://komododecks.com/recordings/gsEWObUWrCBZDhZbGBWL?onlyRecording=1
@GiantGuf
I've been trying to figure out this and tried different things and this is where I'm at right now:
I got it to stop refreshing the page but I have another issue now. 😅
When logging in to my app I don't get it to load the right information when I use URL parameters. Somehow the parameters changes themselves and loads the last item in my repeat item list.... I made a video showing what happens.
https://komododecks.com/recordings/gsEWObUWrCBZDhZbGBWL?onlyRecording=1
Lucas G
1 year ago
Seems like it is changing the URL param on success of some API call
Lucas G
1 year ago
Check your APIs and see which one is setting the parameter
GiantGuf
1 year ago
I have gone through every API call and every action, but cannot find anything.
Here's a walkthrough: https://komododecks.com/recordings/bRCFgeRUIO7D1SZoKA21?onlyRecording=1
Lucas G
1 year ago
Your "Get Latest Session ID" API call changes the URL param on success
GiantGuf
1 year ago
The only thing that is calling the "Get Latest Session ID" is the form submit action at the prompt. The action have a Switch that checks if the session url parameter is set to new or not. If new then it calls the Create New Session and afterwards reads the database to get the session ID it just wrote. Then it sets the url parameter to that id. I never sent a prompt in the recording so it shouldn't have called that API function. I have checked this with my debug function and it's not recoring anything.
@GiantGuf
The only thing that is calling the "Get Latest Session ID" is the form submit action at the prompt. The action have a Switch that checks if the session url parameter is set to new or not. If new then it calls the Create New Session and afterwards reads the database to get the session ID it just wrote. Then it sets the url parameter to that id. I never sent a prompt in the recording so it shouldn't have called that API function. I have checked this with my debug function and it's not recoring anything.
Lucas G
1 year ago
It is set to auto-fetch and it runs on page load though
GiantGuf
1 year ago
Even when I deleted the API call entirely it behaves the same... 😅
GiantGuf
1 year ago
Could someone from Team toddle help out with this?
Erik Beuschau
1 year ago
@GiantGuf I'm not quite sure what the problem is, but I just want to highlight a few things:
1. For an API call, it's possible to declare what it should do on success/error both in the API definition itself AND when you call it from an event workflow. I recommend using only 1 of those 2 approaches as it might be confusing to debug if logic is declared in multiple places
2. Auto fetch APIs are also fetched server side (when they're defined on a page - not in a component) in order to provide a better/more accurate server side render. The on success event is still triggered client side though for you to run the relevant actions

In order for me to help you, could you try describing what you're experiencing vs. what you were expecting to see? Just so I'm sure what to look at
GiantGuf
1 year ago
@Erik Beuschau You can have a look at the two videos I recorded in this post to understand what I'm experiencing.
Erik Beuschau
1 year ago
I watched them, but I'm still not sure what the core issue is. Is it the change of the url parameter you experience on a reload?
GiantGuf
1 year ago
Yes, it's the change in the url parameter.
Tod
1 year ago
Great energy @GiantGuf! Your continuous contribution to the toddle Community just made you advance to Community Level 6!
@GiantGuf
Even when I deleted the API call entirely it behaves the same... 😅
Lucas G
1 year ago
There is also another 'Get Session ID' API also on auto-fetch which also sets the session on success. Could that one be it?
If not, it's tough to say without looking deeper through the actual project
Erik Beuschau
1 year ago
I noticed a few things as well:
The Get Session ID API would also be my guess for which part of the page that sets the query parameter. If you want to better debug the chain of requests you're running when the page loads, I also recommend looking at the browser's network tab to see if they all succeed as expected
GiantGuf
1 year ago
It must been some kind of bug. I went through all the API calls, clicked on the On Success button (most of them were empty), added a random variable, then klicked the trashcan to empty the flow again and then run my app and the problem was gone. Also another error that have been showing up in the console log (Get Generation Cost) that also shouldn't have been called automatically, also dissappear.
Andreas Møller
1 year ago
Can you invite me to the project?
andreas@toddle.dev
GiantGuf
1 year ago
Done
Andreas Møller
1 year ago
You have blocked requests on discord, can you add me as a friend.
I will need a login to test 🙂
GiantGuf
1 year ago
andreas@toddle.dev / 1234

Reload repeat item

GiantGuf

Lucas G

Lucas G

GiantGuf

GiantGuf

Lucas G

GiantGuf

Lucas G

Chris Laupama

GiantGuf

Lucas G

GiantGuf

Lucas G

Lucas G

GiantGuf

Lucas G

GiantGuf

Lucas G

GiantGuf

GiantGuf

Erik Beuschau

GiantGuf

Erik Beuschau

GiantGuf

Tod

Lucas G

Erik Beuschau

GiantGuf

Andreas Møller

GiantGuf

Andreas Møller

GiantGuf