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

Type-guards and generics

I have a (quite) specific question about type-guards. I want to define some variable, and I want that variable type to depend on a constant. For instance, I have a constant size: 8 | 16 (which comes as an argument to a function), and I want my variable byte: [Byte<8> if size = 8 or Byte<16> if size = 16]. My first instinct was to declare byte: Byte<typeof size>. This doesn't work as expected. I've made this quick playground to illustrate my problem: https://www.typescriptlang.org/play?#code/C4TwDgpgBAQiwQDwBUDKBLAXtCAPBAdgCYDOUAHFAD5QCMAbAHxQC8UaWO+ExZlA-FADaBAK4BbAEYQATgF0oALmFipsgDRRV0+QG4AUPtCRY8CJTZwEicowNQHUAPROoAPX6Hj0KxAatTawY7fUdnVw9DADNRAgBjYHQAewIoEiTxCGAAC3QCAHMAChJOZUoaBgBKKABvUMcAGyyoSTNlX0RvJKi0zhCw9B7izlYWNnJqurCw1oR7aYcXd08FhybgKAQSYF92s07wCG7e7H7VsKXIsIBffWugA Maybe the Byte<typeof size> approach is incorrect. Is there a nice way to fix this?...

Setting up unit tests with Jest and React Testing Library

Hi everybody! Been looking to set up some unit tests for my app. I am having issues setting up the necessary providers around the component I am attempting to test. As shown below I am not sure why I am getting this error (shown in screenshot), Can't seem to google my way around this, any help or if you've managed to set this up in an open source project you are willing to share would be super appreciated! ...

next auth X DiscordProvider types

this is my first time using DiscordProvider in next auth , i am seeing red lines everywhere please what am i doing wrong? i want only usernames in the list to be allowed to signin...

Discord server setup

Is there like a template or setup script to setup a nice discord server or should I just look around the ones I like and try to replicate a good channel structure manually?

How to get data from server action

So I'm trying to get data back from a server action, like you would in Remix with useActionData and I just don't know how to access it. As an example: ```ts async function addUser(data: FormData) {...

Question about hooks.

```` const Home: NextPage = () => { const { data } = api.companyemployees.getCriticalContracts.useQuery(7);
const handleSnooze = (contractId: number) => {...

Clerk middleware not letting me fetch users on unauthed request

Hey everyone! I was following Theo's T3-stack tutorial, and when the client tries to fetch all the post at the beginning I get a an error saying that its unauthorized, I know the code works fine because when I am actually logged in, everything works as expected. I think this has to do with the new clerk middleware, I was wondering if one knows how to fix this issue this?

Caching an entire API route for 5 minutes

Hi everyone! I was wondering if my Next.js API route (using the app directory) can be cached using Vercel as a server-side layer. So, for example, if my api route returns something like:
createdAt: new Date
createdAt: new Date
...

Detect server/client component

Anyone know of a way to detect at runtime whether a component is running as a server component or as a client component? I'm building a custom Cloudflare Image component which has additional functionality when running on the server, and ideally I'd like to be able to import one component into a client or a server component and have it use the server component "version" when imported into a server component. I don't care too much about having to write <CloudflareImageClient> or <CloudflareImageServer>, except that I might have a component which is sometimes a server component and sometimes a client component depending on what imports it....

Invalid input Only "mysql2" is available options for "--driver"

I'm trying to run drizzle-kit introspect:mysql by following the docs and I have the config file: ``` import type { Config } from "drizzle-kit"; import dotenv from "dotenv";...

How to use subdomains with nextjs

Hello everyone! I'm creating a site where there will be very specific needs according to the user's role (student, teacher, administrator). I'd like to have a landing page and to connect to it go to : ...

How to disable App Dir?

Upgraded our app from nextjs 12 > 13. I dont want to use app dir. I get this when i launch my app:
- warn You have enabled experimental feature (appDir) in next.config.js.
- warn You have enabled experimental feature (appDir) in next.config.js.
...

Tech stack choice for a cross-platform desktop app with Raycast floating window feature.

Electron apps are too big for a small app, and I didn't see many production applications in Tauri on StackShare.io. Any advice on how I should start this side project? Much thanks!

toasts vs banner notifications for forms

or anything in general. I found this thread https://ux.stackexchange.com/questions/91406/what-is-the-difference-between-alert-notification-banner-and-toast-message but am still a bit confused as to when it's more appropriate to use one vs the other. I'm personally partial to error messages close to the fields that caused them over toasts which would just be an error soup crammed into a single box. This makes me think that toasts don't really have a meaningful role. I suppose toasts are good for...

useQuery endless fetching loop

Somehow my useQuery has gotten itself in an endless loop of fetching the query. Why/how does this happen? It's at around 300 thousand fetches after a minute or so.

Elegant ways to handle variable useQuery/useMutation calls?

I have a useMutation call that runs once per object in a list. I don't want to run it once for the whole list*. This list is stored for each user in a DB though, and when the page initially loads it hasn't been fetched yet (so the list is undefined). Once it does load, useMutation() runs, and react rightfully tells me that the number hooks that run changed. I've been using a pretty hacky solution to get around this - hard coding an initial list with the max number of items that i would expect to be in it before the list loads (with just undefined or dummy objects), and once the actual list from the DB loads, padding it to maintain the same length (so useMutation is called the same number of times). This feels incredibly hack-y and wrong. How should I be handling this? Maybe the answer is "don't use trpc - it just doesn't support this well atm"? ...

Strange trpc types with latest create-t3-app example app

Hello, I just installed a fresh create-t3-app with prisma, tailwind, and trpc. If we navigate to the example getAll query in server/api/routers/example.ts, and modify it as such: ```ts...

Uploadthing and Clerk work together?

Hey all! I'm not a developer by any stretch of imagination, but I'm using Clerk for user management in a T3 web app I'm trying to develop. Can I use Uploadthing for the photos users will be uploading to their blog-like posts in my app or do I need to write my own auth code and forget about Clerk?