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

NextAuth Callbacks

I'm currently trying to implement my nextauth instance in an ios app, but im having some trouble implementing callbacks that pass the session id and user id/token back to the app. I'm currently just using the credentials authOption, but if anyone could point me in the right direction that would be great. Thanks! ```ts export const authOptions: NextAuthOptions = { callbacks: {...

Next.js/tRPC Prefetch w/ HydrateClient "Error occurred prerendering page"

Hello all, I'm trying to get to the bottom of an issue I'm having using prefetching with HydrateClient. I'm using the t3 stack, so I believe that HydrateClient is a helper function wrapping tRPC helpers.dehydrate()... When I run this code with pnpm dev, it works fine, but when I go to pnpm build, I am getting ``` Error occurred prerendering page "/queue". Read more: https://nextjs.org/docs/messages/prerender-error...
Solution:
I FIXED IT! Stupid mistake, wasn't marking the root page function as async... i.e: Broken: ```ts export default function QueuePage() {...

storybook like playground

Hey, I'm creating shared react components library. It will be used by couple of frontend apps in my project. I want developers to preview and play with this component library. It's there something newer or better than storybook for this?

Do I need `HydrateClient` on every Next.js route?

I'm trying t3 stack for first time, and I noticed that in Home route component, there's a trpc prefetch and a HydrateClient component wrapping all the elements. I assume that is supposed to make streaming pending prefetches to work, right? How can abstract that? For example avoiding repeating HydrateClient every time I have a prefetch. And also even avoiding the prefetch call at all by configuring something at the useQuery level?...

Vertical scroll on element with dynamic height

I am using tailwind with reactJS. I am trying to create an element which fills the remaining space within its parent vertically, this element will then have children which should be able to overflow - in which case the parent should be scrollable. Currently I am having trouble ensuring that the parent fills the remaining space - I am using a primarily a combination of flex flex-col flex-grow to make the components fill as much of the vertical space as I would like. However - right now I find that if I set the 'scrollable parent' element to flex-grow - it will initially fill the desired amount of vertical space - however, when its children come to the point where they overflow it vertically (at which point i wish to scroll) the size of the parent container simply extends to accomodate its children. How is it that people typically go about achieving this type of effect, e.g fill the rest of the remaining vertical height and make that section scrollable....
No description

I got a express + sequelize app that suddenly stops responding

The only way I have is to restart the app. I have tried this but no stacktrace is generated https://blog.apify.com/how-to-debug-an-infinite-loop-in-node-js-production-code/ What options do I have to figure out whats going on?...
Solution:
tracing, with axiom or grafana

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

Has anyone converted a React TSX project to JSX? I am trying to do so and am wondering how. The reason why I am doing this is because encountered an error while building, ``` FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory...

Difference between SSR with streaming and new PPR

So today in react (often achieved through nextjs) we can use SSR to stream components onto the page and show a fallback while data is being fetched. I’m referring to the main concept in this explanation by Dan. (https://github.com/reactwg/react-18/discussions/37) Server components are not even a part of this discussion - react can render a page on the server and use suspense to stream in pieces that may take longer. The alternative to this is just waiting for all of the page to be rendered after data is fetched which could result in a delay. Now in NextJS, we have the idea of static and dynamic rendering. Static rendering happens at build time (or incrementally), and renders HTML that is served instantly from a CDN. No rendering is required at request time if a page is static. Dynamic rendering happens if any part of a page opts into dynamic behavior. So the page gets rendered every time a request comes in, and the user could be left waiting a while. If we go back to suspense, this helps set boundaries that can stream in when they are ready. Static parts of the dynamic page will still need to be rendered, right?...

React Native Search bar options

I'm trying to add a search Bar into my react native app, the only one that looks native is the one from React Native Elements but it looks bad, whats the go to option? or do i just make one I don't want to use the one from React Navigation because it removes the header when focused ...
No description

Override error in React tutorial on the add userId to the database step

Before adding the userId to the schema the line
await db.insert(images).values({
await db.insert(images).values({
presents no problems. Once I add userId to the schema it presents the expected error. Once I push the new schema to the db this error presents: ```No overload matches this call. Overload 1 of 2, '(value: { name: string | SQL<unknown> | Placeholder<string, any>; url: string | SQL<unknown> | Placeholder<string, any>; userId: string | SQL<unknown> | Placeholder<string, any>; id?: number | ... 2 more ... | undefined; createdAt?: SQL<...> | ... 2 more ... | undefined; updatedAt?: SQL<...> | ... 3 more ... | undefined; }): PgInsertBase<...>', gave the following error....
Solution:
Coercing it with the following removes the problem and in theory should be fine because auth() is called in the middleware and the userId should only be empty if they fail auth correct?
userId: `${metadata.userId}`,
userId: `${metadata.userId}`,
...

Getting url on uploadComplete and choosing file name on upload.

How do I get the file url either on the server or client and how do I choose the name of the file when uploading (e.x. add and id to the end). Thanks...

best way to create a scale-able task system in the backend

anyone worked on a big backend project i wanted to ask i have a webapp that the user can start tasks and wait until the tasks are done the tasks might fail if they did they should try to continue from where they left the app is made using nextjs and i am not sure how to structure the backend i am using postgres as a db the tasks running in the background are just some prompts from ChatGPT...

Deploying Expressjs to Vercel.

Hi! I already have app with turborepo (its monorepo) and i want to deploy it on the Vercel. They problem is that i can deploy my frontend (in vue) when i point directly to the apps/frontend directory, but i cannot do the same with my apps/backend, its always 404 not found and idk how to handle that.. (Also as its API i've tried to check this url with postman but it responded with same results 'not found'...) Thats my repo: https://github.com/Bartholomeas/work-scraper I have vercel.json in apps/backend which is redirecting everything to /api (because i found that vercel needs to have everything on /api route) like here:...
No description

Controller is already closed error

My production logs are filled with this error ``` TypeError [ERR_INVALID_STATE]: Invalid state: Controller is already closed at ReadableStreamDefaultController.enqueue (node:internal/webstreams/readablestream:1074:13) at /app/.next/server/app/api/trpc/[trpc]/route.js:5:31811...

Best way to create a polling system?

Hey, I am working on a voting system for a big streamer so that they can poll operators from their chat. I am currently using upstash redis and want to do realtime fetching but can't figure it out. Is this the best way to create a system like this? Should I use an additional backend like fastify? Currently I am storing the results from the chat into a hashed table. Right now im just hetting the data and parsing it and typing it.
No description

Theo's browser

Hi, I saw in one of Theo videos that he have option in browser that allow him to have 2 tabs opened at once in one window, how I can do similar thing in firefox? (sorry if that's stupid question)

Trouble Setting Up Environment From Scratch

Hey everyone, Im new to T3 stack and wondering what I may be missing to have everything setup on my end correctly. When I run through creating a new T3 app from scratch, Im running into some errors that makes it seem there are some pieces that arent connected properly. For more context, heres a loom video that shows what Im running into:...

SVG brand logo website

Hey does anyone know the website that theo uses to get all brand logo svgs? Thanks

anyone running into failed to connect to daemon? i cant run pnpm dev

```21/07/24 10:57:18] ➜ sol-eats git:(main) ✗ pnpm dev
create-t3-turbo@ dev /Users/daniel/Documents/Repos/sol-eats turbo watch dev
...