Invoking Edge Functions from client in Supabase - Mini Project: Build & Apply

Invoking Edge Functions from client

📖 Scenario: You are building a web app that needs to call a serverless function hosted on Supabase Edge Functions. This function will return a greeting message based on the user's name.

🎯 Goal: Learn how to set up a client call to a Supabase Edge Function and handle the response.

📋 What You'll Learn

Create a variable to hold the user's name

Create a Supabase client instance with the correct URL and anon key

Call the Edge Function named 'hello' with the user's name as a parameter

Handle the response and store the greeting message

💡 Why This Matters

🌍 Real World

Calling serverless functions from client apps is common for adding dynamic, secure backend logic without managing servers.

💼 Career

Understanding how to invoke cloud functions from clients is essential for modern web developers and cloud engineers working with serverless architectures.

1

Create a variable for the user's name

Create a variable called userName and set it to the string 'Alice'.

Supabase

# Your code here

Hint

Use const to declare the variable and assign the exact string 'Alice'.

2

Create a Supabase client instance

Create a constant called supabase and assign it the result of calling createClient with the URL 'https://xyzcompany.supabase.co' and anon key 'public-anon-key'.

Supabase

const userName = 'Alice';
// Your code here

Hint

Use createClient from @supabase/supabase-js with the exact URL and anon key.

3

Call the Edge Function with the user's name

Use await supabase.functions.invoke to call the Edge Function named 'hello' with options { body: { name: userName } }. Destructure the result as const { data: response }.

Supabase

import { createClient } from '@supabase/supabase-js';

const userName = 'Alice';
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key');

// Your code here

Hint

Use await, destructure { data: response } from the invoke call, and pass { body: { name: userName } } as options.

4

Extract and store the greeting message

Create a constant called greeting and assign it the text content of response by calling await response.text().

Supabase

import { createClient } from '@supabase/supabase-js';

const userName = 'Alice';
const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key');

const { data: response } = await supabase.functions.invoke('hello', {
  body: { name: userName }
});

// Your code here

Hint

Use await response.text() to get the message string.