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

Image Fetching bug with NextJS

So I'm trying to load in a set of profile pictures for a list of contributors to a repo. I have a list of everyone's github handle's. I'm fetching the profile pictures like so
<img className="mx-auto h-20 w-20 rounded-full lg:h-24 lg:w-24" src={`https://github.com/${person[1]}.png`} onError={(e) => replace(e)} />
<img className="mx-auto h-20 w-20 rounded-full lg:h-24 lg:w-24" src={`https://github.com/${person[1]}.png`} onError={(e) => replace(e)} />
Their are a few github handle's that were submitted incorrectly, so I'm trying to replace those images with a default thumbnail using the onError callback: ...

throwing error doesn't work in next auth

I am trying to throw a custom error in my [nextauth].ts Example instead of returning null when a user isn't found I want to throw a new errro with custom messages bust this doesn't work...

Use nextauth with supabase email and password

I know this is not a recommended practice. But im trying to setup nextauth to work with supabase's ``` const { data, error } = await supabase.auth.signInWithPassword({ email: credentials?.email,...

Typescript Determining type of generic.

Hi, I have the following generic function
const handleContinue = <T extends A | B>(data: T) => {}
const handleContinue = <T extends A | B>(data: T) => {}

How can I check inside this function when data = A, or when data = B?...

Is there a way on NextAuth to redirect upon login to a specific page based on session role?

E.g. - If session.role === 'teacher', redirect to '/teacher/dashboard', else - redirect to '/admin/dashboard' The NextAuth docs don't show a way to redirect based on session data: https://next-auth.js.org/configuration/callbacks#redirect-callback...

Best Practices - separating business logic from UI

So, I've seen this pattern which the Business logic is put into a hook, so it doesn't bloat the component. I've also seen that some critics that having the business logic into the component is wrong Here's a stackoverflow thread that illustrates well what I'm talking about: https://stackoverflow.com/questions/69332889/reactjs-separation-of-ui-and-business-logic...

Presigned URL Error Handling

I have a question about uploading images to an S3 compatible storage service. 1. Let's say in the site a user uploads multiple images. 2. A request is sent to the backend (without the images). 3. The backend generates names for the images and stores them in a database with the generated names....

Failed to load resource the server responded with a status of 500 (Internal Server Error)

Hi there I have an issue with trpc procedure, when I go to a site with API then it shows me an error in another procedure TypeError: Cannot read properties of undefined (reading 'input')...

NextJS Fetching an image that statically served from a microservice

Hey all. There's a Java backend that's hosting some images. I would like to have a nextJS api route that's going to fetch an image from there and then return it so the NextJS client can use it. Right now I'm doing: ```ts...

next export

Hey all, I’m trying use next export to convert the t3 starter website into a static site. I’m getting the error “i18n support is not compatible…”. Anyone got any advice?

Prisma Next-Auth PlanetScale foreign key constraints are not allowed

I am following the official docs to setup next-auth with prisma: https://next-auth.js.org/adapters/prisma. After copying these models (Session, Account, VerificationToken) into my schema.prisma I get the following error when I try to do a prisma db push. Am I missing something? How do I correct this issue? https://stackoverflow.com/questions/74769279/prisma-next-auth-planetscale-foreign-key-constraints-are-not-allowed...

nextAuth working only locally (not on vercel deployment)

I've been trying for a day now. I don't know the issue. I can't even get an error. When the nextAuth singIn() method runs, I just get the /api/auth/error page.

how does NextJs know what code to run on the backend vs frontend?

I thought only things in the API folder in Pages are ran on the backend, but there's a server folder in create-t3-app for the backend stuff Would someone explain to me?...

Zod discriminatedUnion

Hi guys, I have na union type as follows: ``` ts sections: z.array( z.discriminatedUnion("sectionType", [ z.object({...

.env has never worked for me

Any suggestions? Am using t3 stack I put in some keys in the .env when i try to console.log them it says undefined...

How to filter the SpaceX API (mongoDB find() based) by a nested array?! Tech Test

I'm stuck on a tech test where I need to call the spaceX API and filter all launches in the response based on an array of payloads including a specific nationality string. The the response normally has only a list of payload ids, but the full payload data is populated via options object. Link to API docs: https://github.com/r-spacex/SpaceX-API/blob/master/docs/queries.md ...

tRPC prefetching for Electron app

Hey 👋 I have a pretty basic Electron app, where I use tRPC to communicate with the server. I'd like to prefetch all the endpoints I'll need and display a loading screen, so that once the app is loaded the isn't any loading between switching pages. I saw that tRPC has a prefetch API for NextJS, is there something similar I could use in this situation?...

Tailwind stop popuop from flowing off screen

I have a dropdown component, and when the popup comes up when the main button is close to one side of the screen it flows off the page. I want it to get "bumped" over so it touches the side of the screen when this is the case

Is my approach correct to publish posts as 'published .. time ago' and SSR or tRPC?

I want to get my posts from SSR and what is the best way to get them? Can I use tRPC route calls inside SSR or should I call the prisma client from SSR?

Anyone know how to fix this typescript issue?

I'm trying to connect taskId to an existing task table but I'm getting an error that says: Type '{ connect: { id: string | undefined; }; }' is not assignable to type 'string'.ts(2322) It is a one to many relationship (many tasks on a list). ...