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

Does anyone know of any bugs that makes the type inference to break?

I was working on a project, it was using turbo repo. I updated the systems typescript version to 4.9.4, it was already being used in some other similar project. And after a restart my typings went completely shit. What happens is it would show the the correct typings when I access the types in same file, but as soon as I try to access the properties on another file, typings break and it says that the type which was infered correctly is not any.

Example files missing, referenced in folder structure docs.

From https://create.t3.gg/en/folder-structure#srcpagesapi
src/pages/api The api folder contains all the API routes of the Next.js application. The examples.ts file contains an example of a route that uses the Next.js API route feature along with Prisma. The restricted.ts file contains an example of a route that uses the Next.js API route feature and is protected by NextAuth.js....

Name CSS Import

Hey, I'm doing dark/light mode switching for code blocks using HighlightJS and I want to name the imported stylesheet so that I can toggle it on / off depending on if it's dark mode. ```typescript import "highlight.js/styles/github-dark.css"; import "highlight.js/styles/github.css";...

Next/Script

I can get the vod to play on my website but i can not figure out how to use the functions in the twitch docs. I have similar code to the docs and the function part player.setVolume(0.5); does not work my stream starts off muted. https://dev.twitch.tv/docs/embed/video-and-clips/#interactive-frames-for-live-streams-and-vods https://dev.twitch.tv/docs/embed/everything/#programmatic-access ...

Zod date string validation

Someone that knows how I can use datetime string validation in zod but only require the year month and day and not the time? ```ts const datetime = z.string().datetime();...

How can i make static array from react query

i have db with table teams, teams have field coins , i want to fetch teams and create an array of them that is sorted by coins but i dont want it to update , so if i have a team with 10 coins and team with 20 coins ,i want the team with 10 coins to be first in array always even if team with 20 coins spends everything

Query random rows in mysql DB with prisma.

I'm trying to query random rows in a mysql db with prisma. My first solution was to run a raw query, like this. const randomOrd = await ctx.prisma .$queryRawSELECT * FROM Ord ORDER BY RAND() LIMIT ${number};;...

using prisma with next 13 app dir

I have just started exploring prisma and next 13. I have read on the Prisma official website, "React Server Components are currently an experimental feature and are not yet ready for production usage! We are collaborating with the React team to ensure that the react-prisma package will be kept up-to-date". But, I can import the PrismaClient from @prisma/client in the page.ts(without 'use client'; so I hope it's a server component) and something like const posts= await prisma.posts.findMany() works. I might need to understand a lot of concepts better here. Is this the right way to use prisma inside the next 13 app directory. This way, I can skip rest/graphql/trpc for a significant portion of the web app(and also improve SEO/lighthouse metrics I guess)....

Updating linear gradient using JavaScript (React)

Is there a simple way to update a linear gradient background using javascript? Right now i have it like this in my CSS: ```css :root { --bg-gradient: linear-gradient(...

the best way to back up a prisma/mysql database?

https://www.prisma.io/dataguide/managing-databases/backup-considerations Prisma does a great job explaining all we should consider when setting up a backup strategy, however it looks like the prisma export command was deperecated and there's no off the shelf solution for backing up... from prisma. I guess i should look for solutions built for mysql? are there standard solutions? I dont like mysqldumb i mean dump...

What is the recommended way to take care of Auth in Expo?

What is the recommended way to take care of Auth in Expo?

Updates from mutation responses with trpc?

I'm trying to automatically update a list query after updating the list with a mutation. The tanstack query docs show its pretty easy to do with straight up tanstack query: https://tanstack.com/query/v4/docs/react/guides/updates-from-mutation-responses However, with the t3 setup and trpc wrapper, I'm struggling to figure out how to do this. If I try to add a querykey like list: publicProcedure.query("items", async () => {, I get an error saying that query() is only expecting 1 argument, not 2....

Multiple renders of the same chat sent via Pusher

So I'm making a T3-based chat room app. I'm running into a weird problem where the chats are randomly starting to get rerendered more and more times. I'm not sure what's triggering it, on initial page load of the client, everything's working just fine, then after a couple minutes it'll start to render each message 3x, then 4x, 5x, etc... I'm using the timeSent(timeSent: new Date()) as the key for the map. Pretty sure it doesn't have anything to do with pusher itself, since the chats are only rerendering multiple times on a per-client basis(i.e. even if it's rerendering 6 times on my client, the other person in the chat room sees everything as normal, till the bug starts happening to them later down the road) Pusher useEffect: ...

Error when using middleware

I'm trying to use middleware in my T3 project and even with a pretty much empty middleware function, I get this error
Error [TypeError]: Class extends value undefined is not a constructor or null
What am I doing wrong?...

TSConfig Path Alias doesn't resolve in monorepo

Trying to convert my repo to a turborepo, using create-t3-turbo as a baseline. Almost everything worked as expected, until I tried to add custom path aliases inside packages/api. That led to the following error. ``` ../../packages/api/src/trpc/router/meeting/meeting-attendance-link.ts:2:0 Module not found: Can't resolve '@/common/grant-rewards'...

React state management for forms (creation is simple but reusing for editing is hard)

I am constantly building forms for creation and editing of different entities in my web app (like tasks, notes, contacts, etc.). However, I wanted to understand what is the recommended way of managing state of these forms in a way that - 1. Reuses components 2. Is performant Let's take the example of task creation and editing modal. What I currently do - ...

How do you hit trpc endpoints via http request?

I am fairly new to trpc. It's awesome when consuming the API through the client. But what if I want to test the API via postman or make a get request using the browser? For example, with a normal next api route, I could go to localhost:3000/api/hello and it would return the data. Can I do something similar with trpc endpoints? I tried going to localhost:3000/api/trpc/example/hello but that did not work. Thanks in advance!...

Vercel functions - python + node runtimes

I need to have some vercel functions in python, and I'd like to have them live in the same project as my nextjs app. In a clean T3 app, when I make a /api folder with a python handler, I get 404s on all other functions. I think it could have something to do with how the dynamic routes are handled (https://github.com/vercel/vercel/issues/3294), but I just wondered if anyone else has encountered this?

Unsafe assignment of an `any` value

I've been working with the create-t3-turbo template recently and it has some new linting rules I'm not accustomed to. I'm already an anti any zealot, but these new errors have me scratching my head As you can see in the image the linter is complaining that there is an unsafe assignment of an any value but from what I can see everything appears to be typed, and there are no any values to be found. Is this an issue with my linter setup, or can someone help explain what I'm missing. I've checked the typescript rules page for these warnings, but I am not seeing any examples that come close to matching what I have in my code....

rewriting table to use react table

Hi! I have my current table but I wonder if its possible to make it work with react table. Im mostly concerned about one part because currently I have a little small icon that let user add Item to favorites (i use trpc to handle that on click) ``` Tbody Items.map(Item => (<ItemComponent Item={item}/>) Tbody...