retool basics - Calling REST and GraphQL APIs

This is the finished app

the app has these features

1. Check Current Weather in New York City

2. query country info, such as capital, currency

Introduction

What is API?

APIs are a way for software to interact with each other, just as people interact with each other through voice and text, and people interact with software through graphical interfaces, and software interacts with software through APIs!

What problems do APIs solve?

API has been integrated into every aspect of our lives, making our lives more and more convenient and better!

1. Solve the problem of multi-platform and multi-channel software interaction. For example, in the past, we can only watch TV dramas passively received on the TV, now we can watch them on various platform such as computers, cell phones, tablets, etc., and the interaction between the app and the server software behind it is carried out through api.

2. Solve the problem of data opening and utilization. For example, in the past, when we wanted to know the weather for the next day, we could only watch weather forecast programs on TV. Now, weather forecast data has been opened up, and many websites and applications will display the current or future weather. Behind this is the call to the weather forecast API

3. Selling enterprise capabilities and resources. For example, Square and Stripe sell payment capabilities, and e-commerce apps can receive payment more conveniently after accessing these payment channels; for example, telecom operators sell SMS resources, and software can send SMS verification codes to customers more conveniently after accessing them.

What are REST and GraphQL?

API has many formats, REST is one of the formats, the most popular is REST, easy to develop and maintain.

GraphQL is a query language for APIs, open-sourced by Facebook in 2015, which mainly solves the problem that complex software is difficult to be integrated by software integrators. The value of GraphQL is realized when the software integrator realizes that integrating a software requires calling thousands of REST API, allowing software integrators to obtain the data they need clearly and accurately without any redundancy. However, due to the high cost of development, maintenance, and collaboration, GraphQL is currently only used by a few large companies, such as Facebook, GitHub, Shopify, GitLab, and many others.

Where to find APIs

There are already tons of api's that we can call.

image from Canvas Ventures

You can find the api at the following URLs

1. https://github.com/public-apis/public-apis

2. https://www.postman.com/explore

3. https://github.com/graphql-kit/graphql-apis

Objective

1. learn to call REST in Retool

2. learn to call GraphQL in Retool.

Prerequisites

1. Create a blank app in Retool

2. apply for a free api key from OpenWeather

Please note that after creating an API key, you need to wait for 1 hour to call the API. OpenWeather needs to take some time to activate the API key, otherwise you will encounter an error 401

Develop-Calling the REST API

32 steps in total

1 - select REST API resource type

2 - create REST API resource

A. Enter a resource name, tutorial-openweathermap

B. Enter base url, https://api.openweathermap.org

C. Enter parameter name, appid

D. Enter parameter value, the api key you created from OpenWeather

E. click button, create resource

3 - Click on Add query button

4 - Click on Resource query

5 - Type "tutorial", and select tutorial-openweathermap

6 - enter url path, Paste "geo/1.0/direct?q=new york&limit=5" into text area

https://openweathermap.org/api/geocoding-api have three Parameters

• q is City name

• appid is your unique API key, we've already filled this in when we created the REST API resource, so we don't need to enter it here.

• limit is number of the locations in the API response (up to 5 results can be returned in the API response)

7 - Click on Save & Run

8 - now we get New York Longitude and latitude

9 - click add query button

10 - Click on Resource query

11 - type tutorial, select tutorial-openweathermap

12 - Paste "data/2.5/weather?lat=40.7143&lon=-74.006&units=metric" into text area

https://openweathermap.org/current#one has three parameters

• lat is latitude

• lon is longitude

• units is units of measurement, for temperature in Celsius use units=metrics

13 - rename query to queryCurrentWeather

14 - Click on Save & Run

15 - Now we have found the current weather in New York City based on latitude and longitude

Next, we will assign weather data values to the UI

16 - click add component button, and Type "container"

17 - drag container to main frame

18 - Click on container title

19 - paste below code to title content

#### {{queryCurrentWeather.data.name}}
{{moment().tz('America/New_York').format('ll, LT')}}

queryCurrentWeather is query name, queryCurrentWeather.data is results of query, you can find name from the query result, name is city name

moment is date and time library

America/New_York is timezone

'll, LT' is date and time formats, visit https://momentjs.com/docs/#/parsing/string-format/ to learn more

20 - Right click on container1

21 - Click on Body

22 - Type "image", and click Image component

23 - Paste "https://openweathermap.org/img/wn/{{queryCurrentWeather.data.weather[0].icon}}@2x.png" into Image source

24 - resize weather icon

25 - Type "text", and click text component

26 - adjust the position of text component

27 - Paste "#### {{parseInt(queryCurrentWeather.data.main.temp)}}°C" into content value

The parseInt() function parses a string argument and returns an integer

28 - search text component

add text component

29 - paste below code to content value

**Feels like {{parseInt(queryCurrentWeather.data.main.feels_like)}}°C. {{queryCurrentWeather.data.weather[0].description}}**

** ** is markdown syntax, make text bold

30 - Type "key", and add Key Value component

31 - select Key value component

Paste below text into element

{
  humidity: '{{queryCurrentWeather.data.main.humidity}}%',
  pressure: '{{queryCurrentWeather.data.main.pressure}}hPa',
  visibility: '{{queryCurrentWeather.data.visibility}}m',
  wind: '{{queryCurrentWeather.data.wind.speed}}m/s',
  sunset: '{{moment(queryCurrentWeather.data.sys.sunset * 1000).tz('America/New_York').format('LT')}}',
}

queryCurrentWeather.data.sys.sunset is Unix timestamps in seconds, we need to convert to milliseconds, So we need to multiply by 1000

close create components panel

32 - change label position to Left

Develop-Calling the GraphQL API

16 steps in total

1 - select GraphQL resource type

2 - create GraphQL resource

A. Enter a resource name, tutorial-graphql-countries

B. Enter the base url, https://countries.trevorblades.com/

C. create resource

3 - click code view

4 - click add query button

5 - click Resource query button

type tutorial

select resource tutorial-graphql-countries

6 - paste below code to Query

# Write your query or mutation here
{
  countries {
    name
    code
    native
    capital
    emoji
    currency
    languages {
      code
      name
    }
  }
}

api docs see https://github.com/trevorblades/countries

This query can be used to query all country information

7 - Click on Save & Run

8 - check results of query. Click on        "name": "Andorra",

There is a lot of country information here

9 - Add another tutorial-graphql-countries resource query

10 - paste below code to Query

# Write your query or mutation here
{
  country(code: "US") {
    name
    native
    capital
    emoji
    currency
    languages {
      code
      name
    }
  }
}

This query can be used to search for US country information

11 - Click on Save & Run

12 - check results of query, Click on "United States"

13 - rename query to queryCountry

Click on Rename button

Paste "queryCountry" into input

save query

14 - add key value component

click add component view

Type "key"

drag Key Value component to main frame

15 - paste below code to Content data

{
  name: "{{queryCountry.data.country.name}}",
  capital: "{{queryCountry.data.country.capital}}",
  emoji: "{{queryCountry.data.country.emoji}}",
  currency: {{queryCountry.data.country.currency.split(",")}},
}

country may have multiple currencies, the split() method of String values takes a pattern and divides this string into an ordered list of substrings by searching for the pattern

we display the country information correctly on the Key Value Component

16 - Now let's try to show the France info

change US to FR