Connecting to Postgresql database

[mint vigil]

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

[long trout]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

      🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in <id:customize>

      ✅ You can mark a message as the answer for your post with `Right click -> Apps -> Mark Solution`
      (if you don't see the option, try refreshing Discord with Ctrl + R)

[static creek]

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

[mint vigil]

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

[static creek]

head over to Vercel dashboard, check Runtime log. you should see some error messages

[mint vigil]

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

[static creek]

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>
  );
}

[mint vigil]

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

[static creek]

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;

[mint vigil]

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

[mint vigil]

the alternative to calling db from web browser is with an api?

[static creek]

in fact, this is a Next.js community so you might want to try Next.js so folks would take care of you.

[mint vigil]

i assumed that since next was built ontop of react that everything would be applicable

but i guess idk what im talking about hahaha