Next.js Discord

Discord Forum

Connecting to Postgresql database

Unanswered
Harris's Sparrow posted this in #help-forum
Open in Discord
Harris's SparrowOP
I'm trying to connect my postgresql database to my vercel project but its not working, I'm following the code in the quickstart documentation,can someone help me please

Basically, Its not detecting a connection string but sql should automatically take environment variables from vercel right?

https://stackoverflow.com/questions/76477007/how-to-connect-react-to-postgres-on-vercel

22 Replies

tafutada777
as for Vercel production, you need to associate a project with a DB. for local machine, you need to define variables in .env.development.local
Harris's SparrowOP
I'm fairly certain that i have linked my database to my project, i can query the database inside vercel database tab, i can see my environment variables
tafutada777
head over to Vercel dashboard, check Runtime log. you should see some error messages
Harris's SparrowOP
nothing appears in the runtime log, but the error message shows up on the console
thanks for taking the time to help tafutada, i really don't know whats going wrong
tafutada777
are u following this official tutorial?
https://vercel.com/docs/storage/vercel-postgres/quickstart
import { sql } from "@vercel/postgres";

export default async function Cart({
  params
} : {
  params: { user: string }
}): Promise<JSX.Element> {
  const { rows } = await sql`SELECT * from CARTS where user_id=${params.user}`;

  return (
    <div>
      {rows.map((row) => (
        <div key={row.id}>
          {row.id} - {row.quantity}
        </div>
      ))}
    </div>
  );
}
Harris's SparrowOP
im using plain javascript and react, is ur code using nextjs or typecript or something?
I've simplified my code to try to isolate the problem

import { sql } from "@vercel/postgres";

function App() {
    async function handler() {
        await sql`INSERT INTO testtable VALUES(10,10)`;
    }
    handler();
    return <>Hello</>;
}
export default App;
it is still returning the same problem where i see the error in the console but not the runtime logs
im using create-react-app
tafutada777
actually you made things complicated. Is it the first time to work on React?
this might work. (but you should not call DB from web browser due to security and performance risk)

import { useEffect } from "react";
import { sql } from "@vercel/postgres";

function App() {
  useEffect(() => {
    async function handler() {
      await sql`INSERT INTO testtable VALUES(10,10)`;
    }
    handler();
  }, []);

  return <>Hello</>;
}

export default App;
Harris's SparrowOP
im still recieving the missing connection string message in console 😭
i've just started this project should i move to typescript/nextjs or something?
do you know what is causing the problem?
seems like the vercel/postgres module does not work with javascript or react or something
Harris's SparrowOP
the alternative to calling db from web browser is with an api?
tafutada777
in fact, this is a Next.js community so you might want to try Next.js so folks would take care of you.
Harris's SparrowOP
i assumed that since next was built ontop of react that everything would be applicable
but i guess idk what im talking about hahaha
Sun bear
Hello, I am also getting this error! I've tried every troubleshooting but still getting it:(
i am using next.js btw