How to use data from one API call, to configure the next API call

As your app gets more complex, you'll want to make additional API calls based on data you've already received. Here is how to set that up using the TheCatAPI

Hi there. If your app idea is going to perform some ‘useful work’ for your customer, then it is likely to involve a certain degree of complexity. This is a good thing, because the more complexity you can hide from the customer, the easier it will be for them to feel that your product provides them value.

It is likely then that your app will make use of external data sources, and that you’ll interact with them using the interfaces of those resources, which is commonly a REST API.

Bubbles general purpose API Connector allows you to easily integrate with these interfaces.

What this article will describe is how to do an initial call to get a list of values, populate this into a dropdown, which will be the basis of the next API call.

..plus you get cat pictures

The API

The API we’ll be using is https://thecatapi.com/ . (If you are more of a dog person, there is a very similar API at https://thedogapi.com/ that you could use instead.)

This API is free to use for our purpose, only requires a simple authentication process, and can return useful data based on a few parameters.

First Sign up so you can get an API Key

You’ll then be emailed you API which we’ll be using shortly in the API connector.

Make a note of this in your password store, and never share it publicly.

If you want more information about the authentication process of this api, the docs are here: https://docs.thecatapi.com/authentication

Setup the API Connection

In your Bubble app browse to:

Plugins | API Connector

and click Add another API

Give it a name, like ‘The Cat API’ and the Authentication type we want is ‘Private key in header’

A note about headers and url parameters.

In https requests, the header is encrypted, which means that if you have any sensitive parameters you want to send to a remote web service, you should put them in the header rather than in the url.

The url (and its parameters) however is visible in plain text every step of the way and could be intercepted and read by a malicious actor, and/or potentially logged in plain text by any number of systems [routers and servers] that it passes through.

so.. if in doubt, put any authorization keys in the header, not the url.

For configuring this in our API connector, we’ll simply add it as a key name just below the API name

Instead of 12345, add the api key you received after you signed up to thecatapi.

The API Calls

We want 2 API calls. One to get a list of breeds, and another to get an image of the selected breed.

For the first call, we look at the docs https://docs.thecatapi.com/api-reference/breeds/breeds-list . At the bottom of this page is a tool which displays the url we need:

https://api.thecatapi.com/v1/breeds

so, we’ll configure our first API call like this: