#PRISMA SUPABASE FORM ISSUE

12 messages · Page 1 of 1 (latest)

upbeat panther Mar 25, 2023, 6:40 PM

I started using prisma.

I'm using supabase for the backend using postgresql

Heres my file.

contact.jsx

import Head from "next/head";
import { useEffect, useRef } from "react";
import styles from "../styles/contact.module.css";
// import prisma from "../lib/prismaClient";

const Contact = () => {
  const nameRef = useRef(null);
  const emailRef = useRef(null);
  const messageRef = useRef(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (
      !nameRef.current?.value ||
      !emailRef.current?.value ||
      !messageRef.current?.value
    )
      return;
    const name = nameRef.current?.value;
    const email = emailRef.current?.value;
    const message = messageRef.current?.value;

    try {
      const response = await fetch("/api/submitForm", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ name, email, message }),
      });

      if (response.ok) {
        // clear form input
        nameRef.current.value = "";
        emailRef.current.value = "";
        messageRef.current.value = "";
      }
    } catch (error) {
      console.error("Error sending contact:" + error);
    }
  };

  // useEffect(() => {
  //   return () => {
  //     prisma.$disconnect();
  //   };
  // }, []);

  return (
    <>
      <Head>
        <title>contact form</title>
        <meta name="description" content="aftertheflood contact form" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.container}>
        <form onSubmit={handleSubmit} className="grid w-full max-w-sm gap-2">
          <input
            type="text"
            placeholder="Name"
            ref={nameRef}
            className="rounded border-2 border-black bg-black p-2 outline-none transition duration-300 ease-in-out focus:border-white"
            required
          />
          <input
            type="text"
            placeholder="Email"
            ref={emailRef}
            className="rounded border-2 border-black bg-black p-2 outline-none transition duration-300 ease-in-out focus:border-white"
            required
            pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
          />
          <textarea
            type="text"
            placeholder="Message"
            ref={messageRef}
            className="rounded border-2 border-black bg-black p-2 outline-none transition duration-300 ease-in-out focus:border-white"
            required
          />
          <button type="submit" className={styles.button}>
            Submit
          </button>
        </form>
      </main>
    </>
  );
};

export default Contact;

submitForm.js file

import prisma from "../../lib/prismaClient";

export default async function handler(req, res) {
  if (req.method === "POST") {
    const { name, email, message } = req.body;

    try {
      const contact = await prisma.contact.create({
        data: {
          name,
          email,
          message,
        },
      });
      res.status(200).json(contact);
    } catch (error) {
      console.error("Error creating contact:", error);
      res.status(500).json({ error: error.message });
    }
  }
}

prismaClient.js file

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient({
  datasources: {
    db: {
      url: process.env.DATABASE_URL,
    },
  },
});
export default prisma;

and schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = "postgresql://postgres:[PASSWORD]@[DOMAIN]:5432/postgres"
}

model Contact {
  id        String   @id @default(uuid())
  name      String
  email     String
  message   String
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

folder structure.

this is the error

from my server side. i get this

Error creating contact: PrismaClientInitializationError: 
Invalid `prisma.contact.create()` invocation:


error: Error validating datasource `db`: the URL must start with the protocol `postgresql://` or `postgres://`.
  -->  schema.prisma:7
   | 
 6 |   provider = "postgresql"
 7 |   url      = "postgresql://postgres[PASSWORD]@[DOMAIN]:5432/postgres"

I need help.

naive verge Mar 26, 2023, 8:26 AM

upbeat panther prismaClient.js file ```js import { PrismaClient } from "@prisma/client"; const...

The error itself is simple:

const prisma = new PrismaClient({
  datasources: {
    db: {
      url: process.env.DATABASE_URL,
    },
  },
});

The error is telling you that here, the URL you are providing, does not start with postgresql://

Have you done a console.log(process.env.DATABASE_URL); to see if it is what you expect it to be?