Using API Data Source

In this tutorial we will show you the basics of API Data Source. We are going to connect to the popular Unsplash API to retrieve the latest photos in a nice masonry layout.
This API requires an api key, which we already retrieved. Please make sure to check the Unsplash docs: https://unsplash.com/documentation to learn how to get your own API key.

Note, that every API has its own documentation and its better to check it before start using it.

We added a simple layout, which will be converted to a masonry grid later. It contains a bootstrap 4 container, with a row and column inside it. We added an image inside the column. Click the add new component button:

Then open the Data category (1) and add API Data Source (2):

You will find the API Data Source component properties in the properties panel. Here you Add API URL (1) and Query Parameters (2) and/or API Headers (3) if your requires so:

Firs we paste the API URL:

Then, as we want to limit the number of photos retrieved, as per API documentation we need to add a query parameter:

We add it, and assign a name to it. Also we add a value to it - it can be static or dynamic value. For static values, which are not numbers make sure to wrap your value with single quotes like: ‘staic value’. For dynamic values and numbers that’s not required:

If your API requires, you can add header as well, just click the add new header button:

Add a name and value for it, again it can be static or dynamic value. For static values, which are not numbers make sure to wrap your value with single quotes like: ‘staic value’. For dynamic values and numbers that’s not required:

When you are done adding your parameters and headers, click the Defin API Schema button:

You will see your parameters and headers here, you can change them to test the data if you want. Click the Fetch Schema button, to retrieve API Schema. It will be used as a data source on your page:

You will see the data, returned by your API under data:

Also you will see any response headers returned. You can use the information from response headers on your pages later, if you need:

Click the save button:

Now, let’s convert the row to a masonry grid and add the dynamic API data to it. Select the row element (1) and click the Make Masonry button (2):

Then select a dynamic expression for the masonry:

We select the repeating data element, returned by our API Schema:

And you can see our images repeated 24 times. Let’s bind dynamic URL to the image. Select image (1) and add new dynamic attribute (2):

)

Open the images category and click image source:

Then select an expression for the dynamic image source:

Our API returns different URLs fr different image sizes. We select the regular image size URL:

And we are done! Our masonry grid, showing images from a data API is rendered on the page:

That’s how easy it is to connect to a data API, get data from it and use this data on your pages.


WapplerPrevious   WapplerNext


5 Likes

I have followed this tutorial step by step, however I can not get more than a single picture returned as it appears that there is no repeat functionality that would increase the image location index ( unsplash.data[0].urls.small. I have attached screen shots of code and design view.

What am I doing wrong ?

1 Like

You just pick a wrong binding for the image source. It must be selected from under the repeat in the data picker but you probably select it from under the API source.
Maybe check the detailed explanation here: Data Types and Binding and especially this screenshot:
https://community.wappler.io/uploads/default/original/2X/1/1e1be69d9f650cb13764d40b56e7ad719db545c7.png

It’s the same for any type of dynamic data/repeat with our tools.

1 Like

Hello Teodor !
Quick question : Parameters are sent as GET or POST (or both) with this object ?
Thank you ! :slight_smile:

What re you trying to achieve?
If you want to send post data to your API, better use the server side API tools, not the client side ones.

I’m rebuilding our checkout app.
So I’m wondering if there was kind of a convention/rule to query the back-end.
Thank you for your answer. :slight_smile:

Which payment gateway are you using?

This is an example when using Stripe https://docs.wappler.io/t/ecommerce/7728

Hi @Teodor, which server connect component is relevant to get/post to an API?

I see most of the server components are relevant only for when we are working with databases (query/update database tables). Are there separate server components similarly that work with APIs (get/post)?

Or is there a way to abstract the get/post actions on an API into query/update actions on a database; and use the server components?

Here is a quick example:

  • I have an API from which I can get all the purchase orders of a user (lets say 1000 orders). Now if I was connecting directly to the “purchase-orders” db table, I would have probably used the “Add Database Paged Query” and display the records in multiple pages (btw, awesome documentation you guys have).
  • Now, instead of connecting to the database, if I want to achieve the same with an API, fetch the records and display them in multiple pages, is there a way? May be if I’m able to abstract the API call as a database table query, then I could probably use all the server components.

I wish I was able to work directly with the database, but with all this micro-services architecture, in the web app i’m working on, I’m limited to dealing with APIs only right from login to all interactions with the back-end, plus web sockets to real-time update data on the front-end.

Thanks in advance!