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

Best practice for Admin dashboard?

I want to make an admin special page, but on the client side, I didn't know how to check if the user is admin, how can I do it? Should I check if the id from ctx is admin with getServerSideProps or should I check with trpc query? I want to do something like layout

Pass different objects into same prop - TS error

Is it allowed to pass objects of different structure into the same prop, conditionally? Something like this `...

NextJS SSR on nested routes

hi i have this case/page where i need SSR for opengraph metatags which is dynamic for each page let say i have routes /[profileName] and /[profileName]/achievement im hitting getProfile in SSR block inside [profileName].tsx, ...

Expo-Camera Bug Affecting Android only

Hey everyone, i'm having an issue with expo-camera with android only. Can anyone help with the distortion at the bottom and top of the photo. Everything works on IOS as expected. ...

Run trpc query...on first render only!

I have been wasting hours and HOURS trying to figure out how to call a trpc query on the first render only. I am querying data that populates a drop down select input. When an option is selected, my state updates and the component re-renders which calls the data again. I don't want to call the data again. ...

How to check if user has enabled JS on page?

In NextJs / React how can I check if the user has enabled JS and display some kind of message or maybe even hide the whole site until it's enabled? I tried ``` <noscript>You need to enabled JavaScript to use this site.</noscript>...

With pnpm (create-t3-turbo), packages are installed on the wrong project folder

As I'm building out my app in a monorepo using create-t3-turbo, sometimes packages I install are installed on the project-specific node_modules vs the root node_modules. Some packages might only be used in that one project, so I get that, but now even @tanstack/react-query and others are being installed in both the root and the project folders. Questions:...

Any good suggestions for storing user images, for supporting max 10k images for the whole website.

I am not expecting around 1000, to be optimistic it might go till 10k. Is it a good idea to store them in firebase cloud store, can anyone who worked on any user uploaded pictures( mostly products of e-commerce store ), share insights or potential problems,

trying to add role based authentication

I added a role parameter to my User schema, but it's still not catching it. Any one know why this may be?

ZSH Extension?

Which extension does Theo use to get this system info footer inside terminal?

How to send email in trpc

how do i send a email with a trpc mutation using gmail?

Does anyone here use graphQL + trpc?

At first this might seem like a silly question considering they're always positioned as pick one or the other, but in our system we use graphql for some greenfield reads and REST for some GETS + writes Our backend is in django, and we mostly use nextJS for its frontend. Was wondering if the decision to combine the 2 would sound dumb since we could still benefit from parsing the data we get back from graphql/our django backend with zod + get "E2E types" in the FE...

Does anyone know of any bugs that makes the type inference to break?

I was working on a project, it was using turbo repo. I updated the systems typescript version to 4.9.4, it was already being used in some other similar project. And after a restart my typings went completely shit. What happens is it would show the the correct typings when I access the types in same file, but as soon as I try to access the properties on another file, typings break and it says that the type which was infered correctly is not any.

Example files missing, referenced in folder structure docs.

From https://create.t3.gg/en/folder-structure#srcpagesapi
src/pages/api The api folder contains all the API routes of the Next.js application. The examples.ts file contains an example of a route that uses the Next.js API route feature along with Prisma. The restricted.ts file contains an example of a route that uses the Next.js API route feature and is protected by NextAuth.js....

Name CSS Import

Hey, I'm doing dark/light mode switching for code blocks using HighlightJS and I want to name the imported stylesheet so that I can toggle it on / off depending on if it's dark mode. ```typescript import "highlight.js/styles/github-dark.css"; import "highlight.js/styles/github.css";...

Next/Script

I can get the vod to play on my website but i can not figure out how to use the functions in the twitch docs. I have similar code to the docs and the function part player.setVolume(0.5); does not work my stream starts off muted. https://dev.twitch.tv/docs/embed/video-and-clips/#interactive-frames-for-live-streams-and-vods https://dev.twitch.tv/docs/embed/everything/#programmatic-access ...

Zod date string validation

Someone that knows how I can use datetime string validation in zod but only require the year month and day and not the time? ```ts const datetime = z.string().datetime();...

How can i make static array from react query

i have db with table teams, teams have field coins , i want to fetch teams and create an array of them that is sorted by coins but i dont want it to update , so if i have a team with 10 coins and team with 20 coins ,i want the team with 10 coins to be first in array always even if team with 20 coins spends everything

Query random rows in mysql DB with prisma.

I'm trying to query random rows in a mysql db with prisma. My first solution was to run a raw query, like this. const randomOrd = await ctx.prisma .$queryRawSELECT * FROM Ord ORDER BY RAND() LIMIT ${number};;...

using prisma with next 13 app dir

I have just started exploring prisma and next 13. I have read on the Prisma official website, "React Server Components are currently an experimental feature and are not yet ready for production usage! We are collaborating with the React team to ensure that the react-prisma package will be kept up-to-date". But, I can import the PrismaClient from @prisma/client in the page.ts(without 'use client'; so I hope it's a server component) and something like const posts= await prisma.posts.findMany() works. I might need to understand a lot of concepts better here. Is this the right way to use prisma inside the next 13 app directory. This way, I can skip rest/graphql/trpc for a significant portion of the web app(and also improve SEO/lighthouse metrics I guess)....