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().

Practice

1. What is the main purpose of using supabase.functions.invoke() in a client application?

easy

A. To create new user accounts automatically

B. To directly access the database without authentication

C. To upload files to Supabase storage

D. To call Edge Functions and get fast responses near the user

Solution

1. Step 1: Understand what Edge Functions do

   Edge Functions run code close to users to reduce delay and improve speed.

2. Step 2: Identify the role of supabase.functions.invoke()

   This method is used to call those Edge Functions from the client side.

3. Final Answer:

   To call Edge Functions and get fast responses near the user -> Option D

4. Quick Check:

   Invoke calls Edge Functions [OK]

Hint: Invoke calls Edge Functions for fast user responses [OK]

Common Mistakes:

• Thinking it accesses database directly
• Confusing with file upload methods
• Assuming it creates users automatically

2. Which of the following is the correct syntax to invoke an Edge Function named hello using Supabase client in JavaScript?

easy

A. await supabase.functions.invoke('hello')

B. supabase.invoke.functions('hello')

C. await supabase.functions.call('hello')

D. supabase.functions.run('hello')

Solution

1. Step 1: Recall the correct method name

   The method to call Edge Functions is supabase.functions.invoke().

2. Step 2: Check the syntax for calling a function named 'hello'

   The correct syntax is await supabase.functions.invoke('hello').

3. Final Answer:

   await supabase.functions.invoke('hello') -> Option A

4. Quick Check:

   Correct method is invoke() [OK]

Hint: Use supabase.functions.invoke('functionName') [OK]

Common Mistakes:

• Using wrong method names like call or run
• Swapping order of functions and invoke
• Forgetting to await the async call

3. What will be the output of the following code snippet if the Edge Function returns {"message": "Hello World"}?

const { data, error } = await supabase.functions.invoke('greet');
if (error) {
  console.log('Error:', error.message);
} else {
  console.log(data.message);
}

medium

A. Hello World

B. Error: Function not found

C. undefined

D. SyntaxError

Solution

1. Step 1: Understand the function response

   The Edge Function returns an object with a key "message" and value "Hello World".

2. Step 2: Analyze the code output

   The code logs data.message which is "Hello World" if no error occurs.

3. Final Answer:

   Hello World -> Option A

4. Quick Check:

   data.message logs "Hello World" [OK]

Hint: Check data.message for function response output [OK]

Common Mistakes:

• Assuming error always occurs
• Confusing data with error object
• Expecting raw JSON string instead of parsed object

4. Identify the error in this code snippet that tries to invoke an Edge Function named dataFetch:

const response = supabase.functions.invoke('dataFetch')
console.log(response.data)

medium

A. No error, code is correct

B. Missing await keyword for the async invoke call

C. Using console.log instead of alert

D. Incorrect function name 'dataFetch'

Solution

1. Step 1: Check async call usage

   supabase.functions.invoke() returns a promise and must be awaited.

2. Step 2: Identify missing await

   The code assigns the promise to response without awaiting, so response.data is undefined.

3. Final Answer:

   Missing await keyword for the async invoke call -> Option B

4. Quick Check:

   Async calls need await [OK]

Hint: Always await async invoke calls [OK]

Common Mistakes:

• Forgetting await on async functions
• Assuming invoke returns data synchronously
• Ignoring promise nature of invoke()

5. You want to send JSON data {"userId": 123} to an Edge Function named getUserData and handle errors properly. Which code snippet correctly does this?

hard

A. const { data, error } = await supabase.functions.invoke('getUserData', body: { userId: 123 }); if (error) console.error(error); else console.log(data);

B. const { data, error } = supabase.functions.invoke('getUserData', { body: JSON.stringify({ userId: 123 }) }); if (error) console.error(error); else console.log(data);

C. const { data, error } = await supabase.functions.invoke('getUserData', { body: JSON.stringify({ userId: 123 }) }); if (error) console.error(error); else console.log(data);

D. const response = await supabase.functions.invoke('getUserData', { userId: 123 }); console.log(response.data);

Solution

1. Step 1: Understand the body format

   The body must be a JSON string, so use JSON.stringify() on the data object.

2. Step 2: Use await and handle error properly

   The call must be awaited and error checked before using data.

3. Final Answer:

   const { data, error } = await supabase.functions.invoke('getUserData', { body: JSON.stringify({ userId: 123 }) }); if (error) console.error(error); else console.log(data); -> Option C

4. Quick Check:

   Body as JSON string and await invoke [OK]

Hint: Stringify body JSON and await invoke call [OK]

Common Mistakes:

• Passing body as object instead of JSON string
• Not awaiting the invoke call
• Ignoring error handling