🔌 Edge function

Invoke a Supabase function from your Bubble workflow.

In this section, we will explore how to use Supabase's serverless edge functions in your Bubble.io application.

Deploying an edge function

To get started the first step is to install the Supabase CLI. You can find the instructions here and the Edge function documentation here.

In this section, we will deploy a simple edge function that returns a greeting message.

Step 1 - Create the function hello

supabase functions new hello

Step 2 - Update the code to handle CORS header

To handle requests from other domains, your edge function needs to include CORS (Cross-Origin Resource Sharing) headers. Without these headers, browsers will block cross-origin requests for security reasons.

import { serve } from 'https://deno.land/std@0.203.0/http/server.ts'

const corsHeaders = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Headers':
    'authorization, x-client-info, apikey, content-type',
}

serve(async (req) => {
  if (req.method === 'OPTIONS') {
    return new Response('ok', { headers: corsHeaders })
  }

  const { name } = await req.json()
  const data = {
    message: `Hello ${name}!`,
  }

  return new Response(JSON.stringify(data), {
    headers: { ...corsHeaders, 'Content-Type': 'application/json' },
  })
})

Step 3 - Deploy the code to Supabase

supabase functions deploy hello --no-verify-jwt

For more detailed information about working with Supabase Edge Functions, you can refer to the official guide available here

Configuring the API Connector

In order to parse the results from the edge function on your Bubble.io app, we will start by setting up the API connector.

1. Go to the API Connector settings and click on Add another API.
2. Enter a recognizable name for the API, such as Supabase.
3. Add a new API call, such as Edge Function Hello
4. Click on Manually enter API response and copy/paste the results format.
5. Save this response

In the example of the Hello function, the JSON format is quite simple.

{
	"message": ""
}

Setup

Add the element Supabase Edge function to your page and configure the following field:

States

The element exposes the following state:

• Success: return "yes" if the function call has been successful.
• Result: results returned by the Edge Function.

Events

The element triggers the following event:

• Get Result: triggered when the result has been retrieved

Invoke a function

Invoke a Supabase Edge Function. You can configure the following fields: