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

Tailwind compiler not working properly with Turborepo

I am using @marminge 's acme-corp as a template and I have a UI component which is pretty much exactly the one in his project, same tailwind config, same everything. However, in the nextjs project the compiler does see some styles and applies them but not all of them, see the photos added. Here are also the tailwind configurations and my repo. https://github.com/DavidIlie/laundrey UI tailwind config:...

Why differences between t3 App and tRPC starter app?

I'm relatively new to using React and quickly adopted Typescript and NextJS having been inspired by Theo, Jack Herrington and Dave Gray. I converted a blog type web using php into one using NextJS 13 and I've now done a version using the T3 App; so I'm moving forward in my learning. I must say I very much like the app version of nextjs to the pages version and so am keen to keep an eye on T3 version in case that changes to the now production ready nextjs 13. In checking versions I followed a link to the tRPC github site where I notice there's a version using nextjs, prisma, so I installed that version and the latest T3. I notice there are quite a few differences one of the most striking is the differences in directory structure of the server/ directories. Some files have the same code but are named differently, other files are different in name and content or implementation (server/api/root.ts vs server/routers/_app.ts in t3-app and trpc-prisma-starter respectively). Is T3 and tRPC only loosely connected or is tRPC simply moving faster than T3? Can anyone point me in the right direction please?...

How to invalidate routes/router in backend/webhook?

Hello, I'm making an app using T3 that uses Stripe for subscription and payment. I have made purchase and manage billing routes that all work as expected. Now, in this app there is going to be different subscription tiers and I want to allow users to upgrade/downgrade (update) their subscriptions. I've set up the webhook and tRPC routes to handle this and it's working--however, because the particular update does not send the user to an external page (like stripe portal) and back, the UI does not refresh to reflect the subscription update (once the webhook has completed its thing). Using onSuccess() in the useMutation() doesn't work, and I suspect that's because the mutation finishes well before the webhook receives the confirmation from stripe. I tried (foolishly) to use utils and api.useContext() to call the routes inside the webhook after the handler function had done its thing--but this, of course, only works in a react component. ...

what are the best alternatives for axios ?

Axios uses xhr and i searched a bit about the difference between fetch api and i found ou fetch api has some extra feature and improvements what else i can use beside axios for requests ?...

youtube videos blur effect

anyone know any libs that do this type of effect where you have a blurry version of the video playing or how we can achieve the same thing

Ui component name

anyone know where can i find a component that looks like this or at least can do the same job which is a crud on a menu

use t3 to create a nextjs frontend and backend with nextjs to have login , create user with mysql?

any example to use t3 to create my app using nextjs as frontend and option to login, add new user, etc, i got all my info in a planetscale mysql db thank you

How to send cookies and headers in app dir

Hello. I have an index page in the pages directory. I want to do the same thing but using the app dir `` const Home: NextPage<{ fallbackData: User }> = ({ fallbackData }) => { const { data } = useSwr( ${process.env.NEXT_PUBLIC_SERVER_DOMAIN}/api/v1/me`,...

Passing and Accessing Authentication Tokens from External Backend to Client-side Components in Next.

How can I pass the authentication token obtained from an external backend to client-side components in Next.js when using Next-Auth for authentication? I am currently using const session = await getServerSession(authOptions); in server-side components, but how can I access the session in client-side components? dir app/api/auth/[...nextauth] ```ts export const authOptions: NextAuthOptions = {...

any npm package to achieve something like?

I am building docs for my rest api All the docs options out there are ugly the one they are very good are paid, and i don't have money to pay for such, so i am building mine from ground up I am sure this session as seen in the image is handled by a library so can someone help me with name or something similar...

How to create or connect multiple records in prisma?

I have a model Post that has many-to-many relationship with Tag model. I want to connect a tag if it exists, else create a tag....

❌ Attempted to access a server-side environment variable on the client

Hi all, I just started a new T3 project where I would like to redirect my users from the login page based on the role that they have set in their profile. Instead of using UseEffect, I was hoping it would be faster using ServerSideProps instead, but the error I get says that I am trying to use a NODE_ENV environment variable on the client side. ...

replace [projectId] with project name

Currently my url looks like this: http://localhost:3000/projects/asdjkfb67284v. How can I replace ithe id "asdjkfb67284v" with a unique project name? For example, I want something like http://localhost:3000/projects/my-new-project....

Linter & type check in nextjs app

hi if all the linter & typecheck is already done in each PR branch with CI, do i still need to do check lint & types in master branch before deployment ? is there any edge case that i dont think of ? ...

Consumer tRPC client package from private API type?

I have a monrepo (template from t3-turbo), with a tRPC API package. I'd like to expose a router for a public SDK by simply exposing the type of that router such that a tRPC client can be created, like ```tsx // private api package export const publicRouter = createTRPCRouter({...

SKIP_ENV_VALIDATION

I have this set to 'true' in my .env but I'm still getting errors about missing envs (they aren't missing and have another question open about why) but my understanding would be that this should skip such a check and therefore should make seeing that error impossible.
Solution:
Maybe you can't set it to true but instead need to set it to 1

How to add unique username to user that signed in via provider?

What I'm trying to do: I'm trying to force user to add username after they signed in via provider. After they signed in, it'll redirect them to "/auth/new-user/". If they did not specify their username on this page, set default username "user{user.id}". In database I'll add new field "username" and make it unique....