Updating Front-End Variables with Backend API Data ⚙️

Hey, Vim.

so my understanding is that you're trying to update a front end variable based on the result of a backend workflow of a backend API call.

So your backend doesn't have the context of your front end.

So, if you want to link the two, what you'll need to do is first, in your API endpoint you need to make sure that you send a response.

So here, for example, what I'm doing is I have a workflow that is making a request to the Rick and Morty API.

So it's sending a character id, and when the Rick and Morty API sends a response, I'm taking the action result.

So I'm taking the result from the HTTP request and I'm just, adding it here as a response.

So then my backend workflow, when it's triggered, it makes the call and then it sends a result.

If I test this, I have a character ID here.

then I get a result.

I get this result here.

And now in my front end what I have is, this is bound to a front end variable.

So my front end variable has a default value with, id 2 Morty Smith and an image.

So it's an object variable that has a default value.

And the text here is bound to my variable, to the name, and this is bound to the variable as well.

The image and I have two front end workflows.

And you'll see that what the front end workflow does is that it calls, it triggers my backend workflow.

and in this case it's just for demonstration purposes.

There's actually nothing confidential with the Rick and Morty character API, so I could very well make the HTTP request from the front end, but just for, using it as an example.

So let's say you want to trigger the API call from a backend because you want to call to be secure.

Then here you're making the call to the, you're triggering, the backend call.

So I'm passing the id, of the variable in adding one so incrementing because I'm doing it on the next character button.

And so this will trigger the call with that parameter.

So let me test this and you see, I get a response from the API and what I'll do is I'll just change the variable value.

So change my front end variable with the result from my API call.

So I'll just point to this like that, Boom, like this.

And so now if I test this, I will see that in my, if I go to the debugger here, my current variable value here, it's no longer the default value of the variable, it's the response from the API call that I made through the backend.

And so I have similar.

Except here I'm incrementing like downwards, so minus one and you can see.

And it'll take a little bit longer because it's going through the back end, through the server, so it's a little bit longer than if I go through the front end.

There we go.

So that's how you would go about it.

Let me know if you have any questions.