TTC
Theo's Typesafe Cultredtortellini

Drizzle client side vs server side?

hi can someone help explain to me a bit about drizzle? as far as i can tell, its doing client side api calls and requires me to use NEXT_PUBLIC env variables which isnt secure right? is it possible to put my drizzle calls into server and therefore not need to expose the env variable to browser?
B
barry•336d ago
You don’t use it on the client?
R
redtortellini•336d ago
ideally i would like it to be on the server, but when using the db connection with envinronment variables, it only works when using NEXT_PUBLIC in front of the env variables, thus exposing it to browser and allowing the call to go through. i have tried to run it on the server by using "use server" or placing it in the server folder but it still wont pick up the env variables. in all the documentation it all seems like drizzle runs server side and not once does it mention needing to do next_public so im confused on where i went wrong. i already wiped my changes and tried to follow the startup guide on drizzle github again and its the same outcome. my db calls are only being called client side
B
barry•336d ago
No clue without seeing where you fucked up
R
redtortellini•336d ago
it jsut occured to me after all this time that im using planetscale mysql which is stated as "worlds most advanced serverless mysql platform". this sounds like it may be an issue. i wasnt exactly sure if i could connect thru a different means so i will try mysql2 and see
B
barry•336d ago
That’s not a problem … Just use documentation
B
barry•336d ago
R
redtortellini•336d ago
i tried once again to use it but even just this single page contains my issue. the connection that grabs the env variables just cant see the env variables unless i make them public or hard code them. the folder its in is currently here
R
redtortellini•336d ago
R
redtortellini•336d ago
i tried to even take some inspiration from other people who created example applications for this, but all seem to never run into this issue with env variables does "getServerSideProps()" fix anything in this case?
H
hutajoullach•336d ago
@Turtle Are you using T3 app and trying to access env var on server side? You usually can not access env var on server side, but with T3, you can. Check out Theo's chirp video around 5:40. You need to define it in env.mjs.
R
redtortellini•336d ago
i did include it in env.mjs but i tried to add in the server section but still didnt work. the environment variables can load server side/client side seperately and without problem. i just dont know if the way/place im calling this db connection that grabs the env variables is why it is unable to see the server side variables
R
redtortellini•336d ago
it feels like im calling this db connection client side, but according to documentation and intent, i was trying to get it to run server side
H
hutajoullach•336d ago
looks like you are accessing env var by calling "process.env.DATABASE_USERNAME", but shouldn't you be calling "env.DATABASE_URL" with import from "import { env } from "~/env.mjs""?
R
redtortellini•336d ago
interesting. i didnt notice that. however by trying this gives me this error
R
redtortellini•336d ago
which i guess supports the idea that im calling these variables in the wrong area as before, the schema that contains the env variables is in src/server/db/schema.ts i uploaded a pic of it earlier in this thread, am i allowed to declare the db item, schema, and export the function all in that 1 file? does it flag it as client side for any reason? i even tried to take the db connection into its own file and export that but even just this file is giving same error for trying to access the env variables. will add a pic of the whole file
R
redtortellini•336d ago
H
hutajoullach•336d ago
I've never used "drizzle orm" before, so not sure what could be the issue, but it's possible that drizzle orm is available on node.js server, however it does not support next.js server folder.
R
redtortellini•336d ago
the more i look into it, the more im realizing this is a problem with my project. im using next 13.2.1. something im noticing is that it feels like everything is client side. using the chirp app that Theo made as an example, mine similarly does not call "use client" on any of the components, which is making me think that i should try to declare this db connection as a server component but idk how. the only thing that comes up is how next defaults to server and only views it as client when saying "use client", but this isnt my case. is it something with next 13.2.1? im not using app dir so im considering going to next 12. is that a reasonable idea?
H
hutajoullach•336d ago
with next 13, everything is considered to be server side component unless you add "use client". If you are using next 13, I think you could consider using next.js 13, server actions instead. I found this repo, so I think you could give it a try? Using next 12 might be a good idea, but I feel like you are getting this error because you are accessing env var using "env.DATABASE_URL" rather than "process.env.DATABASE_USERNAME", so drizzle orm is thinking the file in on client side. But then again, I never used drizzle orm before, so I can not give you a clear answer in this case... https://github.com/raymondkneipp/next-todo-app with node.js server, you use "process.env.DATABASE_URL" with import of "require('dotenv').config()" and access env var. but I'm not sure if using next.js 13, server actions and accessing env var with "process.env.DATABASE_URL" will throw an error or not.
R
redtortellini•336d ago
gave it a shot and it did not result in any changes. i enabled server actions, declared "use server" in the file and it still claimed i was trying to get server side env variables in client, which also didnt work when i switched back to process.env. when using prisma, it was for sure using server side calls, but other than that, i cant get server side to work anywhere in my project. i tried changing to 13.1 and 13.4 as well. theres gotta be something im missing btu ive been stuck on this for multiple days and i find it hard to believe im the only one with an issue like this but cant find anything else about it online
H
hutajoullach•336d ago
check this out. this is a demo that was created by vercel using next.js and drizzle. schema file is located under lib, but i think it can be at the top directory. i too feel weird that the schema file is located at the top dir instead of server folder. TypeORM is my favorite orm by the way. In Theo's tut video, prisma schema is also at the top directory, so try moving the schema file outside of server folder and use "process.env" to access env var instead. first of all, try cloning their repo and run it locally to see if you can implement it there and apply it to your production build if it works. https://vercel.com/new/templates/next.js/postgres-drizzle https://github.com/vercel/examples/blob/main/storage/postgres-drizzle/lib/drizzle.ts with next.js, env vars are not accessible by the client. it should be loaded into node.js environment, so no need to worry about client accessing them. if you want to expose environment variables to the client with next.js, you need to use "publicRuntimeConfig" inside next.config.js file.
Want results from more Discord servers?
Add your server
More Posts
t3-turbo + next-i18n + tRPC doesn't work on Vercel only locallyHi. I tried to implement server side localisation in tRPC according to this article https://levelupAnyone have an exampe of two nextjs applications in a single repo?Basically I want to have a website for the customer facing site and another for the admin portal to Recommendations for validation library?in t3 docs under other recommendations section, there is no validation library there https://createsuperplanet conection fails in production modeI need help with next auth / planetscale connection. my app works fine in localhost but does not conQuestion about next auth.Hey all, The stack and full stack development in javascript in general is new for me. I finding my Why does `npm create t3-app@latest` use the /pages directory. How can I use the app router?I want to build an application which uses the latest nextjs app router, however the `create t3-app@lnextjs13 do get request with searchbarHi, I am currently building a nextjs 13 project, trying to get in touch with the app router and servHow to sent a mutation procedure from the clientupdateUserStats:protectedProcedure .input(z.object({ id:z.string().nonempty(), pServer Actions high level questions (scale, request library, exposing to other clients)**1) how are you supposed to scale a backend if your business logic is in react components?** if thiupload thing jesthow to i set up testing with jest on components that include uploadthing? [2:40 PM] seems like it keNextJS and Bare MetalWhat all features would break/may not work if I decide to deploy to NEXTjs to bare metal instead of Cloud storage solutions for collaborating on local filesI want to collaborate on .md files (via Obsidian. for developer documentaion) and video recordings wcold startsI’m having an issue with my first queries after the db going idle taking about 11s to 12s which is cAndroid emulator cannot connect to my Expo without tunnelHello, I am building an app with `create-t3-turbo` in windows 11. I keep getting the error connectis this middleware is good for longterm?hello guys, in these code snippet i want to check if user is subs and valid, but i im wondering if tBidrectional Infinite Scrolling ImplementationHi guys have you ever implemented something like this in a chat application? or any application for Is it possible to generate a github action to build a preview of a pull request in nextjs?Im looking for a way to generate preview for my nextjs project but I didnt find a way to do it that File Uploads to Local StorageI'm building a website for my brother's shop. They want an admin panel where they can add new producChange ctx.session.user values to include new ones? Bad idea?Right now when using `ctx.session.user` I get a few default options that come with t3-app. `.id`, `Next13 app-router: How to get request headers on client page comp?All my pages are client components because I want to use page transitions and need to wrap them in a