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

Is there a way to make Typescript smarter when implementing a class?

```typescript class AbstractClass { testMethod: (a: string, b: number) => Promise<boolean> testMethodTwo: (a: string, b: number) => Promise<boolean> }...

create-t3-app Dockerizing base install fails with Prisma?

I am trying to learn and understand how to do things with Docker, and I saw a Deployment part of the Website which seemed great, but i seem to get stuck on the DATABASE_URL env variable. I was trying to set up a docker-compose for it, but by default it isnt showing how to stand up a separate prisma setup server of sorts. I want to flush out this a bit more, since prisma can make a postgres or various other setups, but i didnt see much regarding it when looking at how to take this base app and create the appropriate containers for it. Can someone point me in some direction on how to get this aspect working? Seems like I will need it to generate a db container, or some other mechanism. to see how I can build the rest of this aspect....

How to store session in DB using credentials provider?

How to store session in DB using credentials provider? Otherwise, I cannot manage the user's logout from the server side.

mutate return value

So I am not getting all of the data on my mutate return. I am creating a task, which has subtasks (relational to the task) and I am creating them while creating the task all in one big block, the thing is that the return value when calling this createTask function doesnt give me the subtasks too, only the task that it created, how can I achieve the behavior I am seeking?...

Display modal on back button click

Hey all, I've received a task wherein we're displaying a modal on an order form when the user takes certain actions that will trigger a modal offering a discount or some other product depending on a vendor's settings. One of the requests is to trigger the modal when the user clicks the back button. Essentially, the user clicks back, the modal pops up saying "before you go, here's the offer", and then never triggers again. As annoying as it is, I figure I should look into how this could be done. My idea was to pushState under certain circumstances a dummy entry, so that when the user clicks back to leave the SPA, there's that buffer for us to detect popstate, show the modal, and then flip a boolean that will fix things up to allow back navigation afterward. However, it seems browsers have begun trying to skip duplicate entries when back is clicked, seeing discussions such as https://github.com/WICG/interventions/issues/21 and https://github.com/whatwg/html/issues/7832. I've thought about potentially doing some kind of client-side routing (we use React Router), and a <Prompt /> that'll get me there, but that seems like a bad idea both because it's hacky and because I don't believe navigation blocking are available in the same way in the newest version of RR....

The inferred type cannot be named without a reference?

I am genuinely clueless on how to solve this error
The inferred type of 'init' cannot be named without a reference to '.pnpm/@sentry+core@6.19.7/node_modules/@sentry/core/types/integrations'. This is likely not portable. A type annotation is necessary.
The inferred type of 'init' cannot be named without a reference to '.pnpm/@sentry+core@6.19.7/node_modules/@sentry/core/types/integrations'. This is likely not portable. A type annotation is necessary.
...

Is there a way to get a flamegraph on a vercel API call?

Basically the title. How do people normally debug requests that take a long time on serverless?

Next-auth useSession throws an exception in prod. Please help

All of a sudden the error in the image shows up in prod. It is working fine in the local server. But in prod
Application error: a client-side exception has occurred (see the browser console for more information).
Application error: a client-side exception has occurred (see the browser console for more information).
this error shows up. I have imported useSession like this,...

Vite config with absolute paths

Im trying to make an e2e test for my components and im using absolute paths like
import { component } from "~/shared/component/test";
import { component } from "~/shared/component/test";
...

How to avoid page load when verifying email with NextAuth

Hi, I'm new to the T3 stack and web dev as a whole, and as the title implies, I'm trying to stay on the same page without reloading it when calling NextAuth's signIn() method with the Email provider. In a settings page, the user can change their e-mail but must verify it by pressing a button. The button handler is calling NextAuth's signIn() as shown below ```async function handleVerification(providerId: string) {...

chrome-launcher wont launch

It's kind of outside t3 scope but im hoping i can get some help here - the error is happening in my t3 app I'm using node to run lighthouse and chrome launcher wont launch in my dev env (mac monterey), with a t3 app It seems like there's something wrong with the dependency - (but typescript compiles)...

React file upload component

Cannot find good examples of a simple file upload component in react + ts which accepts multiple file types like .pdf, .csv, .docx, etc. Any suggestions?

Drag and drop UI

Hey guys I am trying to do some array rearrangements which drag and drop package works best with typescript that I can use with react’s current version...

Data visualisation library

What's the best data visualisation library within the react ecosystem at the moment?

Cheapest hosting service

Hey y'all I need to host a website, it's static for my blog and portfolio. I need the most cost effective hosting service. Any recommendations?

Could I get some help for this Prisma schema?

I'm currently creating a "guess the rank" web-based game where you choose a competitive game, watch a short clip of gameplay and then guess the rank of the player in that clip. It's pretty simple and there's a few websites out there already. Each game can only have a single clip for that day. I reset the clip at midnight via a cron job and that all works fine. But I'm not sure if the way I'm storing the daily clip for each game is good. I originally thought I could have my Game model contain a featuredClip Clip but game also contains clips Clip[] and I can't figure out how to get this relationship to work. I've tried naming them but it didn't work. Still new to this. I'm currently trying to clean up my database and I wanted to know if the way I'm currently doing it is fine or should I go for the seconds approach, or even something different....

devDependencies difference with dependencies in package.json

I have found the following stack overflow question, but I want more context if possible: https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies I wanna know how and for what reason tailwindcss is in devDependencies and if I want to add additional packages do I always add them to normal dependencies and in which case (not basic, for development) you add there? I see that even typescript is listed as devDep....

Random/inconsistent TRPCClientErrors in local environment.

Did a search in here but couldnt find anything relevant. Im making a small game to learn T3 stack stuff and Im having a problem with this autosave interval in combination with prisma/trpc. On most triple mutations there is at least one error on the receiving mutation but it seems totally random. Sometimes its the first one, most times the second or third one fail but its not consistent at all. Is this just a local env problem? Havent tried in production. Did some googling also but couldnt find a...

ctx.user.session.email possibly null | undefined

``` get: protectedProcedure .input(z.object({ id: z.string() })) .query(async ({ ctx, input }) => { const texts = await ctx.prisma.text.findMany({...