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

Modularized Imports

Is there a way to read variable {{member}} in the following image? I want to pass modified {{member}} into there.

How can I efficiently retrieve settings from my database?

I am saving certain setting keys in my database using a model called "Settings," which has fields for "id," "server_id," "key," and "value." I often need to retrieve multiple settings at the same time, such as "applications enabled" and "applications channel." I think this method is not efficient, so I want to know if there are other ways to retrieve data from this table using Prisma that would be more efficient.

how to add user role to session.user and conditionally render something based on role

I made a new router called userRouter that is enabled when there is a session but the issue is it takes a full second before the condition user.role === something turns from undefined to true

trpc and node express server without react query

Please how can bootstrap a full backend project With trpc and node express server without bundling react query I want the front-end developer to use any library of his choice like axios or fetch just like a regular express app...

Managing tailwind breakpoints and SSR

I asked a similar question yesterday (https://discord.com/channels/966627436387266600/1063696594140139530) but this is more about how the original problem relates to SSR. I have a application that I developed for desktop that I am trying to make responsive. Yesterday I asked about how to access tailwind breakpoints in my js. After getting some answers and doing some more googling I came up with a custom hook for detecting screen size and stashing it in a context for any of my components to use. However, the hook is based on reading window.innerWidth and window.innerHeight inside of a useEffect() so SSR ends up kinda broken. The app loads in assuming it is a desktop app and then runs the hook and the layout shifts. The only way I can think to avoid this is to use (for example) className="hidden lg:block" . To me, the idea that each page has all components for every size variation baked in seems like a nightmare to manage. It also seems like it will bloat my code significantly. For instance, I am using some MUI buttons that i want to be size=large on desktop and size="medium" on mobile. If I am going to do this in tailwind alone ill need to have multiple copies of the same button in the DOM each with different props....

npx prisma migrate dev

I'm trying to create my first migration with npx prisma migrate dev, but when I run the command, it seems to be stuck in an endless loop, in this screenshot, the command was executed ~20 minutes ago, and it's still stuck.

prisma.user.create type is 'any'

I defined the prisma schema, but when i try to add a user to the database, it's type is 'any', isn't prisma supposed to generate type definitions for my schema?

Is Postgres RLS a must have?

Hi guys, if I'm using TRPC's protectedProcedure in my routers, is it recommended to enable and set up row-level-security for my Postgres DB? Or do protected routers in TRPC make RLS redundant? Thanks!

handling tailwind breakpoints in react

I am trying to figure out how to turn my webapp which was built for desktop into something more responsive. I am using t3 stack with tailwind. I know that tailwind provides breakpoints (sm, md, lg, etc), but im struggling to figure out a good way to change my layouts based on this. For instance, I have a sidebar in the desktop app that i want to turn into a bottom bar for the mobile app which uses a completely different component. How can my react code know if the screen size is sm, md, or lg?

Optimizations tradeoff

As the title says, what are the trade offs when loading components lazily? I haven't seen any in my application yet, but my theory is that the tradeoff, most of the time, would be aesthetical? For example, the components would pop into existence if I don't design it well and it's not gonna look good...

why does tailwind use rem instead of em?

Basically the title. This is mostly just out of curiosity but im trying to make my existing webapp (that was written for desktop) mobile friendly and it seems like its going to be a lot of work to add className="text-lg :lg:text-xl xl:text-3xl" all over my code

Possibly Undefined Error

I have two arrays that I am expecting to contain the same values, but possibly in a different order. Example Arr1 = [1, 2, 3] Arr2 = [3, 1, 2]...

VScode Extension Name

Anyone recognize this extension? It's displaying problems inline on the file which looks pretty handle

Vercel - Module not found: Can't resolve

On a new deployment I am getting a new error where I haven't changed anything at all in these files. ```Failed to compile. ./src/pages/api/trpc/[trpc].ts Module not found: Can't resolve '../../../server/api/root.js' in '/vercel/path0/src/pages/api/trpc'...

Help with new trpc syntax

Hello! Can anyone help me rewrite this example piece of code to new trpc syntax with Public procedures, so I will know how to do it? Thanks!:) ```export const trainingRouter = createRouter() .mutation('createTraining', { input: z.object({...

tRPC NextJs Prisma Ws monorepo

Hey 🙂 I am rather new with tRPC so forgive me for the noob question. For my next project I would like to setup a monorepo with Nx with 2 NextJs apps ( admin ui & preview ui). Ideally these apps should share the tRPC server api and Ws subscriptions. Is there any documentation/example/discussion to refer to? Thank you!...

Efficiently find slow queries?

Slow query performance is one of the leading bottlenecks for slow application performance. Is there any tool / library, which allows you to track down which exact queries, i.e. with reference to the code itself, similar to sentry, lead to a slow query performance? (Or rather show the performance for each query, so you can determine yourself, if the performance is acceptable or not) I'm aware, that database hosts itself show the performance of queries, but linking their query performance to the code is still a hurdle....

fetch calls in getStaticProps not returning anything

as you can see in first image the returned value is empty array, this only happens when I call the getImages function in second image. How can I get the correct values?

ts file for sidebar/drawer structure

Wanted to build a ts file that stores the structure of my drawer. Currently thinking of having the following type for a drawer tab - ``` type DrawerTab = { name: string,...