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

Public folder from create-t3-app trpc router?

My google-fu is failing me! Can I access the content in the public folder from the API? I tried referencing it the way I would on the frontend ("/images/file/path.svg") and it doesn't seem to be able to see the files. I know I could append the domain, but I would like to access the files directly rather than over http....

best way to create a mobile experience for a webapp

I've been building a webapp for the last few months using create-t3-app with tailwind. The app is getting pretty big (codewise) at this point and its becoming more and more obvious that i need a real mobile experience. As far as I can tell there are 2 ways to do this. 1) Make all my components responsive so the same webapp works for all screen sizes. 2) Make a separate set of mobile components and create separate pages that use these versions. ...

[Solved] Conditional types

I was reading the TS docs but I can't seem to grasp this concept very well. I have the following interface: ```ts...

Can anyone share an example trpc mutation based onSubmit values from a form

I keep getting Hooks can only be called from React component.

Type Error while building

Hi guys, I am getting a type error of module not found, when I am building my next application: https://github.com/amantulsyan35/context can someone please help me with the issue here?...

data becomes undefined when it is not undefined

I have a component which has some props. When I console log the props they work fine but when I access any fields of the props it becomes undefined...

School project, modeling

So basically I've tasked myself with making an it solution to Dunder Mifflin, and one of the things I need to do is a project where employees can keep track of stock, here it's ofc. paper, but like how would I model storing paper poohheh like 1 row for each paper, 1 row for each pallet, 1 table, like wtf idk why but I hate my own idea now lol, I'm just going to use sqlite for this shit

best way to implement a font picker

I would like to allow my users to select a font using a google docs / microsoft word-like dropdown. Ideally I would like users to be able to see the font in the dropdown menu options itself. I would then like to be able to use that font in other places in my app. Things I've looked into: - I have found a few packages like https://github.com/samuelmeuli/font-picker-react but they dont seem to be maintained anymore and their API doesn't really fit with my use case. This project requires me to put an apply-font class on a div to use that font for all its children while rendering the dropdown. I would like to be able to use this font without the dropdown after the user has selected and saved their choice....

[webpack.cache.PackFileCacheStrategy] Caching failed for pack Error Cannot find module

Hello! I'm getting a warning on npm run dev - 1. None of the items in my require stack are part of my own code. Where should i look to fix this? 2. i thought we're already using SWC... why is webpack showing up? ...

NextAuth wrong error redirect

hey 👋 Each time there is an error, I get redirected back to the login page instead of the error page. Any ideas why? Example after an error: http://localhost:3000/auth/login?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fauth%2Flinked-accounts&error=OAuthAccountNotLinked...

Best Practices for 3rd party api call

In my case I have a call to a goecode endpoint to turn and address to coordinates.
But I will have some cloudinary call I will want to make soon. Would it be best to funnel that call through trpc and use node fetch to make the call?...

How do apps Like Notion handle updating the text content so often?

What I mean is, you can click into a field, type something, click out, and it's automatically saved. I'd like to implement something like this in my own App and am wondering how is this done? Is an API request sent to the backend every time a user clicks out of the field?

Making a form with Zod

I have made my form, its all styled and functional (currently logs the data). I just cant figure out how to display the image as an image within the data.

next image sizing & layout recommendations

I have a small part of my website where I want an image. The code is roughly: ```ts <div className="flex flex-col gap-5"> <div className="flex gap-4 w-full h-full items-center "> <div className="relative h-20 w-20">...

React Query Cache - Does this come with trpc T3 stack?

Does anyone know how to cache data fetched via a trpc route? Typically I'd wrap my entire application in a React QueryClientProvider, but idk if that's how you'd do this in a T3 app....

how to use react query in component that takes id and you render it multiple times

i created a component that fetches data from api and i gave it id as parameter that i use in react query then i render 5 components with different ids and they all end up rendering like they had first id

Stack to build a small game

Hello! As Theo says all the time. We are builders and the best way to get better is by building more stuff. I want to keep practicing building fullstack projects so I decided to create a small game, but I have a few questions if anyone can help: I want the game to be pretty simple since I've done only two small fullstack projects (I only do FE at my job). The idea is to make a game for my friends to play (10 players give or take) in which you have a character with some stats like an RPG and you can decide to fight a couple of times a day. The fights auto resolve and you should be able to fight NPCs or other players. To avoid snowballing the fights would be somewhat random but with more chance to win the better your level / gear is. My question is: How do you think I should approach this? ...

data fetching, loading state, loading skeletons

Hello currently inside my T3 app I fetch the data from external api on the backend and then pass query it inside Homepage.
const { data: recentData } = trpc.recent.getRecent.useQuery();
const { data: trendingData } = trpc.trending.getTrending.useQuery();
const { data: recentData } = trpc.recent.getRecent.useQuery();
const { data: trendingData } = trpc.trending.getTrending.useQuery();
something like that. Then If there is no data, the user sees a loader. Is this the correct approach or should I instead query the data inside specific components that need it? ...

TRPC linting error

im getting this linting error. my trpc implementation is exactry like the docs