How to Call an Edge Function from Frontend in Supabase

1import { createClient } from '@supabase/supabase-js'
2
3const supabase = createClient(
4  'https://your-project.supabase.co',
5  'your-anon-key'
6)
7
8// Basic invocation with a JSON body
9const { data, error } = await supabase.functions.invoke('hello-world', {
10  body: { name: 'Alice' },
11})
12
13if (error) {
14  console.error('Function error:', error.message)
15} else {
16  console.log('Response:', data) // { message: 'Hello Alice!' }
17}

1const { data, error } = await supabase.functions.invoke('process-payment', {
2  body: {
3    amount: 2999,
4    currency: 'usd',
5  },
6  headers: {
7    'x-idempotency-key': 'unique-request-id-123',
8    'x-custom-header': 'my-value',
9  },
10})
11
12if (error) {
13  console.error('Payment error:', error.message)
14} else {
15  console.log('Payment result:', data)
16}

1// JSON response (default behavior)
2const { data: jsonData } = await supabase.functions.invoke('get-report', {
3  body: { month: 'march' },
4})
5
6// For non-JSON responses, check the error
7// The Supabase client may return an error if JSON parsing fails
8// In that case, use fetch() directly for binary/text responses
9
10// Alternative: Raw fetch for file downloads
11const response = await fetch(
12  'https://your-project.supabase.co/functions/v1/generate-pdf',
13  {
14    method: 'POST',
15    headers: {
16      Authorization: `Bearer ${(await supabase.auth.getSession()).data.session?.access_token}`,
17      apikey: 'your-anon-key',
18      'Content-Type': 'application/json',
19    },
20    body: JSON.stringify({ reportId: 42 }),
21  }
22)
23
24const blob = await response.blob()
25const url = URL.createObjectURL(blob)

1// supabase/functions/hello-world/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5  'Access-Control-Allow-Methods': 'POST, GET, OPTIONS, PUT, DELETE',
6}
7
8Deno.serve(async (req) => {
9  // CRITICAL: Handle OPTIONS preflight
10  if (req.method === 'OPTIONS') {
11    return new Response('ok', { headers: corsHeaders })
12  }
13
14  try {
15    const { name } = await req.json()
16    return new Response(
17      JSON.stringify({ message: `Hello ${name}!` }),
18      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
19    )
20  } catch (err) {
21    // CORS headers in error responses too
22    return new Response(
23      JSON.stringify({ error: 'Internal error' }),
24      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
25    )
26  }
27})

1async function callEdgeFunction(payload: Record<string, unknown>) {
2  try {
3    const { data, error } = await supabase.functions.invoke('my-function', {
4      body: payload,
5    })
6
7    if (error) {
8      // Error from the Edge Function (non-2xx status)
9      console.error('Function returned error:', error.message)
10
11      // Check if it's an auth error
12      if (error.message.includes('Unauthorized') || error.message.includes('401')) {
13        // Redirect to login or refresh session
14        await supabase.auth.refreshSession()
15        // Retry the call
16        return callEdgeFunction(payload)
17      }
18
19      throw error
20    }
21
22    return data
23  } catch (err) {
24    // Network error or unexpected failure
25    console.error('Failed to invoke function:', err)
26    throw err
27  }
28}