Bird
Raised Fist0
Supabasecloud~5 mins

Calling external APIs from Edge Functions in Supabase

Choose your learning style10 modes available
LearnWhyDeepVisualTryChallengeProjectRecallTime
Introduction

Edge Functions let you run code close to users for fast responses. Calling external APIs from them helps get data or services from other places quickly.

You want to fetch weather data from a public API when a user visits your site.
You need to verify user information by calling an external authentication service.
You want to get real-time stock prices from a financial API to show on your app.
You need to send data to a third-party analytics service right when a user interacts.
You want to combine data from your database with info from another API before sending it to the user.
Syntax
Supabase
export default async function handler(request) {
  const response = await fetch('https://api.example.com/data', {
    method: 'GET',
    headers: {
      'Authorization': 'Bearer YOUR_API_KEY'
    }
  })
  const data = await response.json()
  return new Response(JSON.stringify(data), { status: 200 })
}

Use fetch to call external APIs inside Edge Functions.

Always handle the response and convert it to JSON or text as needed.

Examples
Simple GET request without headers.
Supabase
export default async function handler(request) {
  const response = await fetch('https://api.example.com/data')
  const data = await response.json()
  return new Response(JSON.stringify(data), { status: 200 })
}
POST request with JSON body and headers.
Supabase
export default async function handler(request) {
  const response = await fetch('https://api.example.com/data', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ key: 'value' })
  })
  const data = await response.json()
  return new Response(JSON.stringify(data), { status: 200 })
}
GET request with error handling for network or API errors.
Supabase
export default async function handler(request) {
  try {
    const response = await fetch('https://api.example.com/data')
    if (!response.ok) {
      return new Response('Error fetching data', { status: response.status })
    }
    const data = await response.json()
    return new Response(JSON.stringify(data), { status: 200 })
  } catch (error) {
    return new Response('Network error', { status: 500 })
  }
}
Sample Program

This Edge Function fetches a sample todo item from a public API. It returns the todo data as JSON with a success message. It also handles errors if the fetch fails or the API returns an error.

Supabase
export default async function handler(request) {
  const apiUrl = 'https://jsonplaceholder.typicode.com/todos/1'
  try {
    const response = await fetch(apiUrl)
    if (!response.ok) {
      return new Response('Failed to fetch data', { status: response.status })
    }
    const todo = await response.json()
    return new Response(JSON.stringify({ message: 'Todo fetched successfully', todo }), {
      status: 200,
      headers: { 'Content-Type': 'application/json' }
    })
  } catch (error) {
    return new Response('Network error occurred', { status: 500 })
  }
}
OutputSuccess
Important Notes

Always handle errors to avoid crashing your Edge Function.

Keep API keys secret and do not expose them in client-side code.

Edge Functions have time limits; keep external API calls fast and efficient.

Summary

Edge Functions can call external APIs using fetch to get or send data.

Handle responses and errors carefully for a smooth user experience.

Use this to combine your app data with external services quickly and close to users.

Practice

(1/5)
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
Recommended

Ready to prove it?

Pass the test and this pattern moves unknown strong while earning +1 Grip toward your certificate.

10 questions~5 mineasy hard