error with the supabase module in server side
Hello π
Since a few days, I'm learning to create a backend with nuxt (nitro).
I use supabase to store my data.
To train myself I've created a to-do list application with a few apis like addToDo, removeToDo ...
But I have a typescript error in two of my apis.
The one to add a task and the one to switch its value (true false).
here the code of the complete.post.ts :
import { serverSupabaseUser, serverSupabaseClient } from '#supabase/server'
export default defineEventHandler(async (event) => {
const user : any = await serverSupabaseUser(event)
if (!user) {
throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
}
const client = await serverSupabaseClient(event)
const body = await readBody(event)
const id = body.id
const completed = Boolean(body.done)
console.log(user.id);
const { data } = await client.from('tasks').update({ done: completed }).eq('id', id).select()
return data
})
And the error :
error : Argument of type '{ done: boolean; }' is not assignable to parameter of type 'never'.ts(2345
I hope you'll help me.
Thanks in advance π€8 Replies
if the column is Supabase is a boolean it only takes true or false. If you need more than that you can create an Enum with the values you want
My column in Supabase is a boolean.
Why it's doesn't works ?
can you console.log the object and post it here?
When I console the body, I get my userId. And if I console.log the event object, I don't see any of my arguments.
In my front part I call my api like this :
const test = async () => {
await $fetch('/api/complete', {
method: 'POST',
body: {
id: 0,
done: true
}
})
}
Can you help me @isakwang ?Sorry. Discord notifications is kinda flaky
Can you post the actual output?
My suggestion would be something like this
import { serverSupabaseClient } from '#supabase/server'
import type { Database } from '~/types/database'
export default defineEventHandler(async (event) => {
const supabase = await serverSupabaseClient<Database>(event)
const id = event.context.params.id || null
const { completed } = getQuery(event)
const user = await supabase.auth.getUser()
if(!user) {
throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
}
if(!id) {
throw createError({ statusCode: 400, statusMessage: 'No id provided' })
}
let query = supabase.from('tasks').update({ done: completed }).eq('id', id).select().single()
const { data, error } = await query
if(error) {
throw createError({ statusCode: 400, statusMessage: error.message })
}
return { data, error }
})
And something like this on the frontend
const pending = ref(false)
const { data, error, refresh } = await useFetch(/api/tasks,{
method: 'GET',
})
const updateStatus = async (status: string, id: number) => {
pending.value = true
const { data, error } = await $fetch(/api/tasks/${id}, {
method: 'PATCH',
query: {
completed: status
},
})
if(error) {
throw createError({ statusCode: 400, statusMessage: error.message })
}
pending.value = false
refresh()
}
Api name is [id].patch.ts
Both in path /api/tasks
using [id].Method is my preferred method because it gives you more info within the explorerThanks.π Your message helped me.
this is my final code
import { serverSupabaseUser, serverSupabaseClient } from '#supabase/server'
import { Database } from '../types/database'
export default defineEventHandler(async (event) => {
const user : any = await serverSupabaseUser(event)
if (!user) {
throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
}
const client = await serverSupabaseClient<Database>(event)
const body = await readBody(event)
console.log(body)
const id = body.id
const completed = body.done
if (typeof completed !== 'boolean') {
throw createError({ statusCode: 400, statusMessage: 'Invalid request' })
}
console.log(typeof completed)
const { data } = await client.from('tasks').update({done : completed}).eq('id', id).select()
return data
})
To get the Database file I generate it from supabase cli with this command npx supabase gen types typescript --project-id <your-project-id> and I copy/paste it.
Thank you againπSupabase advises against using the serverSupabaseUser. Client.auth.getUser() is prefered
Other than that itβs all preference so you do you