🔌 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.

❗

Note: Supabase Edge Functions could serve as an alternative for some of your Bubble.io backend workflows. They are simple to write, easy to deploy, and an attractive option with a free tier of up to 500k calls per month.

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

plain text
supabase functions new hello

Create function

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.

javascript
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' },
  })
})

Create function

Step 3 - Deploy the code to Supabase

plain text
supabase functions deploy hello --no-verify-jwt

Deploy function

❗

Note: Please note that this code primarily serves as a basic demonstration of how to use Supabase Edge Functions. It may require additional modification to be used in a production environment.

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.

Go to the API Connector settings and click on Add another API.

Enter a recognizable name for the API, such as Supabase.

Add a new API call, such as Edge Function Hello

Click on Manually enter API response and copy/paste the results format.

Save this response

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

json
{
	"message": ""
}

JSON schema

Paste the schema to the API Connector

Setup

Add the element Supabase Edge function to your page and configure the element fields.

Plugin Element Properties

Title	Description	Type
Data Type	This is the edge function return type.	App Data
Expected response (JSON)	By default, the plugin attempts to automatically retrieve the expected result based on the type defined in the API connector. To prevent any retrieval failures and ensure that the plugin can properly publish results from Supabase, we recommend you paste your schema into this field. This schema should match the one you have already entered in the API connector.	JSON

Exposed States

Name	Description	Type
Success	Returns "yes" if the function call has been successful.	Text
Result	Results returned by the Edge Function.	Object

Element Events

Name	Description
Get Result	Triggered when the result has been retrieved.

Element Actions

Invoke a Supabase Edge function

You can configure the following fields:

Fields:

Title	Description	Type
Function Name	Name of your deployed Edge Function	Text
Method	The HTTP verb of the request. Defaults to POST.	Dropdown
Region	The region to invoke the function in. Defaults to any.	Dropdown
Headers	Object representing the headers to send with the request. These will be automatically merged with the JSON Headers field.	Array
JSON Headers	Object representing the headers in JSON format to send with the request. These will be automatically merged with the Headers field.	JSON
Body	The body of the request. These will be automatically merged with the JSON Body field.	JSON
JSON Body	The body of the request in JSON format. These will be automatically merged with the Body field.	JSON
Is stream?	Indicates whether the function should be invoked as a streaming function. When enabled, the response will be processed as a continuous stream of data.	Boolean
Debug stream?	Enables the display of debugging messages in the console during streaming. Useful for troubleshooting and monitoring the streaming process.	Boolean
Accumulate fields	Fields to accumulate when using the stream mode. If not set, all fields are accumulated.	Text