Theo's Typesafe Cult

TTC

Theo's Typesafe Cult

Join the community to ask questions about Theo's Typesafe Cult and get answers from other members.

Join

create-t3-turbo full video walkthrough

I have no mobile dev experience and I’m getting kinda hung up on some seemingly simple concepts while trying to develop a create-t3-turbo app. Are there any full development walkthrough videos out there? Simple things like pnpm db-… are tricking me more than they probably should, so I’d love to see a full breakdown if it’s available!

chrome -internal-autofill-selected

chrome automatically adds this stupid style to text inputs that have autofill enabled on them tried looking at existing solutions & they all use box shadow, which doesn't support transparent backgrounds (since the chrome background is still there) any tips would be life saving, thanks...

Inviting a teammate with nextAuth

Hi guys, in [...nextAuth], the email provider is working nicely: ``` EmailProvider({...

Paginated Queries and Downloads

Hi all, I’ve got an application with a reporting module where the user can choose from some report params and then view a table (built with Tanstack Table) with the first 50 records.. I’m needing to add an “Export all” button that should page through all the data and write it out to an excel file. I’ve gone through multiple implementations of this, but so far I’ve only been able to make this work by writing the paginated query twice– once to power the table and one to fetch the data for the download (using tRPC’s useContext() hook). One reason I went this direction is because when performing the download, I don’t want the fetched data to cause a re-render of the table....

Should I use Tutorials?

Context: I only have knowledge with html, css, go, small amount of sql, and js, so I haven't really worked with react before. My end goal is making a web app that allows people in my college to visualize what classes they need to take to get to a certain class, and I decided to go with CT3A Question: Are there any resources that you could recommend that can get me up to speed with Next.js + React + Resources quickly? Furthermore, because of how unacquainted with the TS world I am are there any tutorials I should use?...

Best practice for protecting page / not letting anything run before redirect

In my app, I would like to protect a few key routes. The middleware implementation of NextAuth looks interesting but I am reluctant to swap out the strategy to 'jwt'. As such, I am protecting page by page with something as below: --- const { status } = useSession({...

How to fix env types on `schema.mjs`?

```js export const serverSchema = z.object({ NODE_ENV: z.enum(["development", "test", "production"]), VERCEL_ENV: z.enum(["development", "preview", "production"]), })...

Using dynamic Param slug in TRPC query

I seem to go in ups and downs in my love of TypeScript (I shouldn’t say that here tho 🙂 ) In a page, I would like to pass the slug of that page to a TRPC api call as follows: const router = useRouter()...

Advanced search and filtering with Prisma?

How do you all do advanced filtering/searching of your DB? For example my app has tasks about programming, and I want to show those tasks to the user. On that page I have a text search with many dropdown options like: taskType, difficulty, language etc. I solved this by sending an array of IDs for each of these dropdowns, how I saved them in my DB, to my tRPC endpoint. For example: ...

Zod with custom type

Need custom type validation in zod. help!!
type media_type = "all" | "movie" | "tv" | "person"
type media_type = "all" | "movie" | "tv" | "person"
...

new TRPCError "cause" field is not working

I have this error and lets say i want to provide more information and a custom error code in the cause field. But on the client the cause field is just not there i can't get the cause field.... , Am i doing anything wrong? ``` throw new TRPCError({ cause: { moreInfo: "moreInfo", code: 123 },...

react-hooks/exhaustive-deps issue

ESLint want's me to put that dependency but doing so will cause an infinite loop to rerender

why are people not using t3 stack on production?

Ever since i found this stack i have used it in all production apps where i have the opportunity of picking a stack But whenever i see people on YouTube they all say they use t3 stack just for side project So i am wondering so am i in trouble for using t3 stack for production apps?...

useState bug????

i want to store the product id on a state but when i first click it show empty array, how can i fix this?

Next Auth Google not working ('client_id is required')

Hi, just started out. I changed all the DISCORD_CLIENT_ID and DISCORD_CLIENT_SECRET to GOOGLE_CLIENT_ID and GOOGLE_CLIENT SECRENT, in auth.ts, env.mjs, and .env (please let me know if you need to see the files) ...

Should I disable T3 eslint rule: no-floating-promises? Issues with React....

The typical model for fetching data, or doing anything asynchronous inside useEffect, does always triggers this rule,
Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the `void` operator.eslint@typescript-eslint/no-floating-promises
Promises must be awaited, end with a call to .catch, end with a call to .then with a rejection handler or be explicitly marked as ignored with the `void` operator.eslint@typescript-eslint/no-floating-promises
Here's my code (with the rule disabled for the line): ```...

(Solved) Fresh T3 App Complaining About Session

Started a new project and was brought with this. It runs fine and can be ignored but I'm a bit of a neat freak and I'd love to sort it out. No errors during creation and no errors running.

file structure in react query

hello i wanted to know opinionated file structures for RQ im a rtk query users wanted to jump in RQ but i want to know before a good structuring that can scale if you have repos,blogs, or just your opinions about it i would love that...

Managing assets

Hey everyone, I kinda hit a wall so I need some help from You awesome people. At work we run a monorepo with two Next JS apps (deployed with Vercel) and a UI library. It got to a point where one of our apps has a 2MB initial load JS bundle and around 1MB additional code for every route. There's lots of code but we also have A LOT of SVG assets so I'm guessing it's partly due to them. Previous devs just put the assets alongside code (not even in /public) and just ran with it. I was wondering how You guys run assets in React apps (client-side mostly but I guess it doesn't matter). My idea for now is to move all assets to one of the two apps /public directory and create some utilities for using them directly in components of these apps. SVGs used in UI library components will be directly in code (so they don't depend on any unrelated service). I was also thinking of using react-inlinesvg for SVGs that require some modification (I ran some tests and it seems it's internal cache doesn't work - for the same asset it sends another request and you can see a wave of loading images). ...

Image is missing required "src" when it comes session.user.image

the image actually show up with showing any error but show error on the console