Calling external APIs from Edge Functions in Supabase - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ service_behavior

intermediate

What is the output when an Edge Function calls an external API and the API returns a 404 status?

Consider an Edge Function that fetches data from an external API endpoint which does not exist, resulting in a 404 HTTP status. What will the Edge Function's fetch call return?

Supabase

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

A {"status":200}

B {"status":500}

C Throws a network error

D {"status":404}

💡 Hint

Think about how fetch handles HTTP errors like 404.

The fetch API resolves successfully even if the HTTP status is 404. The response object contains the status code 404, so the Edge Function returns {"status":404}.

❓ Architecture

intermediate

Which architecture best supports calling multiple external APIs in parallel from an Edge Function?

You want to call three different external APIs from a Supabase Edge Function and combine their results. Which approach is best to minimize total response time?

A Use Promise.all to call all APIs in parallel and await their combined results.

B Call each API sequentially using await one after another.

C Call the first API, then call the second and third APIs in parallel after the first finishes.

D Call only the fastest API and ignore the others.

💡 Hint

Think about how to run multiple async calls at the same time.

Using Promise.all runs all fetch calls in parallel, reducing total wait time compared to sequential calls.

❓ security

advanced

What is the safest way to store and use API keys when calling external APIs from Supabase Edge Functions?

You need to call an external API that requires an API key. How should you handle the API key in your Edge Function to keep it secure?

A Hardcode the API key directly in the Edge Function source code.

B Send the API key from the client to the Edge Function in each request.

C Store the API key in Supabase environment variables and access it inside the Edge Function.

D Include the API key in the URL query parameters in the Edge Function.

💡 Hint

Think about where sensitive data should be stored to avoid exposure.

Environment variables keep secrets out of source code and client requests, protecting API keys from exposure.

❓ Configuration

advanced

Which code snippet correctly handles JSON response parsing and errors when calling an external API from an Edge Function?

Choose the code snippet that safely fetches JSON data from an external API and handles possible errors without crashing.

A

const res = await fetch(url);
const data = await res.json();
return new Response(JSON.stringify(data));

B

try {
  const res = await fetch(url);
  if (!res.ok) throw new Error('API error');
  const data = await res.json();
  return new Response(JSON.stringify(data));
} catch (e) {
  return new Response('Error', { status: 500 });
}

C

const res = fetch(url);
const data = await res.json();
return new Response(JSON.stringify(data));

D

const res = await fetch(url);
const data = res.json();
return new Response(JSON.stringify(data));

💡 Hint

Consider error checking and async handling.

Option B checks if the response is OK and uses try-catch to handle errors, preventing crashes.

✅ Best Practice

expert

What is the best practice to avoid cold start delays when calling external APIs from Supabase Edge Functions?

Cold starts can slow down Edge Functions. Which approach helps reduce cold start latency when your function calls external APIs?

A Keep the Edge Function code minimal and use caching for API responses.

B Include large libraries in the Edge Function to handle all API calls.

C Call external APIs only after a long delay inside the function.

D Deploy multiple versions of the Edge Function with different API keys.

💡 Hint

Think about what affects startup time and how caching helps.

Minimal code reduces startup time, and caching API responses avoids repeated slow calls, improving performance.

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