Calling external APIs from Edge Functions in Supabase - Step-by-Step Execution

Process Flow - Calling external APIs from Edge Functions

Edge Function Triggered

↓

Prepare API Request

↓

Send HTTP Request to External API

↓

Wait for API Response

↓

Process Response Data

↓

Return Data to Client

↓

End

When an Edge Function runs, it prepares and sends a request to an external API, waits for the response, processes it, and returns the result to the client.

Execution Sample

Supabase

export default async function handler(req) {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}

This Edge Function fetches data from an external API and returns it as JSON to the client.

Process Table

Step	Action	Evaluation	Result
1	Edge Function is triggered by client request	N/A	Function starts execution
2	Prepare fetch request to 'https://api.example.com/data'	N/A	Request ready to send
3	Send HTTP GET request	Await response	Request sent, waiting for response
4	Receive HTTP response	Check status code	Status 200 OK received
5	Parse response JSON	Convert response body to JSON	{"key":"value"}
6	Create new Response with JSON data	Wrap data for client	Response ready with status 200
7	Return response to client	Send data back	Client receives JSON data
8	Function execution ends	N/A	Edge Function completes

💡 Function ends after returning the processed API data to the client

Status Tracker

Variable	Start	After Step 3	After Step 5	Final
req	Client request object	Client request object	Client request object	Client request object
response	undefined	Pending HTTP response	HTTP response object with status 200	HTTP response object
data	undefined	undefined	{"key":"value"}	{"key":"value"}

Key Moments - 3 Insights

Why do we use 'await' before fetch and response.json()?

Because fetch and response.json() are asynchronous operations that take time to complete. Using 'await' pauses the function until the data is ready, as shown in steps 3 and 5 of the execution_table.

What happens if the external API returns an error status?

The function receives the error status in step 4. You should check the status code and handle errors accordingly before parsing the response, which is not shown here but important for real use.

Can the Edge Function call multiple external APIs in one execution?

Yes, you can make multiple fetch calls sequentially or in parallel. Each call would follow similar steps as shown in the execution_table for each API.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'data' after step 5?

A Client request object

B undefined

C {"key":"value"}

D Pending HTTP response

💡 Hint

Check the 'data' variable in variable_tracker after step 5

At which step does the function send the HTTP request to the external API?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at the 'Action' column in execution_table for sending the request

If the external API took longer to respond, which step would be delayed?

A Step 4

B Step 2

C Step 3

D Step 5

💡 Hint

Step 4 is when the function waits to receive the HTTP response

Concept Snapshot

Calling external APIs from Edge Functions:
- Use 'fetch' with 'await' to send HTTP requests.
- Wait for the response before processing.
- Parse response with response.json() to get data.
- Return processed data as a Response object.
- Handle errors by checking response status.
- Edge Functions run close to users for fast API calls.

Full Transcript

When an Edge Function is triggered, it prepares a fetch request to an external API. It sends the HTTP GET request and waits asynchronously for the response. Once the response arrives, it checks the status code to ensure success. Then it parses the response body as JSON data. Finally, it wraps this data in a new Response object and returns it to the client. The function ends after sending the data. Using 'await' pauses execution until each asynchronous step completes, ensuring the function processes data correctly. This flow allows Edge Functions to fetch and return external API data quickly and efficiently.