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 do page transitions when using router.push

i tried using framer motion and animate presence is very good when using Link,however i am using amazon cognito and have a login page where i want to redirect user back to homepage when cognito onSuccess is triggered and i am doing that with router.push

get icon from mui dynamicly

hello im trying to dynamicly load icon from mui this is the code import React from "react"; import * as MuiIcons from "@mui/icons-material"; console.log("MuiIcons: ", MuiIcons); ...

Typing Props

I have a query that is returning an array of items. I'm then mapping over that array and rendering elements in a child component. I did some wacky stuff to get the type from the api but that felt VERY wrong. Currently just passing an id and refetching inside the child, but that also seems wrong. What is the best practice here?

Why does react rerender this at the component level but not when using a hook?

I've been toying with a type-writer effect in react and cant understand why react's lifecycle is working this way. Can someone explain why react is re-rendering the <WithoutHook/> component such that it doesnt work While the <WithHook/> one does? ...

getServersideProps not providing type inference, and session getting lost between server and client

I have this function (which I've used many times before), ```ts export const getServerSideProps: GetServerSideProps = async (ctx) => { const auth = await getServerAuthSession(ctx); if (!auth?.user) {...

middleware does not run on index page

Here's the middleware config ```ts export const config = { matcher: [ /*...

should I use ctx or api?

whats the difference between me using api.events.getEvent.cancel() vs ctx.events.getEvent.cancel()? why does one work and not the other? isn't api in ctx, so shouldn't I be able to just use api and not ctx? which one should I be using?...
No description

react-table v7 globalFilters not working

I am writing a CRUD app with the t3 stack and react-table that basically fetches the data with tRPC and displays it in a table. However, I am having some trouble adding a globalFilter, because whenever I try to get the globalFilter and setGlobalFilter from state, it says they do not exist in tableInstance and tableState. Does anyone have any insight?

Concrete guide for Credentials Provider with T3 + Next auth?

I've been trying to implement the credentials provider with standard email + password authentication for this whole day. I haven't been able to get it to work, there are always errors like 'JWEDecryptionFailed: decryption operation failed'. I also haven't been able to find a proper tutorial explaining it with t3, there are existing tutorials for the credentials provider, but it is often difficult to peace everything together bit by bit. Given that 99% of webpages allow users to sign up with email + password, is there any existing Github repo you can recommend for this scenario?...

Deploy app using Nodemailer-express-handlebars + nodemailer to send emails on vercel

ERROR [Error: ENOENT: no such file or directory, open '/var/task/src/mailer/templates/invite.html'] { errno: -2, code: 'ENOENT', syscall: 'open', path: '/var/task/src/mailer/templates/invite.html' this is the error am getting....

Turborepo & Prisma Environment Variables

Hi, I'm currently setting up my Monorepo with Turborepo and env-vars are... weird.. with it. The problem I'm currently having is, when I'm doing npx prisma db push in my apps/server Folder, it complains about not finding the env file which Turborepo requires to have in the Root of the Workspace. ...

Global dynamic parameter for many mutations/queries

Noob question, but is there a way to have a piece of data available to all queries in a certain router? I don’t want to constantly have to pass this parameter into all of the queries that use it. I WOULD store it in a session callback property but the value might change and idk if there is a way to manually update this value without having to sign-in again?

typescript-eslint/no-misused-promises: how to handle Promise<void> in event handlers?

<button onClick={someAsyncFetchFunction} />Click</button> This ESLint rule didn't squash the warning: https://github.com/typescript-eslint/typescript-eslint/pull/4623 ```...

Deployment error on vercel

did anyone had this, and how did you solve it:

Is it possible to encode tRPC data somehow?

I've built this webapp with t3 app and its mostly great - however i saw that all trpc data thats being sent from the backend can be found in the networks section of the chrome dev tools. Is there someway one can hide this - and at least make it a bit more tricky to get the data in raw form? There is no private data being sent - but access to the data in raw form is one of the largest moats of my product. Its taken a lot of time to assemble the data, and would be a shame if someone could just fetch it all using my site....

JS/TS intellisense not working

Just added typescript support to huge JS project while upgrading to webpack 5. Now everything runs fine, compiles fine and work as expected except for the vscode intellisense. If I'm inside a js file and trying to import a .tsx comonent the ctrl+space auto complete only shows .js components and not .tsx ones same happens otherway were .js components are not auto complete in .tsx files. I can manually go up and import them it works great. Types and everything work as exepcted. Heres the tsconfig. Babel is also used if that information might affect this. ```json { "compilerOptions": {...

Extending union types by interface

```typescript export declare type RouteProps = PathRouterProps | LayoutRouterProps |IndexRouteProps; interface IOwnProps extends RouteProps { hasAnyAuthorities?: string[]; }...

react hook form + headless ui

from @dingo "Ok so I have a drop-down where you can select something, I want to show the names of the options but the “value” be the database id for them. I think it should be done this way as far as I can tell because I’m just accepting the database id as a string in my zod schema (I use the same schema for my backend route for said action)" I made it a bit fancy with a generic combobox, so hopefully this helps https://codesandbox.io/p/sandbox/goofy-scooby-mg9qm7...

Vercel deployment - React Router

Every time i deploy with vercel i have to make a vercel.json file and add this ```json { "rewrites": [{ "source": "/(.*)", "destination": "/" }] }...