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.

Practice

1. What is the main purpose of using fetch in Supabase Edge Functions when calling external APIs?

easy

A. To create user interface components

B. To store data permanently in Supabase database

C. To run SQL queries inside the Edge Function

D. To send requests and receive data from external services

Solution

1. Step 1: Understand the role of fetch in Edge Functions

   fetch is used to send HTTP requests to external APIs and get responses back.

2. Step 2: Identify what fetch does not do

   It does not store data permanently or create UI components; it only communicates with external services.

3. Final Answer:

   To send requests and receive data from external services -> Option D

4. Quick Check:

   fetch calls external APIs = C [OK]

Hint: Remember: fetch is for talking to outside services [OK]

Common Mistakes:

• Thinking fetch stores data permanently
• Confusing fetch with database queries
• Assuming fetch creates UI elements

2. Which of the following is the correct syntax to call an external API using fetch inside a Supabase Edge Function?

easy

A. const response = fetch('https://api.example.com/data').then(res => res.json())

B. const response = fetch.get('https://api.example.com/data')

C. const response = fetch('https://api.example.com/data')

D. const response = fetch('https://api.example.com/data').json()

Solution

1. Step 1: Recall the correct usage of fetch

   fetch returns a promise; to get JSON data, you call then(res => res.json()).

2. Step 2: Check each option for syntax correctness

   const response = fetch('https://api.example.com/data') misses handling the promise; B uses invalid method; D incorrectly calls json() directly on fetch.

3. Final Answer:

   const response = fetch('https://api.example.com/data').then(res => res.json()) -> Option A

4. Quick Check:

   fetch + then(res.json()) = A [OK]

Hint: Always handle fetch with then() or await for JSON [OK]

Common Mistakes:

• Calling json() directly on fetch without then or await
• Using fetch.get which does not exist
• Ignoring the promise returned by fetch

3. Consider this Edge Function code snippet:

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

If the external API returns { "value": 42 }, what will the Edge Function return?

medium

A. An error because data.value is undefined

B. A response with body '{"result":42}' and status 200

C. A response with body '42' and status 404

D. A response with body '{"value":42}' and status 200

Solution

1. Step 1: Understand the API response and parsing

   The API returns JSON {"value": 42}, which is parsed into data object with data.value = 42.

2. Step 2: Check the returned response from the Edge Function

   The function returns JSON string with key "result" and value data.value (42), status 200.

3. Final Answer:

   A response with body '{"result":42}' and status 200 -> Option B

4. Quick Check:

   API value 42 mapped to result key = D [OK]

Hint: Map API data correctly before returning JSON [OK]

Common Mistakes:

• Returning original API JSON without mapping
• Confusing status codes
• Assuming data.value is undefined

4. You wrote this Edge Function code to call an external API:

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

What is the main error in this code?

medium

A. Missing await before fetch causing response to be a Promise

B. Using await on response.json() is incorrect

C. Response constructor cannot take JSON string

D. The function should not return a Response object

Solution

1. Step 1: Identify how fetch is called

   fetch returns a Promise, so it must be awaited to get the response object.

2. Step 2: Check usage of await on response.json()

   Awaiting response.json() is correct; the error is missing await on fetch.

3. Final Answer:

   Missing await before fetch causing response to be a Promise -> Option A

4. Quick Check:

   Missing await before fetch causing response to be a Promise = B [OK]

Hint: Always await fetch before calling response methods [OK]

Common Mistakes:

• Not awaiting fetch before response.json()
• Thinking response.json() does not need await
• Misunderstanding Response constructor usage

5. You want to call two different external APIs sequentially inside a Supabase Edge Function and combine their results before returning. Which code snippet correctly does this?

hard

A. const [res1, res2] = await Promise.all([
fetch('https://api1.com/data'),
fetch('https://api2.com/data')
]);
const data1 = await res1.json();
const data2 = await res2.json();
return new Response(JSON.stringify({ first: data1, second: data2 }), { status: 200 });

B. const res1 = fetch('https://api1.com/data');
const data1 = await res1.json();
const res2 = fetch('https://api2.com/data');
const data2 = await res2.json();
return new Response(JSON.stringify({ first: data1, second: data2 }), { status: 200 });

C. const res1 = await fetch('https://api1.com/data');
const data1 = await res1.json();
const res2 = await fetch('https://api2.com/data');
const data2 = await res2.json();
return new Response(JSON.stringify({ first: data1, second: data2 }), { status: 200 });

D. const data1 = fetch('https://api1.com/data').json();
const data2 = fetch('https://api2.com/data').json();
return new Response(JSON.stringify({ first: data1, second: data2 }), { status: 200 });

Solution

1. Step 1: Understand sequential API calls

   To call APIs one after another, await each fetch and parse before next call.

2. Step 2: Check each option for correct async handling

   const res1 = await fetch('https://api1.com/data'); const data1 = await res1.json(); const res2 = await fetch('https://api2.com/data'); const data2 = await res2.json(); return new Response(JSON.stringify({ first: data1, second: data2 }), { status: 200 }); correctly awaits each fetch and json parsing sequentially. const res1 = fetch('https://api1.com/data'); const data1 = await res1.json(); const res2 = fetch('https://api2.com/data'); const data2 = await res2.json(); return new Response(JSON.stringify({ first: data1, second: data2 }), { status: 200 }); misses await on fetch. const [res1, res2] = await Promise.all([ fetch('https://api1.com/data'), fetch('https://api2.com/data') ]); const data1 = await res1.json(); const data2 = await res2.json(); return new Response(JSON.stringify({ first: data1, second: data2 }), { status: 200 }); uses parallel calls, not sequential. const data1 = fetch('https://api1.com/data').json(); const data2 = fetch('https://api2.com/data').json(); return new Response(JSON.stringify({ first: data1, second: data2 }), { status: 200 }); incorrectly calls json() directly.

3. Final Answer:

   const res1 = await fetch('https://api1.com/data');\nconst data1 = await res1.json();\nconst res2 = await fetch('https://api2.com/data');\nconst data2 = await res2.json();\nreturn new Response(JSON.stringify({ first: data1, second: data2 }), { status: 200 }); -> Option C

4. Quick Check:

   Sequential await fetch + json = A [OK]

Hint: Await each fetch and json call in order for sequential calls [OK]

Common Mistakes:

• Not awaiting fetch before json()
• Calling json() directly on fetch
• Mixing parallel and sequential calls incorrectly