Environment variables pass on backend but fail on client?
I don't know what's going on here. The client says there's an error in the server.mjs file: ❌ Invalid environment variables. But it passes the safeParse serverside? WTF is happening here
It's like it passes on the backend but when it gets to the front end it doesn't anymore. I'm not sure what's going on here!
I attached my env keys, my schema.mjs file, the console.log result happening in server.mjs and the error I get on the client.
3 Replies
FIXED. Was trying to call prisma from client but needed to do it in server.
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
I just seen this, did you fix it?
I was a beginner and tried to call prisma in my client side component eg. _app.tsx
You can only call prisma in a server component because the server communicates with the database (the database is prisma), not the client.
If you called prisma in the client, a user would have access to see everything in the database, we dont want want that. We want to call prisma on the server, get the information we need, then deliver that information from the server to the client.
that's what TRPC is for. You can call trpc on your client, then trpc runs the function you made on the server (this would be like the example router), within this server function you would call prisma, prisma will give you what you requested, then you would return the result in the trpc function to the client, which is the
const { data } = trpc.example.useQuery()
I would also recommend you learn the basics of react query so you know what's going on with useQuery and useMutation
Hope this helps!