Unable to insert into db with a server action

Unanswered

piscopancer posted this in #help-forum

2024-03-17T15:33:10.000Z

I use drizzle orm, turso driver, local.db file and next v14.
my async component is not marked with use client. It is a separate file. await db.insert is what causes the error, the app does not crash when this function is commented out

import { getUser } from '@/user'
import { db } from '@/db'
import { likesToQuestionsTable } from '@/db/schema'

export default async function Question({ props: ...}) {
  const user = await getUser()

  async function tryLeaveLike(formData: FormData) {
    'use server'
    const userId = formData.get('user-id')?.toString()
    if (!userId) return
    console.log(userId)
    âš âš âš 
    // await db.insert(likesToQuestionsTable).values({
    //   userId,
    //   questionId: question.id.toString(),
    // })
    âš âš âš 
  }

  return (
  ...
  <form action={tryLeaveLike}>
    <input hidden name='user-id' value={user?.db.id} />
    <button type='submit'>
      ...
    </button>
  </form>
  ...
  )

11 Replies

piscopancerOP

2024-03-17T15:34:01.000Z

â¨¯ Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  [function]

piscopancerOP

2024-03-17T15:48:14.000Z

for some reason it thinks that my component is a client component...

@piscopancer I use drizzle orm, turso driver, local.db file and next v14. my async component is not marked with `use client`. It is a separate file. `await db.insert` is what causes the error, the app does not crash when this function is commented out tsx import { getUser } from '@/user' import { db } from '@/db' import { likesToQuestionsTable } from '@/db/schema' export default async function Question({ props: ...}) { const user = await getUser() async function tryLeaveLike(formData: FormData) { 'use server' const userId = formData.get('user-id')?.toString() if (!userId) return console.log(userId) âš âš âš // await db.insert(likesToQuestionsTable).values({ // userId, // questionId: question.id.toString(), // }) âš âš âš } return ( ... <form action={tryLeaveLike}> <input hidden name='user-id' value={user?.db.id} /> <button type='submit'> ... </button> </form> ... )

Ray

2024-03-17T23:17:09.000Z

could you show the code in @/db also?

piscopancerOP

2024-03-17T23:19:56.000Z

@Ray no problem, when I can use my computer, I'll send the code. Also I managed to make it work by pure intuition as I moved the server function to the actions.ts file and imported it into the component instead of declaring it in the scope of the component. It is not mentioned on the docs in any form though

@piscopancer <@743561772069421169> no problem, when I can use my computer, I'll send the code. Also I managed to make it work by pure intuition as I moved the server function to the actions.ts file and imported it into the component instead of declaring it in the scope of the component. It is not mentioned on the docs in any form though

Ray

2024-03-17T23:21:20.000Z

oh yeah its better to do that instead if the action contain some external packages

piscopancerOP

2024-03-17T23:21:57.000Z

so I simply moved the function away into the module with a "use server" declaration or prefix whatever name it is supposed to have

yeah, strange.... but it works.. strange ðŸ˜•

Ray

2024-03-17T23:23:06.000Z

I had alot of issue with turso and server action before

but it got fixed