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

Tiptap editor not updating as expected.

My tiptap editor is being passed the content value via props but when the prop updates, the content does not update. This is what my component looks like - ```...

tRPC change settings

I have 2 tRPC endpoints, one for gettings current settings and one for mutating them. The issue is: How can I to make settings editable on the frontend, like I need to wait till the user clicks the submit button, and mutate only then. So how can I do it? (I don't have any IDEAS for 2 days already)...

Wait for useQuery result

```javascript const favShop = trpc.favorite.getById.useQuery({ userId: session.data?.user?.id, shopId: coffeeShop.id, })...

Flex box full width

Any idea on what property i should change so that the text will take up the whole width? Been trying to figure it out for couple of hours. Any pointers are appreciated! https://codepen.io/spaceyyn/pen/ZEjrWRx...

Building an API for the first time

I've seen many videos where they use MongoDB and Express.js. Do you recommend any better alternative for 2022? What does Theo recommend using? I think he doesn't really stand Express.js if I'm not mistaken. I'm planning on using the t3 stack.

Problem with websocket in t3-app

Hi there, I create an app with t3-stack and I was trapped in point when I tried to implement WebSockets. I found the root cause of the problem, but I can't handle it. Example: https://github.com/kewinzaq1/t3-ws-test. It works very well, but when I have added next auth, it causes problem (the app open and closes connections non-stop) Do you have an idea, how to solve the issue?...

playing sound effects for a game on the web

should i try to implement this myself using native apis from scratch or is there a good npm package i can use?

Catching an API, how?

Hi, got access to an api that will be updated like twice a day. Im not sure how I should build this, I dont want to users spam the api when refreshing my page, and also, the backend should make the call otherwise the user would discover my api key right? How I can make like a catching using next? Anyone knows any example? Thanks!...

Running automated jobs for different discord servers via discord bot

Hi, I am implementing a feature to automatically post some content on reddit via their api using a discord bot. Now my problem is how do I schedule the time for this posting to happen so that each individual server can post without me polling the DB for the time that was set to post

Project Structure for Design System

I'm trying to build an app as a solo dev and I built a half-ass design system but not sure how to add it to the project, and curious how other people usually handle this. Inevitably whenever I'm building an app, I need to create components and then I need to view those components so Storybook becomes necessary. Should storybook be in that same project or should it be external? I'm too cheap to publish it to a private npm package, so the next option is having a monorepo (with turbo)... which is where I'm considering it right now With a monorepo, I guess I can put multiple different apps in that monorepo and leverage the same design system which is good. But if I create a mono repo, if the component styling ever changes, maybe I'll need to create a new monorepo?...

Ensure uniqueness for zod schema field

Hello! I am using react-hook-form and have the following zod object to validate the input participants: ```ts z.object({...

How is this creating an error?

```ts const createdResult = await ctx.prisma.quizResult.create({ data: { score, },...

cant access user id in router ctx

Hello, I'm using default T3 create app, and I'm trying to access user id so that I can fetch entity related to User, but my ctx type is not overwritten by Session type from next-auth.d.ts Anyone similar problem?...

Force every value of union type in an array

Let's say that I had the following union type:
type Name = "John" | "Sean" | "Theo";
type Name = "John" | "Sean" | "Theo";
If I wanted to have an array that accepted a list of those values I would do something like this...

Filedownload through tRPC

I try to get a Filedownload working through tRPC. Currently i'm using useMutation in the Frontend. If invoked, the mutation leads to a fs.readFileSync and converts it to an ascii String. I think this is not ideal since in the Frontend i use useEffect to look after the Change of the mutation to then create a blob and a link to the Blob to download the file. Ideally i would like to use fs.createReadStream to send the Data as chunks and directly download the Data instead of waiting to recieve it and then have an instant download on my hand. I'm very open to ideas since finding little Documentation for that problem....

Component cannot be used as JSX Component. Its Instance type is not a valid JSX element

Yesterday, in a separate folder, I initialized CRA + installed Material UI. Unfortunately (I think) this made me sprinkle the rest of the projects in separate folders. I think I've searched all over the internet. I used "resolutions", nothing helps.... Of course, I cloned the repository, removed node modules, installed again and so on. package.json file:...

Typesafe query keys

Hey I am curious how do you guys manage your query keys and keep track of them. In a complex application managing them and keeping track of which one to invalidate seems hard for me. Is there an option to make them somehow typesafe? I haven't found any good articles on this topic :/

Passing `initialData` to react-query from `getServerSideProps` "Text content did not match" error

I have a newsfeed-like page with infinite scroll. I'm sending a request to my Laravel backend API from getServerSideProps and passing the results to the page component with props. Then I'm passing those props to react-query's useInfiniteQuery by setting its initialData to the object I got from getServerSideProps. This works fine but when anything changes in the database, I'm getting a "Text content did not match" error because the page source generated by NextJS doesn't match whatever is rendered client-side. I've logged everything out and it goes like this: the browser is always getting the correct data. It receives correct data from getServerSideProps, then react-query fetches some data on the first render which is again, up-to-date data. ...

Prisma CreateMany with a relation (connect)

Hi everyone, in Prisma is there a way to createMany with relation - using connect i assume? Basically this a million times: I read the documentation and there doesn't seem to be "nested createMany" but i think that's not that im doing (or is it? seems like this is too common an operation to not have a create-many)......

Neovim initial setup help?

I'm new to neovim and trying to configure my setup for t3 stack web development. Any help would be great....