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

Docker is failing on openssl1.1-compat

I am trying to build my t3 project, but I get these errors ``` #8 2.590 ERROR: unable to select packages: #8 2.619 openssl1.1-compat (no such package): #8 2.619 required by: world[openssl1.1-compat]"...

dynamic segment in next

hi, im trying to create a dynamic route in next with a sub page but i keep getting a 404. See picures provided. What am i doing wrong?

Angular - What about a t3 stack for the angular side

Don' be triggered by this post but... it would be cool to implement this type of “stack” not only for react (t3) and vue ecosystems (sidebase) but even for angular, and it could work! 🧐🧐 Maybe someday a lot of developers could have multiple choices using this type of stacks, even if they use different frameworks or libraries for the frontend side, to use most of the full type safe ecosystem...

Is it possible to use string interp for width in tailwind

is it possible to use $w-[${x.width}px] in tailwind?

Best way to implement a cart?

I've implemented a cart using jotai's atomWithStorage to save the items in lcoalStorage, but I was wondering if I should store the cart in the server instead? In this specific app only logged in users can access the store. Are there other better ways of implementing a cart?...

AuthSession in T3 boiler plate not working when fetching data in SSG with tRPC

So when fetching data in getStaticProps, the docs instruct to use the SSG headers https://trpc.io/docs/ssg. Now doing this causes the file in server/common/get-server-auth-session to throw errors because the context will be undefined. What's the way to go around this

How to use useQuery...?

Uber noob question here, I seem to have a misunderstanding of useQuery. Here is all im trying to do - use it to return an array from my database, console log the data. Here is my component, when it loads it doesn't log anything (because getAllCars.data hasn't resolved yet?), as if I need to await the data (what is the pattern for this in TRPC?). If I wasn't using TRPC, I would have the cars data set to a state so I can put the loop inside a useEffect with cars state as a dependancy, however I understand the TRPC patterns are different. Looking at the useQuery docs, the useQuery example doesn't help. The data just seems to be there? Anyway the solution is presumably. very simple, hoping someone can point me in the right direction...

Custom field name or rename field in model for NextAuth.js (Prisma adapter)

Hey! I'm not a fan of fields named id, but rather like to have speaking names like userId or postId, which makes the code easier to read imo. I'm using the Prisma adapter and added all needed models to my schema. In the User model, I would like to use a field name userId instead of id. Is this possible?...

React is saying a function can not be passed as a child

Hello, I am trying to render a list of components on one of my pages, however when doing so I am getting the following error: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it....

Why should I use React Table ?

I just watched this video https://www.youtube.com/watch?v=aFCxPo0kOGk however even after watching it and reading the docs I still don't understand... Why should I use RT instead of just copying the source code of a table from some Tailwind component library and just changing the header and row data? Is it simplicity, rendering efficiency, or smth else?...

Typescript array typing

Hey I was wondering why typescript doesn't indicate that the name here is possibly undefined when the arr is empty? ```ts type T = { name: string }[]; const arr: T = [];...

NextAuth OAUTH_CALLBACK_ERROR - checks.state argument is missing

Getting this stacktrace after logging in via google provider on nextauth, as soon as I get redirected. Weirdly enough I am logged in though but when trying to access token it's null, and if I refresh page i'm logged out again. What is this and how can I debug this?

tRPC prisma query type checking.

I'm wondering what the best practice is for type checking a prisma query in a tRPC function. I've been using input validation with zod for passing parameters into the functions but am not sure how to check types for a query which i then want to perform logic onto. `bookingsPerDate: protectedProcedure.query(async ({ ctx }) => { const bookings = await ctx.prisma.bookings.findMany({}); ...

how to get id from headlessui combobox?

i want to take the comic id so i can refer it to tRPC mutation but im still cant figure out the headlessui flow

How to fix session info re-rendering on page reload

Hey all, I use t3 for this app and I wonder if there is a way to fix the text re-rendering whenever i refresh the page, especially for the login/logout side - this uses trpc, next-auth and next 13

post system design question

I am aiming to build a scalable infrastructure (for fun) for a user posting system where timelines exist, such as a feed system. Feeds would include posts of a users followings. Anyways, the current approach is this. 1. UserA follows UserB...

Prevent DesktopHeader from loading on network tab

Hi there, I'm using next/dynamic to dynamically import the header for mobile or desktop. But I have an issue: If I take a look at the network tab (picture below), I can see that it loads both of them even if I'm doing conditional rendering. How would you make it so that the DesktopHeader never appears on the chrome network tab when you're on mobile? As a sidenote if I use the desktop view only the DesktopHeader appears in the network tab (as it should). Seems like the issue is on mobile only as...

How to make a curve in CSS

Is there any way I could make a curve like this. In the reference site they just used a png but that uses more bandwidth

trying to access req and res in trpc query

I need to access res to set a header. I tried accessing req and res from ctx but only session and prisma are available. Any ideas? I tried looking it up but didn't really get anywhere ```ts export const filesRouter = router({...