hutajoullach
hutajoullach
PostsComments
TTCTheo's Typesafe Cult
Created by kshitijmohan15 on 6/2/2023 in #questions
the URL must start with the protocol `mongo`
if you are deploying next.js app on vercel, you need env variables on vercel. it's under the settings tab and Environment Variables on the left.
13 replies
TTCTheo's Typesafe Cult
Created by kshitijmohan15 on 6/2/2023 in #questions
the URL must start with the protocol `mongo`
is your DATABASE_URL named as "DATABASE_URL" on vercel side as well? it sounds like a typo or importing issue though.
13 replies
TTCTheo's Typesafe Cult
Created by kshitijmohan15 on 6/2/2023 in #questions
the URL must start with the protocol `mongo`
hmm, never encountered that issue before...
13 replies
TTCTheo's Typesafe Cult
Created by kshitijmohan15 on 6/2/2023 in #questions
the URL must start with the protocol `mongo`
env variable was not imported correctly.
13 replies
TTCTheo's Typesafe Cult
Created by kshitijmohan15 on 6/2/2023 in #questions
the URL must start with the protocol `mongo`
yes, variable name must match the ones inside .env file.
13 replies
TTCTheo's Typesafe Cult
Created by kshitijmohan15 on 6/2/2023 in #questions
the URL must start with the protocol `mongo`
in your .env file, does your DATABASE_URL start with "mongodb://" or "mongodb+srv:/"?
13 replies
TTCTheo's Typesafe Cult
Created by Yosif Stalin Gaming on 6/1/2023 in #questions
How to sent a mutation procedure from the client
on client side, you have access to mutate from useMutation, so you can mutate it in your submit func. you can clear useState or do other stuff inside onSuccess, onError as well. const { mutate, isLoading } = api.user.updateUserStats.useMutation({ onSuccess: () => { do something }, onError: () => { do something }, }); const onSubmit = () => { mutate({ calories: cals + formData.calories, protein: rawUserStats.protein + formData.protein, carbs: rawUserStats.carbs + formData.carbs, fats: rawUserStats.fat + formData.fat }) }
11 replies
TTCTheo's Typesafe Cult
Created by redtortellini on 6/1/2023 in #questions
Drizzle client side vs server side?
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.
28 replies
TTCTheo's Typesafe Cult
Created by redtortellini on 6/1/2023 in #questions
Drizzle client side vs server side?
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
28 replies
TTCTheo's Typesafe Cult
Created by thevalorised on 5/31/2023 in #questions
File Uploads to Local Storage
and if you store files in a server folder the bundle size of your app gets bigger as your user stores more files and that is not something you want.
7 replies
TTCTheo's Typesafe Cult
Created by thevalorised on 5/31/2023 in #questions
File Uploads to Local Storage
@The Valorised uploadthing should be uploading files to cloud server, and it looks like it's free for now, it can not be free forever as cloud storage gets bigger and bigger. In your case, you can tell your brother to upload images or any files to Google Drive, and then get the url to that file, he can then copy & paste that Google Drive link to the input field in your app. Your app stores that url as a string in your db. This will be free and no need to worry about whether uploadthing free tier will end sometime in the future or not.
7 replies
TTCTheo's Typesafe Cult
Created by redtortellini on 6/1/2023 in #questions
Drizzle client side vs server side?
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.
28 replies
TTCTheo's Typesafe Cult
Created by redtortellini on 6/1/2023 in #questions
Drizzle client side vs server side?
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
28 replies
TTCTheo's Typesafe Cult
Created by redtortellini on 6/1/2023 in #questions
Drizzle client side vs server side?
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.
28 replies
TTCTheo's Typesafe Cult
Created by redtortellini on 6/1/2023 in #questions
Drizzle client side vs server side?
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""?
28 replies
TTCTheo's Typesafe Cult
Created by redtortellini on 6/1/2023 in #questions
Drizzle client side vs server side?
@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.
28 replies
TTCTheo's Typesafe Cult
Created by Helge on 5/31/2023 in #questions
Next13 app-router: How to get request headers on client page comp?
I'm using npm package to access the user's ip address in the req headers in this api route, and then attaching to response. If you can not access certain header objs, you could try to find a module for it. https://github.com/hutajoullach/nextjs-threejs-pin-dropping-app/blob/main/src/pages/api/ip-data.ts
8 replies
TTCTheo's Typesafe Cult
Created by Helge on 5/31/2023 in #questions
Next13 app-router: How to get request headers on client page comp?
@Helge Are you using Express for the server? If so, you can use "req.get" to access the request header. Alternatively, you can access header in next.js api route with "req.headers". Next.js also allows you to access incoming request headers inside of your components by using "import { headers } from 'next/headers';"
8 replies
TTCTheo's Typesafe Cult
Created by thevalorised on 5/31/2023 in #questions
File Uploads to Local Storage
@The Valorised I don't think allowing users to upload files to server folder directly is a good idea. It could lead to security vulnerabilities, so if you don't want to use S3 bucket, check out Cloudinary to see if their free tier is large enough in you case. Cloudinary will provide with file upload component called "CldUploadWidget", so you just need to get string value "imageSrc" from this file upload field and then attach to request before submitting the data.
7 replies
TTCTheo's Typesafe Cult
Created by IsoPhoenix on 5/31/2023 in #questions
How is realtime DB syncing accomplished without Firestore/Supabase?
@IsoPhoenix If you are not looking to implement a bidirectional connection between db and client, try react query. T3 app is using react query under the hood and on top of that, you can use react query within T3 app as well. You should have access to the boolean value "isStale", so just create a condition to check if data is stale, and then call "refetch" function if the data is indeed stale. Also, with next.js, useSWR will do the same but generally you can achieve what you want with react query.
20 replies