API Connector components, how to use and connect REST/Curl API's

With the API Connector in Wappler, you have gained a lot of power to directly connect to API’s and fetch data or call their actions.

The API Connector is based on three components:

  • API Data Source
  • API Action
  • API Form

In this article you will learn when to use the different API components and how.

API Data Source

The API Data Source is the most simple component but powerful API component and gives you a way to fetch data from the API so you can use it on your page as dynamic data.

A basic use case of the API Data Source is explained in Using API Data Source

image

The API Data Source is always executed as an API Fetch with method GET - so it just gets its data.

The primary usage of the API Data Source is accessing public data sources that do not require authentication.

A good list of those public API’s can be found on https://github.com/toddmotto/public-apis

API Action

The API Action is similar to the API Data Source, but instead of just fetching data it allows you to also post data to the API, so some Action gets executed. This can very from retrieving specific data, saving data to the API and calling some specific actions.

The API Action executes with methods GET, POST, PUT or DELETE
The needed method is usually indicated by the API Docs

image

Translating CURL usage to API Action

In the most API Docs you will see examples of using with CURL. Those can be easily translated to Wappler.

Determinating the Method:

image
image
image

Input Data

When calling the API Action with method POST, you can also give data to post:

Query Parameters

When calling the API endpoint (url) you have two ways of passing query parameters

  1. You can directly add them to the url as values only

image

  1. As named query parameters

Security and authentication

Most of the APIs are public but might require an API key or basic authentication.

WARNING WARNING WARNING: API Connector is client side only and runs in the browser! The API key or Authentication you use will be easily visible to the user! So you should only use limited API keys for public sites or make sure your site is absolutely secured for restricted use only. For example using the Security Provider Enforcer.

The following types of authentication are possible with the API Connector

Basic Authentication with Username and Password.

This is the most common authentication that requires username and optional password. Usually the APIs issue an API key that you can use as username without password.

In Curl samples this is indicated with the -u parameter:

image

This requires that the username:password value is stored as Base64 value in the authorization header
Not advisable to use, if possible use the other methods below.

Bearer key/token in header

Many APIs required bearer token as authentication. You can simply put it in the authorization header

image

API Key in header

Many APIs have special API keys that you need to put in the header fields when calling

image

API Form

The last API component is the API form component. It is actually identical in options to the API Action, but instead of specifying its input data, you can add to a form so the form is submitted with its data straight to the API endpoint.

This is very useful for login forms or other forms that require the user to enter some input values and then you want to submit them directly to the API.

Another advantage of having an API form is that you can apply form input validation first, before submitting, so that you can make sure the user enters the right input.

You just add the API Data as a separate component or turn any existing Form to API Form:

image

Explore the API world

That concludes our introduction to the API Connector. Hopefully you understand its rich options now and can make this awesome API connected solutions!

There are many resources to help you with your journey,

a good introduction is:
http://101.apievangelist.com/

A good list of public APIs


WapplerPrevious   WapplerNext


13 Likes

Finally that documentation was needed! Thank you again good work!

3 Likes

excellent detailed HoTo :+1:

Thanks but this needs more detail particularly with API Actions.

How is the “Define API Schema” supposed to be used? If I enter any details and press save then come back into it nothing is saved.

How do I use the returned values / data from the API Action? I need to call an API to get a session key that I then need to use in future calls.

The example of what I want to do:

  1. Get a session key using a POST API call
  2. Collect some data from a user via a form
  3. Call an API with the collected data and the session key
  4. Collect a returned value from the API response
  5. Call an API with the returned value
  6. Release the session key using an API

I thought I might be able to use the API Actions, API Data and Forms but it seems it would be much easier for me to send the form data to a php processing page that does all this using normal PHP.

5 Likes

How do I pass a value into server action param from api action?

image

Is this right?

image

If so its not working :slight_smile:

What server model are you using? What parameter are you trying to pass exactly?

I am using node.js, I would like to pass a value from client side to server side globals via api action.

If you want to pass a value from the front end using a dynamic event, you should define a GET parameter in your Server Action.

1 Like

Got it! thanks