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

Is it possible to encode tRPC data somehow?

I've built this webapp with t3 app and its mostly great - however i saw that all trpc data thats being sent from the backend can be found in the networks section of the chrome dev tools. Is there someway one can hide this - and at least make it a bit more tricky to get the data in raw form? There is no private data being sent - but access to the data in raw form is one of the largest moats of my product. Its taken a lot of time to assemble the data, and would be a shame if someone could just fetch it all using my site....

JS/TS intellisense not working

Just added typescript support to huge JS project while upgrading to webpack 5. Now everything runs fine, compiles fine and work as expected except for the vscode intellisense. If I'm inside a js file and trying to import a .tsx comonent the ctrl+space auto complete only shows .js components and not .tsx ones same happens otherway were .js components are not auto complete in .tsx files. I can manually go up and import them it works great. Types and everything work as exepcted. Heres the tsconfig. Babel is also used if that information might affect this. ```json { "compilerOptions": {...

Extending union types by interface

```typescript export declare type RouteProps = PathRouterProps | LayoutRouterProps |IndexRouteProps; interface IOwnProps extends RouteProps { hasAnyAuthorities?: string[]; }...

react hook form + headless ui

from @dingo "Ok so I have a drop-down where you can select something, I want to show the names of the options but the “value” be the database id for them. I think it should be done this way as far as I can tell because I’m just accepting the database id as a string in my zod schema (I use the same schema for my backend route for said action)" I made it a bit fancy with a generic combobox, so hopefully this helps https://codesandbox.io/p/sandbox/goofy-scooby-mg9qm7...

Vercel deployment - React Router

Every time i deploy with vercel i have to make a vercel.json file and add this ```json { "rewrites": [{ "source": "/(.*)", "destination": "/" }] }...

RHF & react-dropzone integration

I am having difficulties getting a Dropzone & RHF to work together. Right now upon submission I receive undefined and not the files. here is a somewhat scrappy codesandbox: https://codesandbox.io/s/angry-brown-v7zpgn?file=/src/App.tsx The image preview got messed up since I am using next/image in the real project....

Back/forward browser buttons download my website instead of going there

This problem is so fucking weird, I don't even know where to begin. It happens both on local and on prod. It happens on all browsers. I'm using Next 13 app dir, maybe it's a bug? Does anyone have any clue or has experience this before? It happens on the homepage only. Copy this link and paste it in your URL bar, press enter, press back, then forward. Your browser will download a file called "en". https://www.wowvalor.app/en ...

// ? ^^ TypeScript Type Hint Extension

Hey ya'll I am looking for the TS Extension that I have seen in a handful of Theos videos where you can add a comment // ? ^^ and it will tell you in the comment what the type inference is.
My searches have been inconclusive including in these questions 😢...

Accessing model relations with zod-prisma

I am using https://www.npmjs.com/package/zod-prisma which is a great package. For each of my prisma models, the package generates a file that exports two zod objects based on the model's fields. The first export is all of the "raw" (non-relational) data in the model. The second export extends the first export with all related models. I am wondering how exactly I use this second export. I don't see any examples in the docs.
The first image has the generated zod-prisma output for a "Post" model in my prisma schema. The second image is how I imagine the code would be used (but I am obviously misunderstanding something). Does this have something to do with the "z.lazy" portion of the code? Any help would be appreciated!...

Migrating DB in Dockerfile from Docs

So I have a fresh T3 app with all things enabled. I set up Docker the way it is described in the docs and it works. Only the DB migration seems to be missing from the Dockerfile and I can't quite figure out where to put it. For now I want to use sqlite inside the Docker container as well. Any pointers on how to set this up?...

Clean definition of models using Zod schemas

My Current Situation My Zod schemas are my single source of truth regarding the structure of models used in my app because they are definable in a very detailed way and can even be used for runtime validation. Since there are usually multiple versions of each model (with id, when I fetch entities from my api; without id, when i create a new one; ...) I came up with a structure like this: ```typescript...

Authentication in Websockets

In the server side, how do you make sure the client is authenticated, given that Authorisation headers are not allowed in the ws protocol (not even in the first http handshake). Analogue to that, in the client side, how do you authenticate with JWT Tokens ? Do you send the token on every web socket message ?...

What's the best way to synchronize the DB Schema when using T3 Stack with Prisma??

I'm using Docker to build my application in production and I'm unsure how to actually sync the schema with the database.

displaying sensitive card data (card number, CVV2 and PIN) to a customer

I am trying to display card details to users but the documentation of service am getting the cards from,they suggested VGS Show JavaScript library But this library is very complicated and hard to use Am I just want to displaying it plain in div etc ...

Delete PlanetScale Organization

Hey guys, I was just messing around with the PlanetScale dashboard and made a new organization as a test. I thought it would be easy enough to remove the organization after creating it, but I don't see any obvious way to do that besides deleting your whole account. Apologies if there's a simple way to do this, I just wasn't able to find it myself or online. Thanks :)

Cleaning up setter function that is a function

So I need to set my state to this: () => {}. However, if you supply () => {} to react in a setter, like so: setState(() => {}) it will instead return an empty object, since React uses that syntax to use the previous state. Is there a better way to do this than this: setState(() => () => {})?...

Tailwind component I copy and pasted is buggin

The code I copy and pasted is attached. The component is supposed to look like the first, but looks like the second instead:

React Query, How to perform infiniteScrolling with custom variables

I'm using useInfiniteQuery, I basically want to load as you scroll down, but I also want to load data as you select on different filters. The way I implement it in Desktop View is using number pagination with useQuery is as follows useQuery(["key", page, showSelectedOptions]) ...

Tailwind smooth scroll

Hello, It is probably super simple but I have a simple react app in vite, the app.tsx looks like this ...