Troubleshooting Connection String Error in Page Context for SQL Query Execution

[bold moat]

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)

[noble oxide]

I have a SQL query that works perfectly in routes, but encounters an issue when used on a page. The query is as follows:

const sqlResponse = await sql` SELECT * FROM Profiles WHERE ProfileID = ${params.profile}; `;

This is executed in an environment defined by .env.development.local. However, when I try to use this SQL query in a page, I encounter an error stating: 'Error fetching data: VercelPostgresError - 'missing_connection_string': You did not supply a 'connectionString' and no 'POSTGRES_URL' env var was found.

[young maple]

do you see .env.development.local being loaded when the dev server started?

[noble oxide]

yep

it works pefectly fine when using routes

but somehow not in pages

[young maple]

try console.log(process.env.POSTGRES_URL) on the page

[noble oxide]

"undefined"

[young maple]

how about console.log(process.env.POSTGRES_URL) on the route

[noble oxide]

i only have these

ok so i copied this and pasted it

still its "undefined"

[young maple]

hmm how does it work if its undefined

[noble oxide]

no idea it works in routes tho

just not in pages

[young maple]

are you on dev mode?

[noble oxide]

yep

[young maple]

where do you import sql from

[noble oxide]

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

[young maple]

try rename .env.development.local to .env

[noble oxide]

still same

[young maple]

could you show a screenshot of your folder structure

[noble oxide]

sorry for the delay

[young maple]

you had 2 env file?

[noble oxide]

yea

removing it changes nothing tho

[young maple]

could you show a screenshot of the console after you start the dev server

[noble oxide]

(after removing the other .env)

[young maple]

try console.log(process.env) on the page

[noble oxide]

it did work

[young maple]

you had .env.development.local and .env before?

[noble oxide]

yea

[young maple]

and which on did you put POSTGRES_URL?

[noble oxide]

.env

well before .env.development..

but then u said .env

[young maple]

try moving it to .env.development.local

if NODE_ENV is development and you define a variable in both .env.development.local and .env, the value in .env.development.local will be used.

[noble oxide]

same error

[young maple]

which one is loaded?

restart the server

[young maple]

you only have .env.development.local now?

[noble oxide]

yes

same error still

[young maple]

lol

i don't know

just use .env then lol

[noble oxide]

same error

[young maple]

.env doesn't work too now?

[noble oxide]

nope

this is so weord

[young maple]

restart the server

[noble oxide]

i did

[young maple]

did it load from .env now

[noble oxide]

yea but same error

is it because of "use client"

[young maple]

oh you using it on client component?

[noble oxide]

yea

[young maple]

you can't use it in client component

[noble oxide]

hm

how i should use it then? without using routes

[young maple]

use it in server component

without 'use client'

[noble oxide]

like this?

[young maple]

what are you gonna do with this function?

yes if you gonna use this with server action

[noble oxide]

so im doing a free portfolio service i just want to get data from the profile

and display it on the site

without using any api

[young maple]

you don't need 'use server' for that

everything are server by default

unless you mark it to client

[noble oxide]

didnt work

when i dont put "use server"

same error comes back

[young maple]

you should remove 'use client'

[noble oxide]

well it works they way im using it

so all good

works perfectly fine

[young maple]

when mean you are fetching with server action

on client side

all good if this is what you want

[noble oxide]

yea

i just want the data to be leaked

[young maple]

ok cool

[noble oxide]

like the proflile contains secretKey

thats what shouldnt be public

[young maple]

no, your key not gonna leak

but seo engine will not be able to crawl your site

[noble oxide]

thats totally fine

thanks bro

[young maple]

ok no prob

[bold moat]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1201905761618231337 message)

[noble oxide]

@young maple

It shows in the network still

[young maple]

the query result?

[noble oxide]

yea

[young maple]

it is expected

[noble oxide]

not possible to hide?

[young maple]

what you gonna do with this data

fetch on server

[noble oxide]

display it

nothing else

[young maple]

why would you wanna hide it if you gonna display it?

it will show on the dom anyway?

[noble oxide]

bcs some of the columns shouldnt not gonna be displayed

only some parts

[young maple]

then don't use select *

only select the column you need

[noble oxide]

not possible any other way?

[young maple]

fetch on server

[noble oxide]

wdym

[young maple]

no other way

don't fetch on client

[young maple]

as I said earily

[noble oxide]

well i fetch it on "use server" and just pass the data to the client

[young maple]

no

you are fetching on client side

with server action

[noble oxide]

how i should do it? can you give me an example

[young maple]

fetch in server component

remove 'use client'

[noble oxide]

ahh this is so bad

[young maple]

https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#fetching-data-on-the-server-with-fetch

[young maple]

what is it bad?

[noble oxide]

i dont get it how i should split the files with "use xxx"

its weird asf

[young maple]

you don't even need 'use client' useState setData useEffect if you fetch on server

[young maple]

actually, you don't even need 'use server' there

[noble oxide]

i use useEffect to add views to the user

[young maple]

much simple

[noble oxide]

and loading screen