Calling external APIs from Edge Functions in Supabase - Mini Project: Build & Apply

Calling external APIs from Edge Functions

📖 Scenario: You are building a small cloud function that runs at the edge. This function will call an external API to get some data and then return it. Edge Functions run close to users for fast response.

🎯 Goal: Create an Edge Function in Supabase that calls the external API https://api.agify.io?name=michael to get the predicted age for the name 'michael'. You will set up the function, configure the API URL, fetch the data, and return the JSON response.

📋 What You'll Learn

Create a variable with the external API URL

Add a configuration variable for the name parameter

Write the fetch call to get data from the API

Return the JSON response from the Edge Function

💡 Why This Matters

🌍 Real World

Edge Functions are used to run code close to users for fast responses. Calling external APIs lets you enrich your functions with live data from other services.

💼 Career

Many cloud jobs require writing serverless functions that integrate with external APIs. This project teaches the basics of that important skill.

1

Set up the API URL variable

Create a variable called apiUrl and set it to the string "https://api.agify.io?name=michael".

Supabase

// Create a variable called apiUrl with the external API URL
// Your code here

Hint

Use const apiUrl = "https://api.agify.io?name=michael"; to store the API URL.

2

Add a configuration variable for the name

Create a variable called name and set it to the string "michael". Then update apiUrl to use this name variable in the URL with template literals.

Supabase

const apiUrl = `https://api.agify.io?name=michael`;
// Create a variable called name with value "michael" and update apiUrl to use it
// Your code here

Hint

Use const name = "michael"; and template literals like `https://api.agify.io?name=${name}`.

3

Fetch data from the external API

Write an async function called handler that fetches data from apiUrl using fetch. Await the response and then await response.json() to get the data.

Supabase

const name = "michael";
const apiUrl = `https://api.agify.io?name=${name}`;

// Write an async function handler that fetches from apiUrl and gets JSON data
// Your code here

Hint

Use export async function handler() and inside it const response = await fetch(apiUrl); then const data = await response.json();.

4

Return the JSON response from the Edge Function

In the handler function, return a new Response object with the JSON stringified data and set the header Content-Type to application/json.

Supabase

const name = "michael";
const apiUrl = `https://api.agify.io?name=${name}`;

export async function handler() {
  const response = await fetch(apiUrl);
  const data = await response.json();
  // Return the JSON response with proper headers
  // Your code here
}

Hint

Use return new Response(JSON.stringify(data), { headers: { "Content-Type": "application/json" } }); to return JSON properly.