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

How to pass in a React icon as a prop and style it with Tailwind

Hello I'm trying to create a reusable react component that takes in an icon and I want to style said icon with a base style. I included some screenshots of what I have so far. I've been at this for a while, any help would be very much appreciated.

useQuery param is undefined. but query is enabled only if the param is defined.

im trying to set up some searching. and came across this error. i am not sure if i am missing something in my reasoning for why this should work (some react or maybe react-query rules/quirks). SSR is off btw.

SSR useQuery Breaking Page Transition

Technically using an infinite query, but I have an array of Posts that I'm prefetching, but when I use a next.js Link I get an undefined error during the transition

Running into a Error with UseMutation

Hello, I am running into an error TypeError: Cannot read properties of null (reading 'client') when using useMutation(). I am new to to react-query and TRPC so some help would be appreciated. Thanks!...

Recomended BaaS for bulding & hosting Serverless functions and APIs

Hello! Im New to the community, but exited to be part of it🤘 Im quite nifty in python and java, but have fallen in love with NextJs and the T3 stack in the recent months. I have started a coulpe of Fullstack projects with Firestore Databases and API routs with Next hosted on Vercel for a production build, but as I am learning more and trying to build bigger projects I dont really know how to connect, host and build production ready APIs with other languages such as Java and Python. I have managed to set up a local flask and Django API endpoint, but as I want it to be serverless, I have not been able to figure out a way to host it....

Error on mutation `connection timeout error prisma.uRL.update()`

I'm building a url-shortner it just worked correctly until i added a redirect count trpc mutation before redirecting to the original url, it is giving connection timeout error on prisma.uRL.update() , idk why this is happening please help pages/[code].tsx ``` useEffect(() => {...

Nextjs revalidate on the edge

Is it possible to do things like revalidate or set the preview mode on experimental edge api routes?

Twitch API - Request bearer token on every request?

Okay so I'm building a simple endpoint to grab the user ID of a user. In order to do so I need to provide a bearer token, which I get when I make a request for it using my client ID and secret. Since I'm using serverless, will I really need to request that bearer token before every API request? Or am I missing obvious. (I wish Twitch would let you make app API requests using your ID and secret directly)...

Deciding where to do searching & filtering. Frontend or Backend.

So i have a table in my DB called "Exercises". Which contain about 5 feilds of text data. In total there are about 1700 exercises. Currently im populating about 300 Exercises in my db for dev purposes. So it was easy enough to have an api route to pull every Exercises into the client (~77kb). And do some basic filtering client-side with some string pattern matching. ...

Why isn't TypeScript giving an error?

So I'm helping this person on another server and their code looks like the following: ```ts type Unit = { unit: string; abbreviation: string;...

How do you get cookies through the TRPC Router?

Question is pretty much in the title. Was having trouble finding resources about this online.

Creating Zod Input Validation Error after tRPC entry

I've got a ct3a project, with all the bells and whistles (including tRPC and zod). In addition, on the frontend part of the app I've set up a couple of forms with react-hook-form, and I am sharing the zod schemas being used with tRPC. What I'm looking to achieve, is AFTER the input validation by the tRPC router mutation has been completed, and the code has moved on into the logic within the mutation itself, to be able to send back an input validation error and set these errors in react-hook-form. This would be the business logic:...

Lightweight Message Queue for Long running Background Tasks

I have a nextjs application I want to queue jobs. Essentially I want to queue a job and then I would create that job in the database associated with the user then I would get back its id. User will be able to check its status by its job id later on and once it is finished the the that had been queue will call my nextjs api endpoint to trigger a series of actions which might be store the result of the job in a database.

Creating deeply nested Prisma entries

I am trying to create a deeply nested object in Prsima using explicit many to many and it sort of works? The problem is, it seems Prisma has 0 proper error handling at anything more than 1 level deep. For example if I have ```ts prisma.portfolio.create({ data: { locations: { create: input.locations?.map((location) => ({...

is this way of handling react states a bad idea?

This is a very long ass question, it might not be worth your time anyways. so sorry in advance. I'm a noob at react, I just know the basics and started making a relatively medium project. then as my component started having more children and grand children, I startup feeling the pain of managing all of those relationships. So I tried useContext but it feels like the syntax is too much, and I didn't feel like I need a state manager like Redux YET for my simple project, so I made this simple snippet, and my code looks so clean. and works like a charm....

Best way to style range inputs?

I'm trying to style a range input. I can't decide between overriding platform specific styles myself and using the native input tag or using react-range. That 5kb size is concerning me... What would you do?

Store Historic Values

So I'm currently working on a project where I want to display the changes of floor prices of NFT collections in the past 24h, 7days, 1 month. I'm tracking the current floor price in realtime and updates the floor field for that collection. Now I was wondering what the best way would be to store the historic values, since having a field that updates everyday at 0:00 doesn't seem quite like a good solution. Every help is appreciated : )...

is it fine to store the server state in the forked process? (PM2 cluster)

so my server keeps a user session in memory... and I want to introduce clustering using PM2. I obviously want to keep the state global, so I've found this pattern called sidecar pattern, where you use the loopback to share info between processes and I thought who needs Reddis cache while I'm in the same host. so do I just use this pattern and make those instances of the server's process store the state in forked one?...

Are there any differences between these two pieces of code performance or bug wise?

I don't believe they do, but I found the second snippet in my codebase, so I wanted to be sure that I wasn't going to break something that I didn't try. Everything seems fine when I try it myself on my local server and test the functionality of what is being updated, but wanted to know if I was missing something, or some practice, by adding an empty array first
this.setState({ user: { ...(response || {}), ...data } });
this.setState({ user: { ...(response || {}), ...data } });
...

Help - session type in _app.tsx is missing

I recently opened my _app.tsx and noticed that there was an error with the session object being destructured in the app. I'm not too sure what went wrong here, but I did remove and reinstall my node_modules for good measure, and no luck. Repo link - https://github.com/SeanCassiere/next-discord-clone/blob/master/src/pages/_app.tsx#L17...