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

Possibly Undefined Error

I have two arrays that I am expecting to contain the same values, but possibly in a different order. Example Arr1 = [1, 2, 3] Arr2 = [3, 1, 2]...

VScode Extension Name

Anyone recognize this extension? It's displaying problems inline on the file which looks pretty handle

Vercel - Module not found: Can't resolve

On a new deployment I am getting a new error where I haven't changed anything at all in these files. ```Failed to compile. ./src/pages/api/trpc/[trpc].ts Module not found: Can't resolve '../../../server/api/root.js' in '/vercel/path0/src/pages/api/trpc'...

Help with new trpc syntax

Hello! Can anyone help me rewrite this example piece of code to new trpc syntax with Public procedures, so I will know how to do it? Thanks!:) ```export const trainingRouter = createRouter() .mutation('createTraining', { input: z.object({...

tRPC NextJs Prisma Ws monorepo

Hey 🙂 I am rather new with tRPC so forgive me for the noob question. For my next project I would like to setup a monorepo with Nx with 2 NextJs apps ( admin ui & preview ui). Ideally these apps should share the tRPC server api and Ws subscriptions. Is there any documentation/example/discussion to refer to? Thank you!...

Efficiently find slow queries?

Slow query performance is one of the leading bottlenecks for slow application performance. Is there any tool / library, which allows you to track down which exact queries, i.e. with reference to the code itself, similar to sentry, lead to a slow query performance? (Or rather show the performance for each query, so you can determine yourself, if the performance is acceptable or not) I'm aware, that database hosts itself show the performance of queries, but linking their query performance to the code is still a hurdle....

fetch calls in getStaticProps not returning anything

as you can see in first image the returned value is empty array, this only happens when I call the getImages function in second image. How can I get the correct values?

ts file for sidebar/drawer structure

Wanted to build a ts file that stores the structure of my drawer. Currently thinking of having the following type for a drawer tab - ``` type DrawerTab = { name: string,...

Typesafe backend stack

Having a hard time deciding on a backend stack. Happy with where things are going, but nothing’s quite there yet. Looking for decent scalability and type safety. I’ve done NestJS, Typegoose, and openapi generator. Works reasonably well, single source of truth (ish, because you’re still writing DTOs). Ditching Mongo though so I’m looking at TypeORM or prisma now. ...

nextjs mobile navbar flashes current page before navigating to the next page

so i have a navbar, and on mobile it becomes a full page menu, toggled by a hamburger button. just using a state hook to toggle whether or not i render it. because it's client side rendering and the navbar doesn't rerender, when a user clicks a link i toggle the state and, thus, the navbar disappears. the issue is that because i'm toggling this, the page that the user is currently on flashes quickly before the user is navigated to the next page. my only idea is: don't toggle navbar visibility when the user clicks a link. instead, keep it visible until the user is redirected, share the state between the navbar and each page, and on each page set navbar visibility to false on mount....

Infinite Error when React error boundary uses unrenderable MUI components

Hey all, I hope you're doing well. I'm running into an issue that's been confusing me related to React error boundary. Essentially, we've got an Error Boundary nested inside a MUI theme provider which uses a number of style overrides for MUI components. When an app is unable to load these components (the specific situation we're running into is when Object.entries is unavailable due to a call in createStyled.js in @mui/system), the error boundary seems to kick in as expected. However, within that boundary, we are also using MUI components that are subject to this same problem. I would expect that if a component within the boundary were to error in such a manner, it would simply exit the boundary and result in an uncaught error, breaking the client. However, what we're observing is that an infinite error occurs, wherein these components continue to try to render over and over again. Is the boundary catching its own error? I have a sandbox reproduction here. Please keep in mind it will break the tab - the way I've been able to observe the error is by selecting Open in New Window, copying the link, and then pasting this link into another tab with the developer console already open. There are a few ways I could mitigate this (e.g. move the boundary outside of the ThemeProvider and style separately, polyfill Object.entries to deal with this specific situation, don't use MUI in the boundary), but I feel like this is something that should be solvable, and I was wondering if anyone can tell me the very obvious thing I'm doing wrong....

I can't apply justify-content: center to div #tailwind

Please guys tell me why i cannot apply justify-content: center... It works in the navbar. Sorry for the noob question...

Best way to type React components that don't directly render the data?

What is the best to type data in props that you are fetching from trpc? The error it is giving me is the following ``` typescript: Type '(Upload & { images: Image[]; }) | null | undefined' is not assignable to type 'UploadSelect'....

How to extend trpc's default error codes?

I need to add more error codes to make error processing on the front-end easier. I tried adding a trpc.d.ts in the types folder. ```ts import { type TRPCError } from '@trpc/server'; declare module '@trpc/server' {...

Chakra UI union type is to complex

Getting this TS error when using chakra ui. Expression produces a union type that is too complex to represent.ts(2590) `import { Heading } from "@chakra-ui/react"; import React from "react";...

keep scrollbar position in Inverse Infinite scroll

I Implemented Inverse infinite scroll for a chat view It works nicely, and the query triggers when the scrollTop is in the 50px of the top of the container. if the query triggers and ends when the user is scrolled all the way to the top, the viewport stays on the top of the container, instead of staying on the current viewed chat message...

Cannot read properties of undefined (reading 'id)

Hey guys i just started with create-t3-app and setup the discord auth. but when im trying to login i get this error ``` https://next-auth.js.org/errors#jwt_session_error Cannot read properties of undefined (reading 'id')...

Hardware or IoT API

Maybe it's the wrong place to ask but out of curious: Does anyone have experience building API for hardware/IoT device? How's the process? How long did it take? How's the investment come back?

Callback Url working locally but not working in vercel deployment

Hi guys, I am using NextAuth and providing callback conditionally on the basis of query params, the callback url is working fine in localhost but not in vercel prod, Here's a gist of my code ```...