Unable to display Server side "API Action" data on my page

Hi Wappler-ions,

I have been struggling with this, any help would be greatly appreciated. I have attached a gif for easy reference (click on the gif to see clearly). Here is what I’m doing:

  1. Created a server action called “userOrders”, added an “API Action” component in the action step, connected to my API, making a GET to pull data

  2. Now, on my page orders.html, I have added a Server Connect component and I have chosen this “userOrders” action

  3. Now, in the browser, I logged in to my app, and it took me to the order.html and I can see in console that the Server Component has used the linked “userOrders” server action and pulled data from my API successfully.

  4. But, this data, in wappler, I’m unable to add it to my table that has repeat children (followed this doc that covers displaying data from a server connect - https://docs.wappler.io/t/displaying-dynamic-data-on-your-pages/2871). When I chose the table cell, and try to link dynamic data from the server connect component, the fields that my API returns are not available at all, so I’m unable to link it.

Please advise how I can achieve this? Any hacks.

I think when I’m trying this in wappler, the orders.html page is unauthenticated (header token is a session variable in my API action from the login page), so the server connect component in the page is not able to display the fields.

But I did click on “Define API Schema” and added a valid header token and was able to fetch the fields. Are these fields not passed to the server connect component in the page so that I can link them as dynamic data and display them?

What do you see if you click the Response tab:

image
?

You should see the data. I’m not an API expert - fortunately there are others here who are - but it looks like it’s set up correctly. You coul d try restarting Wappler to see if it helps.

Thanks @TomD, API fetch is all good, data is there. My issue is displaying this on my page through the server connect component by dynamically linked the data in a table (with repeat children),.

I think you will need to define the api schema in the server connect api action.

Did you create the table using the table generator? If you select the table body, you should see the expression:

1 Like

I did, but no luck. I think have a big gap in understanding the abilities and possibility w.r.t server vs client components. “API Action” component can be added on both server as well as client side…

Ahh yes, I missed that in your original post…sorry about that. I’m assuming you saved the file as well. I suppose as a troubleshooting step you could assign the results from the api connection using a Set Value command and output that to see if it shows up in the editor on the client side.

And then, if you are just bumping into a bug, report it, and to keep moving you can type the value you need directly into the editor instead of selecting it via the GUI.

I’ve not yet had a need to use the api action on the client side. I prefer to push as much as possible to the server to keep the heavy lifting away from potentially slower clients. Also keeps token and keys away from users.

1 Like

Hello @Akayy
Are you sure you clicked on Define Api Schema and defined your api schema there?

Okay. I understood the stuffs better now. Here is what is happening.

  1. I have a login.html page that has a form taking three inputs - username, password & rememberMe.

  2. In the form, I linked the server action “Security/login” (created this beforehand on Server Connect left menu).

  3. This server action “Security/login”, makes an API call to POST the three fields as input data, and the response is a “token”

  4. Now, I have an additional step in this server action to save the token as a session variable SID. Thanks to @Hyperbytes - refer to this thread for details - Generating Session ID and api authentication

  5. Login page works perfectly, and in the login page’s form, I have added dynamic events to display an alert about wrong login credentials (if unauthorised), or display an alert about successful login and goto my next page orders.html.

Now, here is where things get interesting.

  1. I have the second page orders.html which fetches records for the logged-in user

  2. In this page, as per my original post, I have added a server connect component that’s linked to the server action “Security/userOrders”

  3. This server action “Security/userOrders”, makes an API call to GET the records for the logged-in user, and the response is a json object with all the data

  4. In this action step, I pass the token (that I saved in my login page as a session variable) in the header of the API call {{'Bearer '}}{{$_SESSION.SID}}

  5. The problem here is that in wappler, the token is not passed from the login page to the orders page. So, when I click on “Define API Schema”, the header field is empty

  6. What I do now is I manually pasted a valid header, so that I can fetch and define the schema. Clicked on save.

  7. When I go to my orders page, click on the Table Body to add the expression connecting to my server connect (that’s wired to the above server action), I’m able to see the schema.

  1. Now, I open each of my table cells, and I’m able to link them to dynamic data (fields from the api schema). This means, I’m able to solve the original issue of this thread.

  1. Now, the next issue :pensive:
  • When I test my app on the browser, the data is getting displayed in my orders page as expected. Because, I firstly login, which passed a token to the orders page. This page fetches the data (sends the token in the header of the api call) for the logged-in user and displays it perfectly.
  • But, in wappler, because the token is not passed between the pages, the data doesn’t gets displayed in the page for me to further design how the table has to be rendered.
  1. Unlike database, where the connection (via FTP) is maintained at a project level, when dealing with API, there is not project level settings to save this kinda authentication details (like a token). Or any means to pass the token between pages out-of-the-box during development/design in order to truly build the pages with dynamic data. I believe this feature request is related to this limitation - App connect component to access Server Sessions

  2. As a hack, this is what I did to overcome this limitation. I added an additional header hardcoding my token (left bottom of the below screenshot), so that this page is authenticated and data is displayed in my design panel, so that I can continue with designing this page dynamically with real data. I will have to remember to remove this hard-coded header in production :roll_eyes: from all such pages.

Here is my takeaway from trying Wappler for the past few days:

  • If you are building your web app connecting to database, then it’s a breeze, as there are a bunch of server connect components for all things like (from the docs):

  • But if you are building your web app with API endpoints, then it’s not so easy, I spent hours to figure things out, going through so many community threads, very frustrated, and we might have to use various hacks to progress. Next thing in my list is to secure my site for the logged-in user and I already see a lot of people having trouble with this stage, here are the relevant threads About API security, Security provider with api action, How to secure my API, if I want to use it on a different server, Secure SPA Sites

  • In spite of the above limitations, I think I will still go pro with Wappler, I think it’s still the king :wink::ok_hand:! I hope there will be better API support (out-of-the-box), as microservices architecture is a happening thing.

2 Likes

@Akayy

I just came across this post and wanted to see if you happened to make any progress on that last post of yours?

I’m having difficulty figuring out a way to pass API responses from the server-side to the front-end. Would love to hear if you happened to crack it!

Hi @KaseyL, over the last 5 months, my wappler skills have increased to a great extend. I have managed to call & use API responses in my page successfully.

If you can be provide more details on where you are stuck with some sample code or screenshots, I might be able to assist you better.

With what you have described, you have difficulty passing API responses from server to client-side.

  • On server-side, ensure you have got the API working (right URL, passing method, query & headers if any etc), most importantly schema is defined and you saved it. Ensure you have output enabled in the API call.
  • On client-side, you have added a serverconnect, and then “select server action” and choose your server action (one dealing with the API). What do you see in your browser dev tools (network tab)?

All the best, have a little patience & you will go a long way.

@Akayy

Awesome, glad to hear things have progressed well for you!

So what I am attempting to do seems very similar to what you were doing above. I am using a 3rd party Auth management system called Backendless. Because auth is managed by a 3rd party source I will need to process the JSON output and do something with it, like eventually query more user settings, but for now, I would like to just display the username on a redirect page. Here is the flow I am looking to achieve:

  1. User comes to login page, fills it out and submits the form.
  2. API Action sends login info to 3rd party auth tool and confirms or denies user
  3. Upon confirmation I need to process output JSON to find name
  4. Send name to Front-end
  5. Server Action then redirects user to app ‘homepage’ where it displays their name

So far I have successfully completed up to step 3. Using the server action I have confirmed the user and see the output. Using the ‘Define Schema’ I can process the output and pull out only the name. After that, I’m kind of at a loss as to what to do.

I’m struggling with sending data to the front-end because this is called only when form info has been submitted - is there a way to tie the server connect and form together? Or do they have to be called separately so I would be making two different API calls?

Hope that all made sense. Thanks for your help!

Hi mate,

If you named your form as “login_form”, I assume you are seeing the name as output on your browser network tab under “login_form”?

If so, in your front-end, for a paragraph, the data picker should show “login_form”, and under that you should see the output to bind it. It will look like this:

{{login_form.data.name}}

You are not alone, I was initially lost too, see this old thread - Form submit, use the linked server action's output on form success event

@Akayy Amazing!! Yes, that did it. Thanks!! :slight_smile:

I know a lot of these things I want to do are simple it’s just how to get there haha.

Thanks for your help!

2 Likes