Skip to content

supabase-edge-functions-basic.mdx

Latest commit

 

History

History
215 lines (147 loc) · 7.75 KB

supabase-edge-functions-basic.mdx

File metadata and controls

215 lines (147 loc) · 7.75 KB
title Triggering tasks from Supabase edge functions
sidebarTitle Edge function hello world
description This guide will show you how to trigger a task from a Supabase edge function, and then view the run in our dashboard.

import Prerequisites from "/snippets/framework-prerequisites.mdx"; import SupabasePrerequisites from "/snippets/supabase-prerequisites.mdx"; import CliInitStep from "/snippets/step-cli-init.mdx"; import CliDevStep from "/snippets/step-cli-dev.mdx"; import CliRunTestStep from "/snippets/step-run-test.mdx"; import CliViewRunStep from "/snippets/step-view-run.mdx"; import UsefulNextSteps from "/snippets/useful-next-steps.mdx"; import TriggerTaskNextjs from "/snippets/trigger-tasks-nextjs.mdx"; import NextjsTroubleshootingMissingApiKey from "/snippets/nextjs-missing-api-key.mdx"; import NextjsTroubleshootingButtonSyntax from "/snippets/nextjs-button-syntax.mdx"; import SupabaseDocsCards from "/snippets/supabase-docs-cards.mdx";

import SupabaseAuthInfo from "/snippets/supabase-auth-info.mdx";

Overview

Supabase edge functions allow you to trigger tasks either when an event is sent from a third party (e.g. when a new Stripe payment is processed, when a new user signs up to a service, etc), or when there are any changes or updates to your Supabase database.

This guide shows you how to set up and deploy a simple Supabase edge function example that triggers a task when an edge function URL is accessed.

Prerequisites

GitHub repo

<Card title="View the project on GitHub" icon="GitHub" href="https://github.com/triggerdotdev/examples/tree/main/supabase-edge-functions"

Click here to view the full code for this project in our examples repository on GitHub. You can fork it and use it as a starting point for your own project.

Initial setup

Create a new Supabase edge function and deploy it

We'll call this example edge-function-trigger.

In your project, run the following command in the terminal using the Supabase CLI:

supabase functions new edge-function-trigger

Replace the placeholder code in your edge-function-trigger/index.ts file with the following:

// Setup type definitions for built-in Supabase Runtime APIs
import "jsr:@supabase/functions-js/edge-runtime.d.ts";
// Import the Trigger.dev SDK - replace "<your-sdk-version>" with the version of the SDK you are using, e.g. "3.0.0". You can find this in your package.json file.
import { tasks } from "npm:@trigger.dev/sdk@3.0.0";
// Import your task type from your /trigger folder
import type { helloWorldTask } from "../../../src/trigger/example.ts";
//     👆 **type-only** import

Deno.serve(async () => {
  await tasks.trigger<typeof helloWorldTask>(
    // Your task id
    "hello-world",
    // Your task payload
    "Hello from a Supabase Edge Function!"
  );
  return new Response("OK");
});

You can only import the type from the task. Tasks in the trigger folder use Node, so they must stay in there or they will not run, especially if you are using a different runtime like Deno. Also do not add "npm:" to imports inside your task files, for the same reason.

You can now deploy your edge function with the following command in your terminal:

supabase functions deploy edge-function-trigger --no-verify-jwt
`--no-verify-jwt` removes the JSON Web Tokens requirement from the authorization header. By default this should be on, but it is not strictly required for this hello world example.

Follow the CLI instructions and once complete you should now see your new edge function deployment in your Supabase edge functions dashboard.

There will be a link to the dashboard in your terminal output, or you can find it at this URL:

https://supabase.com/dashboard/project/<your-project-id>/functions

Replace your-project-id with your actual project ID.

Set your Trigger.dev prod secret key in the Supabase dashboard

To trigger a task from your edge function, you need to set your Trigger.dev secret key in the Supabase dashboard.

To do this, first go to your Trigger.dev project dashboard and copy the prod secret key from the API keys page.

How to find your prod secret key

Then, in Supabase, select your project, navigate to 'Project settings' , click 'Edge functions' in the configurations menu, and then click the 'Add new secret' button.

Add TRIGGER_SECRET_KEY with the pasted value of your Trigger.dev prod secret key.

Add secret key in Supabase

Deploy your task and trigger it from your edge function

Next, deploy your hello-world task to Trigger.dev cloud.

npx trigger.dev@latest deploy
pnpm dlx trigger.dev@latest deploy
yarn dlx trigger.dev@latest deploy

To do this all you need to do is simply open the edge-function-trigger URL.

https://supabase.com/dashboard/project/<your-project-id>/functions

Replace your-project-id with your actual project ID.

In your Supabase project, go to your Edge function dashboard, find edge-function-trigger, copy the URL, and paste it into a new window in your browser.

Once loaded you should see ‘OK’ on the new screen.

Edge function URL

The task will be triggered when your edge function URL is accessed.

Check your cloud.trigger.dev dashboard and you should see a succesful hello-world task.

**Congratulations, you have run a simple Hello World task from a Supabase edge function!**

If you see a runtime error when calling tasks.trigger()

If you see TypeError: Cannot read properties of undefined (reading 'toString') when calling tasks.trigger() from your edge function, the SDK is hitting a dependency that expects Node-style APIs not available in the Supabase Edge (Deno) runtime. Use the Tasks API with fetch instead of the SDK—that avoids loading the SDK in Deno:

const response = await fetch(
  `https://api.trigger.dev/api/v1/tasks/your-task-id/trigger`,
  {
    method: "POST",
    headers: {
      Authorization: `Bearer ${Deno.env.get("TRIGGER_SECRET_KEY")}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ payload: { your: "payload" } }),
  }
);

See Trigger task via API for full request/response details and optional fields (e.g. delay, idempotencyKey).