How to pass params in Nuxt 3 server/api?

Question

I can't figure it out how to pass params to an anonymous function in Nuxt 3.

index.vue:

<template>
  <form @submit.prevent="signUpNewsletter()">
    <input type="email" placeholder="[email protected]" v-model="userEmail">
    <input type="submit" value="Submit">
  </form>
</template>

<script setup>
const userEmail = ref('[email protected]')

function signUpNewsletter () {
  useAsyncData(
    'newsletter',
    () => $fetch('/api/sign_up_news', {
      method: 'POST', // Post method works
      body: {
        email: userEmail.value
      }
    })
  )
}
</script>

server/api/sign_up_news.js:

import { createClient } from '@supabase/supabase-js'

export default async (email) => { // can't read the parameter
  const SUPABASE_KEY = 'key123'
  const SUPABASE_URL = 'url.supabase.co'
  const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)

  const { data, error } = await supabase
    .from('newsletter')
    .insert([{ email }]) // <<< Fails!
  return data
};

working:

import { createClient } from '@supabase/supabase-js'

export default async () => {
  const SUPABASE_KEY = 'key123'
  const SUPABASE_URL = 'url.supabase.co'
  const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)

  const { data, error } = await supabase
    .from('newsletter')
    .insert([{ email: '[email protected]' }]) // <<< Works!
  return data
};

Do you know how to pass parameter into Nuxt 3 server/api? Or do you got a source? The official docs are blank at this moment.

Answer 1

Update, I just found out today that useBody is now deprecated and it is replaced with readBody.

See this issue for reference.

Answer 2

I don't think you're able to pass params directly into the functions the way you're doing.

In another part of the docs, it says that when you pass a body into the server/api function, you'll need to retrieve it using await useBody(event).

Answer 3

Use useBody

Its mention in the docs: https://v3.nuxtjs.org/guide/features/server-routes#handling-requests-with-body

you just need to read through

import { createClient } from '@supabase/supabase-js'

export default async (event) => { // can't read the parameter
  
  const body = await useBody(event)
  const SUPABASE_KEY = 'key123'
  const SUPABASE_URL = 'url.supabase.co'
  const supabase = createClient(SUPABASE_URL, SUPABASE_KEY)

  const { data, error } = await supabase
    .from('newsletter')
    .insert([{ email: body.email }]) 
  return data
};