How to call an edge function from frontend in Supabase?

 

Step 1: Set Up a Supabase Project

 

• Go to Supabase and sign up if you haven't already.
• Create a new project by following the on-screen instructions.
• Once your project is set up, you'll be redirected to the Supabase dashboard.

 

Step 2: Create an Edge Function in Supabase

 

• In your Supabase dashboard, navigate to the "Edge Functions" tab.

• Click on "New Function" to create a new Supabase Edge Function.

• Define your function. For example, let's create a simple "Hello World" function:

  export default (req, res) => {
  res.json({ message: "Hello, World!" });

};


• Click save and deploy the function. Note the URL where the function is deployed, as you will need it later.

 

Step 3: Set Up CORS Headers

 

• In order to call this function from the frontend, you need to ensure CORS (Cross-Origin Resource Sharing) is set up properly.

• Update your function's code to include CORS headers like so:

  export default (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '\*');
  res.setHeader('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  
  if (req.method === 'OPTIONS') {
    return res.status(200).send('OK');
  }
  
  res.json({ message: "Hello, World!" });

};


 

Step 4: Integrate with Frontend

 

• In your frontend application, you'll need to make a call to this edge function using the fetch API or any HTTP request library like Axios.

• Here's how you can do this with fetch:

  const callEdgeFunction = async () => {
  const response = await fetch('https://your-function-url.supabase.co/', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
    }
  });
  
  const data = await response.json();
  console.log(data.message);

};

callEdgeFunction();


• Ensure to replace 'https://your-function-url.supabase.co/' with the actual URL of your deployed function.

 

Step 5: Test the Integration

 

• Run your frontend application.
• Call the function by triggering callEdgeFunction() to verify that the response from the Edge function is displayed correctly in the console.

 

Step 6: Troubleshoot and Debug if Necessary

 

• If you encounter issues, check the network tab in your browser's developer tools for any CORS errors or issues with the request/response.
• Ensure the function URL is correct.
• Check for any syntax errors in your function code.