Calling external APIs from Edge Functions in Supabase

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 })
  }
}

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.