Supabase Edge function says no body was passed

Question

I'm invoking a supabase edge function with the following

    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)
        // console.log(data)

    }

In the edge function I console logged the request and it stated bodyUsed: false. Essentially the edge function acts like and believes that no value was passed. (A value is passed to the getData function properly).I've played around with the syntax a bit to no avail, am I missing something?

EDIT: Edge function is as follows

import { serve } from "https://deno.land/std@0.131.0/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", 
      // "Content-Type": "application/json",
    } },
  )
})

EDIT: I tried running it with supabase's example code and had the same issue.

Thanks for adding it. I'm assuming the `console.log(planId)` just logs `null` here? Would you be able to share some screenshots from your edge function logs? Idealy a one that contains `bodyUsed: false`. — dshukertjr, Dec 07 '22 at 05:32
Yeah, and if you scroll more, you would see the body, no? bodyUsed parameter is just whether the body has been read or not, so the body should be there regardless of the value of bodyUsed. https://developer.mozilla.org/en-US/docs/Web/API/Request/bodyUsed — dshukertjr, Dec 12 '22 at 07:18
@dshukertjr no the body doesn't exist at all. Reads null when printed. — daredevil, Dec 12 '22 at 10:07
Did you really log the body in the console? Could you try `const body = await req.json(); console.log(body)` and see what is outputted? — dshukertjr, Dec 12 '22 at 12:10
@dshukertjr tried every combination of that previously (you can see two of the attempts left in the code above) and it was always null. — daredevil, Dec 13 '22 at 06:25
I can see you console logged the `req`, but I don't see you logging the return value of `await req.json()`. You are sending an object `{plan_data}`, but you are trying to take out the `planId` key, which does not exist in the request you're sending from the client. That is why I want you to console log the entire body. Could you try `const body = await req.json(); console.log(body)` and see what happens? — dshukertjr, Dec 13 '22 at 07:18
@dshukertjr I believe I tried that earlier but did so again just in case, still returns null. — daredevil, Dec 13 '22 at 08:14
I'm having the same issue, as well. None of the answers below worked. For some reason, it appears that I can't access the request body, or that it doesn't exist. Trying to use Supabase functions as a webhook endpoint, and need to access the request body... — paddyB, Apr 14 '23 at 23:37
Having the same issue as well, despite following supabase docs. Has anybody found a workaround for this? — srh, Jul 18 '23 at 04:10

score 1 · Answer 1 · answered Jan 15 '23 at 16:13

Seeing how this was a CORS error, I ended up allowing all headers in the preflight check response CORS headers.

I.e.

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

score 0 · Answer 2 · answered Dec 06 '22 at 05:03

0

Does adding the content type header work?

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",
  {
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      plan_data
    }),
  });
  console.log(data, error)
}

answered Dec 06 '22 at 05:03

ceckenrode

4,543
7
28
48

unfortunately not – daredevil Dec 06 '22 at 05:21

score 0 · Answer 3 · answered Dec 13 '22 at 09:01

Supabase SDK will take care of json encoding, so you don't need to do it by yourself.

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

You should be able to get the data on your Edge Function like this:

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

score 0 · Answer 4 · answered Jul 24 '23 at 21:19

After several days of having this same problem, and failing to get anywhere, here's what fixed it for me:

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

Key part was wrapping whatever was in body with JSON.stringify(). Which you did, so maybe try this:

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

then see if you can access the id in the edge function with:

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

Supabase Edge function says no body was passed

4 Answers4