Skip to main content

HTTP Client Requests

In some applications, integrating with external services to fetch or send data is necessary. This is done through HTTP requests to these services' APIs. We can perform these requests using Data² Connect's HTTP Client.

This guide aims to show some basic features of the Data² Connect HTTP Client and how to use it in your applications.

We will use PokeAPI to make GET requests to get a list of Pokémon or information about a specific Pokémon, and CleanURI to shorten URLs via POST requests.

info

The final result is available at the end of this guide, ready to be copied and pasted into your Builder.

Creating an HTTP Client​

To create an HTTP Client, double-click on the Builder background, select Connect, and then click HTTP Client.

Your first request​

To create a new request, click the + button in the lower-left corner. This adds a new request to the list. We'll use PokeAPI as an example.

Select GET next to New HttpRequest, and rename your request to List Pokemons. In the URL field, enter https://pokeapi.co/api/v2/pokemon/ (endpoint documentation) to return a list of Pokémon.

Click the SEND button to test the request and view the response in the panel. You can explore the response in Text, HTML, or JSON formats.

Using parameters​

According to the PokeAPI documentation, you can get detailed information about a Pokémon using its identification number.

We could put the number directly in the URL, but it's better to make this a configurable URL parameter so we can reuse the same request to fetch a different Pokémon.

We'll add a parameter to our request. For this step, leave the Inspector open.

  1. Create a new GET request named Get Pokemon.
  2. Click the Parameters button.
  3. Click the + button to add a new parameter.
  4. Enter pokemonNumber in Key.
  5. Click MOCK to navigate to the parameter definition in the Inspector.
  6. In Component, select data2-core-primitives@Number.
  7. In Mock, enter 1 to simulate the parameter value.

Now we'll use this parameter in the URL:

  1. In the Inspector, click < Inspector to navigate to the request definition root.
  2. In URL, click the f() and select StringConcat.
  3. Click + to add a new item, and enter https://pokeapi.co/api/v2/pokemon/.
  4. Add another item, click f(), select Context Reference.
  5. Click to navigate to the Context Reference definition.
  6. Enter pokemonNumber in Reference.
  7. Click Save in the Inspector.

Test your request by clicking Send in your HTTP Client. If correct, you will see information about Pokémon number 1 (Bulbasaur).

Using the HTTP Client in an application​

To use the HTTP Client in an Artboard, we'll create:

  1. A button that makes the Pokémon list request and saves the result in its UI State.
  2. A JSONViewer to view the request result.
  3. A text field for the user to choose the Pokémon number they want to fetch.
  4. A button that makes the chosen Pokémon request and saves the result in its UI State.
  5. Another JSONViewer to view the request results.

Creating the interface​

List Pokémon​

First, create an Artboard. Then, draw a Block for the button and another Block for the JSONViewer.

In the block that will serve as the button, we’ll define the state (response) and the action to send the request, retrieve the result, and save it in the state:

  1. In Text, write List Pokémons.
  2. Create a new state in State Definitions called response.
  3. In State Definition, select data2-core-primitives@Object in Component and in Initial Value, click f() and select Object.
  4. In On Click, click f() and select Series.
  5. In the first action of the Series, in Module, select the HTTP Client that was created.
  6. In Interaction, select sendRequest.
  7. Click Request to enable the field, and select the List Pokemons request (or whatever name was given).
  8. Add a second action.
  9. Click f() and select the ui button next to setter. This adds a Setter with Module pre-filled for UIState.
  10. Click the Setter, then Pick Component. Click the button Block, and in State Prop, select response.
  11. In Value, click f() and select Context Reference.
  12. In Reference, write prevResult.
  13. Style the button as desired.
  14. Save the Block by clicking Save or deselecting the Block.

In the JSONViewer block, display the request result by reading from the button’s UIState:

  1. Change its type to data2-blocks@JSONViewer.
  2. In the JSONViewer parameters at the end of the Inspector, change JSON to Getter by clicking f() and selecting ui next to the getter (you could also click the Getter to navigate, and in Module, select UIState).
  3. In Prop, click Pick Component, hover over the button Block, and select response.
  4. Save the JSONViewer by clicking Save or deselecting.
  5. Click the Artboard preview button to test the button.

Pokémon Information​

In the same Artboard, draw a Block for the text field, a Block for the button, and another Block for the JSONViewer.

In the button block, define the states (response and pokemonNumber), and the on click action of sending the request, and saving the result in the UIState:

  1. In Text, write Get Pokémon.
  2. Create a new state in State Definitions called pokemonNumber, select data2-core-primitives@Number in Component, and set the Initial Value to 1.
  3. Create another state in State Definitions called response, select data2-core-primitives@Object in Component, and in Initial Value, click f() and select Object.
  4. In On Click, click f() and select Series.
  5. In the first action of the Series, in Module, select the HTTP Client that was created.
  6. In Interaction, select sendRequest.
  7. Click Request to enable the field, and select the Get Pokemon request (or whatever name was given).
  8. Click Request Parameters, and in pokemonNumber, click f() and select ui next to getter. Click to navigate.
  9. In Prop, click Pick Component and select the button Block. In State Prop, select pokemonNumber.
  10. Add a second action.
  11. Click f() and select the ui button next to setter. This adds a Setter with Module pre-filled for UIState.
  12. Click the Setter, then Pick Component. Click the button Block, and in State Prop, select response.
  13. In Value, click f() and select Context Reference.
  14. In Reference, write prevResult.
  15. Style the button, and save.

In the JSONViewer block, view the request result by reading from the button's UIState:

  1. Change its type to data2-blocks@JSONViewer.
  2. Click JSON, and in Module, select UIState.
  3. In Prop, click Pick Component, hover over the button Block, and select response.
  4. Save.

In the text field block, edit the UIState pokemonNumber in the button, so the user can type the Pokémon number they want to fetch:

  1. Change the type to data2-blocks@DataFieldBlock.
  2. In Dataset, select UIState.
  3. In Field, click Pick Component, hover over the button Block, and select pokemonNumber.
  4. In Type, select number.
  5. Save.
  6. Click the Artboard preview button to test the button.

Example: POST request to shorten URLs​

We will create a POST request to https://cleanuri.com/api/v1/shorten, an API that shortens URLs (cleanuri docs). It expects a JSON with the key url and the value of the URL we want to shorten. Example:

{
  "url": "https://google.com/"
}
  1. Click + to add a new request.
  2. Select POST as the method and rename the request to Shorten URL.
  3. In the URL field, enter https://cleanuri.com/api/v1/shorten.
  4. In Parameters, add a parameter named url, click Mock to navigate to the parameter definition in the Inspector.
  5. In Component, select data2-core-primitives@String.
  6. In Mock, enter https://google.com/ to simulate the parameter value.
  7. Navigate to the Inspector root and click Data.
  8. In the header, next to Object, click + to add a key to the object.
  9. Enter url as the key and in type, select data2-core-types / Reference to create the key with the correct type.
  10. Click the added parameter, and in Reference, enter url.
  11. Save.
  12. Click Send to test the request.

Conclusion​

In this article, we learned how to create an HTTP Client and make HTTP requests. We saw how to add parameters to requests and how to use the HTTP Client in an application.

As a challenge, try making a POST request to the URL shortener, where the user can enter the URL they want to shorten.

Final result​

The final result is available below (and can be copied and pasted into your Builder).