The notification from Supabase Edge function indicates that it received no input body

Question

The notification from Supabase Edge function indicates that it received no input body

Currently, I am calling a supabase edge function using the code snippet below:

async function getData(plan_data){
    console.log(plan_data)
    console.log(JSON.stringify({plan_data}))
    const { data, error } = await supabase.functions.invoke("create-stripe-checkout",
    {
        body: JSON.stringify({
            plan_data
        }),
    }
    )
    console.log(data, error)

}

Upon inspecting the edge function, I noticed that the request logged "bodyUsed: false", indicating that the edge function believes no value was passed (even though one was passed to the getData function correctly). I have tried tweaking the syntax without success. Is there something I may be overlooking?

EDIT: The edge function code is as follows:

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

serve(async (req) => {
  if (req.method === "OPTIONS"){
    return new Response (null, {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "apikey, X-Client-Info, Authorization, content-type", 
      }
    })
  }
  console.log(req)
  const { planId } = await req.json()
  console.log(planId)
  return new Response(
    JSON.stringify({ planId }),
    { headers: { 
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "apikey, X-Client-Info, Authorization, content-type", 
    } },
  )
})

https://i.sstatic.net/X5ENx.png

EDIT: I also tested it with supabase's sample code and encountered the same issue.

javascript typescript supabase edge-function

Answer 1

Answer №1

Supabase SDK handles the json encoding for you, eliminating the need to do it manually.

async function fetchData(plan_data){
        const { data, error } = await supabase.functions.invoke("create-stripe-checkout",
          {
             body: { plan_data },
          }
        )
        console.log(data, error)
      }

To retrieve the data in your Edge Function, follow this pattern:

const { plan_data } = await req.json()
console.log(plan_data)

Answer 2

Supabase SDK handles the json encoding for you, eliminating the need to do it manually.

async function fetchData(plan_data){
        const { data, error } = await supabase.functions.invoke("create-stripe-checkout",
          {
             body: { plan_data },
          }
        )
        console.log(data, error)
      }

To retrieve the data in your Edge Function, follow this pattern:

const { plan_data } = await req.json()
console.log(plan_data)

Answer 3

Answer №2

After encountering a CORS error, I decided to address it by adjusting the headers in the preflight check response for CORS.

For example:

...
if (req.method === "OPTIONS"){
    return new Response(null, {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "*", // Updated this line
      }
    })
  }
...

Answer 4

After encountering a CORS error, I decided to address it by adjusting the headers in the preflight check response for CORS.

For example:

...
if (req.method === "OPTIONS"){
    return new Response(null, {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "*", // Updated this line
      }
    })
  }
...

Answer 5

Answer №3

Is it effective to include the content type header?

async function fetchData(plan) {
  console.log(plan)
  console.log(JSON.stringify({ plan }))
  const { result, failure } = await supabase.functions.invoke("create-stripe-item",
  {
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      plan
    }),
  });
  console.log(result, failure)
}

Answer 6

Is it effective to include the content type header?

async function fetchData(plan) {
  console.log(plan)
  console.log(JSON.stringify({ plan }))
  const { result, failure } = await supabase.functions.invoke("create-stripe-item",
  {
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      plan
    }),
  });
  console.log(result, failure)
}

Answer 7

Answer №4

Finally, after struggling with the same issue for days without any progress, I discovered a solution that worked for me:

const { error } = await supabase.functions.invoke("deleteUser", {
        body: JSON.stringify({
          id: selUser.id,
        }),
      });

The crucial step was to wrap the content of the body in JSON.stringify(). Since you have already done this, perhaps you could attempt the following approach:

const { error } = await supabase.functions.invoke("create-stripe-checkout", {
        body: JSON.stringify({
          id: plan_data.planId,
        }),
      });

Then, try to retrieve the id within the edge function using the following code snippet:

const { id } = await req.json();

Answer 8

Finally, after struggling with the same issue for days without any progress, I discovered a solution that worked for me:

const { error } = await supabase.functions.invoke("deleteUser", {
        body: JSON.stringify({
          id: selUser.id,
        }),
      });

The crucial step was to wrap the content of the body in JSON.stringify(). Since you have already done this, perhaps you could attempt the following approach:

const { error } = await supabase.functions.invoke("create-stripe-checkout", {
        body: JSON.stringify({
          id: plan_data.planId,
        }),
      });

Then, try to retrieve the id within the edge function using the following code snippet:

const { id } = await req.json();

The notification from Supabase Edge function indicates that it received no input body

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The retrieval of JSON file using $.GetJson() is unsuccessful from local directory

Accessing the Parent Method in ReactJS Components

The issue of basic authentication failing to function on Internet Explorer and Chrome, yet operating successfully on Firefox

I'm looking for a way to check and validate three input fields for date, month, and year individually using either jQuery or JavaScript. Can anyone

Can I send a DELETE request with request body and headers using Axios?

When the browser is not in the foreground, clicking on the Bootstrap datepicker with Selenium does not register

jQuery scrolling table

Tips for sharing data externally using a Typescript Vue component

A Guide to Retrieving Parameters and Request Body using Express and Typescript

Is it possible for me to modify or add a file within the directory of my HTML file?

What method can be used to keep Chromium open while using Puppeteer?

Issue with undefined object reference in Moment.js when making an ajax request

Identify and monitor changes in every element within an array using Typescript/Angular 2

Exploring the Method of Accessing data-* Attributes in Vue.js

Effect of Active or Focus on the HTML <ul> element

Utilizing NodeJS to generate a payment intent through Stripe

Synchronizing subscriptions

Determine whether a WebElement contains a particular content within the :after pseudo class

React.js error: Uncaught TypeError: Cannot read property 'map' of null

Employing jQuery to redirect to a different URL when a button is clicked