Basic Edge Function

Here's a basic Edge function code which returns every row in a table called "space" as a response. We'll explain what's happening below the code, but there's also comments.

import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
import { serve } from 'https://deno.land/[email protected]/http/server.ts'
const corsHeaders = {
  'Access-Control-Allow-Origin': '*', // Replace '*' with your domain in production
  'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, DELETE', // Add any other methods needed
  'Access-Control-Allow-Headers': 'Authorization, X-Client-Info, Apikey, Content-Type',
};

serve(async (req) => {
  // Log the request method for debugging
  console.log(`Received request: ${req.method}`);

  // Preflight request handling
  if (req.method === 'OPTIONS') {
    return new Response('ok', { headers: { ...corsHeaders }, status: 200 })
  }
  const origin = req.headers.get('Origin')
  // console.log('origin is :', origin)
  const { test } = await req.json()
  
  // Initialize Supabase client
  const supabaseUrl = Deno.env.get('SUPABASE_URL');
  const supabaseAnonKey = Deno.env.get('SUPABASE_ANON_KEY');
  const supabaseClient = createClient(supabaseUrl, supabaseAnonKey, {
    global: { headers: { Authorization: req.headers.get('Authorization') ?? '' } }
  });

  // Database query with RLS
  const { data, error } = await supabaseClient.from('space').select('*,project(*)');

  // Handling database response or error
  if (error) {
    console.error('Database error:', error.message);
    return new Response(JSON.stringify({ error: error.message }), {
      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
      status: 400,
    });
  }

  // Successful data retrieval
  console.log('Data retrieved successfully');
  return new Response(JSON.stringify({ data }), {
    headers: { ...corsHeaders, 'Content-Type': 'application/json' },
    status: 200,
  });
});

This code handles CORS. Which is a must, if we call them from the browser, as if you use the Edge Function element happens.

• Adjust the corsHeaders variable to your liking, like only allowing your own domain name.

• Every response should also include corsHeaders.

• Deno.env.get('SUPABASE_URL') and Deno.env.get('SUPABASE_ANON_KEY'); happens automatically, you don't have to add them to the Secrets manually

• Once sending back the response we send {data} as a JSON which will look like { data: [array of things from DB]}, it should be like this as the plugin expects it like this. Meaning it looks for data.data, to parse the array.

• Return as 'application/json' so it won't be a string, it's really important.