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 redirect using trpc nextjs base on db query?

This seems less intuitive than it should've. I'm trying to check if a user is new, if it is then I redirect them to a new page to setup their profile. So far I've tried to do it with react, trpc, middleware, it doesn't seem to work. the problem with react is I can't get the current session using clerk with useAuth, and I'd like to redirect before the page starts rendering,....

Best way to fetch external api with variable & env_variable body data?

Hiya, I'm struggling on this and would love some help from one of my favorite communities ❤️ So I have a contact form that upon submission should send a fetch to an external api with the form data and an api_key that I currently have stored in an env variable. Currently I have tried different routes using useQuery, fetch, axios, & trpc....

Order of request hitting

What is the order of files/functions getting hit by an incoming request? Of getServerSideProps, _app.tsx, _document.tsx, and the content of a page (index.tsx)?

Tailwind seemingly not working randomly when deployed.

For some reason, when I deploy to vercel, some of my tailwind is simply not applying. For example below screenshot, you can see that I have set property w-56 which isn't being applied when deployed to vercel, however, in development it looks fine. Same applies for the hover text....

nextjs 12 (and below) same getServerSideProps function in multiple routes

is there a way to call the exact same getServerSideProps function in multiple (nested) routes? I want to check if the current route/page matches some path regex, and if it does, call the getServerSideProps function. Else, do nothing....

Does a Create-T3-App Next project use the Rust compiler or Babel

Kind of a nooby question but I searched Google, Create-T3-App docs and the questions channel and found nothing. This will determine how I set up Jest in my C-T3-A projects. Thank you in advance!

T3 stack + Python Script?

I'm developing a web app that basically takes a PDF, processes the text, calls ChatGPT API and outputs a table for the user to edit, drag/drop rows, etc.. I've set up the project using T3 stack & deploying on Vercel however my PDF processing script is in Python and it takes as input a PDF and returns JSON. I'm not sure what the best way to integrate this Python script whether to spin up a separate lambda for it or integrate it on the same lambda (and if so how do I integrate a Python script into...

Handle many-to-many relations in Prisma with MySQL

I am struggling with creating a schema that works in Prisma with MySQL. I've read an article at prisma.io regarding the subject, but couldn't figure out how to solve my own problem. Here's the schema: ```...
Solution:
you use @relation and add id when you have one to one or one to many

TRPC context in RSC

I wanted to use trpc in React server components. I found the approach with the createCaller() method. But there is one problem, for the auth I have to set the headers (cookies), but in the app router the cookies() and the headers() function is only read-only. Is there any good solution for this problem?

where to start making my site accessible

I have been working on my site for a while and I’m looking into making it accessible. What are the most important things to do / ensure? So far all I’ve done is add aria labels to my icon buttons.

React Native Guidelines

Anything you folks think is missing (or should be deleted) from this list for React Native guidelines? - Project Structure - Compile Time Validation - TypeScript - Runtime Validation - Zod...

tons of eslint errors in vercel builds that don’t show up in dev

I haven’t changed the default eslint config file that comes out the box with create-t3-app. Whenever I deploy to vercel, the builds always exit with many @typescript-eslint/… errors that I just don’t see anywhere during development. Anyone know how to fix this so that these errors show up during development and on local host?

react-hook-form, how to set values, which dosent come from input

silly question, when i put postId as input value it works, i tried to make object too but dosent work. those 2 options dosent work, only option that work for me when i put input value postIdQuery, is there better way? ```ts const onSubmit = (values: CreateParentCommentInput) => { ...

Looking for a framework most well-suited for animations/transitions.

I use React and I don't like its support for animations. Code like <div>{componentIsEnabled && <Component/>}</div> makes it hard to animate the removal of <Component/>, because when componentIsEnabled becomes false the <Component/> doesn't exist anymore. There are libraries which fix that but I didn't like any of the APIs. I just want a built-in (built into the core UI framework) and comfortable way of doing animations. I want to build a UI for my game (no, the actual game won't be rendered in the DOM) which will include option menus, inventory menus etc....

tRPC throwing UNAUTHORIZED after logging in

After I'm logging in using my custom sign-in page (next-auth), I get a redirect to /dashboard. But there, all my tRPC queries are failing and throwing UNAUTHORIZED error. After I simply reload the page everything seems to be working, why is it so? Here's the code: https://github.com/Bartek532/rssmarkable...

how to override extended eslint config

hi i am using antfu's eslint config (https://github.com/antfu/eslint-config). here's my .eslintrc.cjs ```js process.env.ESLINT_TSCONFIG = 'tsconfig.json' /** @type {import("eslint").Linter.Config} */...
Solution:
looks like his config isn't properly configured

cache TRPC api query

Im building an api that returns the frequency of certain values from a mySQL database. These values dont get updated to often and would therefore like to cache the results somehow. Any tips on how i could do this best? Thought of simply using getStaticProps - but i need the data on a page that is server rendered so that option does not work....

Deployed to Vercel but getting this error

I deployed to Vercel but It states that /app/register/app.tsx is not a module. How can I solve it

How do you do safe rollouts of new features?

Looking to discuss and have everyone share their opinions on the topic. I mostly have used feature flags for toggling features in production. However, Vercel’s instant rollback feature looks very promising for smaller projects. Instead of having to flag something, I can just revert if something goes wrong. How does everyone else perform their feature rollouts in a safe manner?...

Using Clerk's getAuth() helper causes withClerkMiddleware to be unrecognized

Hi there, Recently, I was following Theo's T3 stack tutorial on YouTube. When attempting to use the Clerk getAuth() helper function in the trpc.ts file of the T3 stack application, an error is thrown stating that the withClerkMiddleware function must be added to the Next.js middleware.ts file. Prior to using the getAuth() helper function, Clerk was working fine and recognized that withClerkMiddleware had already been added to the middleware.ts file. Steps to Reproduce:...