How to add a record to a database using Qwik and Prisma?

Question

1. You have to define a loader in the index.tsx file, outside of the component and export it:

export const useAddProduct = routeLoader$(async () => {
return await prisma.products.create({ 
    data: {
      name: 'Steel Table',
      description: 'A steel table added to DB'
    }
})

2. You call this loader from inside your component:

const handleSubmit = $(() => {useAddProduct()}) 

My problem is how to tell the loader about the data object, since no parameters are accepted? When fetching by id I could use params:

export const useProductById = routeLoader$(async ({ params }) => {
  if (params.id) {
    const id = parseInt(params.id)
    return await prisma.products.findUnique({ 
      where: { id }
    })
  }
  return []  
});

Are there similar contexts apart from { url, method, params } I should know of?

Every hint in the right direction is greatly appreciated!

Answer 1

In qwikcity if you want to submit form data and mutate any data on the server you have two options:-

• routeAction$ or globalAction$
• server$

routeAction$ is scoped in a route and globalAction$ is globally available. If you are doing same form handling from different different route then go for globalAction$.

export const useAddProduct = routeAction$(
  async (data, { redirect }) => {
    await prisma.products.create({
      data,
    });

    throw redirect(STATUS_CODE,URL)
  },
  
  zod$({
    name: z.string(),
    description: z.string(),
  })
);

zod$ and z are imported from @builder.io/qwik-city. after submit your data call redirect so that your active route loader will call and new data will display.

Next you can handle form action

const addProductAction= useAddProduct();

<Form action={addProductAction}>
    <div>
       <label for="name">Name</label>
       <input type="text" name="name" id="name" />
    </div>

     <div>
       <label for="description">Description</label>
       <input type="text" name="description" id="description" />
    </div>

    <button type="submit">Submit</button>

</Form>

server$ is another option to run code on the server

const addProduct = server$((name: string, description: string) => {
  return await prisma.products.create({
    data: {
      name,
      description,
    },
  });
});

and then call addProduct and pass name , description just like a normal function call with parameters

        <button
          onClick$={async () => {
            const product = await addProduct(
              name, // from signal
              description // from signal
            );
             console.log(product)
          }} 
        >
          Create
        </button>

Answer 2

In my static Qwik app, I use a function

export const addCustomer = server$(async (data) => {... 

to perform some task in my MongoDB when click in a Btn

<button onClick$={async () => {const resume = await addCustomer(customerRecord); ...}

, and everything works fine in development environment. So I pushed changes to production in Vercel host. Then when I send the information again it Fails giving me this error in browser console.

Uncaught (in promise) DOMException: The operation is insecure.

HELP!