Invoking Edge Functions from client in Supabase - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to call an Edge Function named 'hello' using Supabase client.

Supabase

const { data, error } = await supabase.functions.[1]('hello')

Drag options to blanks, or click blank then click option'

Aexecute

Bcall

Cinvoke

Drun

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'call' or 'execute' instead of 'invoke' causes errors.

The correct method to call an Edge Function from the Supabase client is invoke.

2fill in blank

medium

Complete the code to send a POST request with JSON body to the Edge Function 'hello'.

Supabase

const { data, error } = await supabase.functions.invoke('hello', { method: '[1]', body: JSON.stringify({ name: 'Alice' }) })

Drag options to blanks, or click blank then click option'

AGET

BPOST

CPUT

DDELETE

Attempts:

3 left

💡 Hint

Common Mistakes

Using GET method when sending a body causes the body to be ignored.

To send data to an Edge Function, use the POST method.

3fill in blank

hard

Fix the error in the code to correctly parse JSON response from the Edge Function.

Supabase

const response = await supabase.functions.invoke('hello');
const data = await response.[1]()

Drag options to blanks, or click blank then click option'

Ajson

Btext

Cblob

DformData

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of json() causes data to be a string, not an object.

The response from an Edge Function is parsed as JSON using json() method.

4fill in blank

hard

Fill both blanks to correctly handle errors and log the data from the Edge Function call.

Supabase

const { data, error } = await supabase.functions.invoke('hello', { method: 'POST' });
if ([1]) {
  console.error(error);
} else {
  console.log([2]);
}

Drag options to blanks, or click blank then click option'

Aerror

Bdata

Cresponse

Dresult

Attempts:

3 left

💡 Hint

Common Mistakes

Checking 'data' for errors instead of 'error'.

Logging 'error' instead of 'data' on success.

Check if error exists to handle errors, otherwise log the data.

5fill in blank

hard

Fill all three blanks to send a GET request with a custom header and parse the JSON response.

Supabase

const response = await supabase.functions.invoke('hello', { method: '[1]', headers: { '[2]': 'application/json' } });
const data = await response.[3]()

Drag options to blanks, or click blank then click option'

APOST

BGET

Cjson

DContent-Type

Attempts:

3 left

💡 Hint

Common Mistakes

Using POST method when no body is sent.

Missing or wrong header name.

Parsing response with text() instead of json().

Use GET method, set header Content-Type to 'application/json', and parse response with json().