Theo's Typesafe Cult


Theo's Typesafe Cult

Join the community to ask questions about Theo's Typesafe Cult and get answers from other members.

Join Server

Kubernetes Exec with websockets

So i want to get shell access to my k8s pod from my frontend (using xterm.js) i see k8s node client has a exec method that i can use with streams, but that doesnt seem to work. Can anyone help ?

Prisma filtering many-to-many query on exact number of relations

I'm wondering if anyone's aware if it's possible to do a relation query in Prisma where it returns data that has an exact number of relations? Like for example: Post 1 has [tag1] Post 2 has [tag1, tag2]...

Client/Server Mutations

Hey, I'm trying to wrap my head around client vs server components in my app. Here's the basic structure I'm using: ``` {DetailsView} - type = server - grabs data from various sources ...

t3 recommendation for onboarding libraries?

Does anyone here know of any S-tier React libraries for user onboarding are? So far I've come across intro.js, and a few others which seem promising. Wondering if anyone here knows of anything better....

Retrieving metadata from uploadFiles

Is there a way to retrieve the metadata you attach to the uploadFiles config? Seems to be no way of getting it with a result.

Type Error

Please I am using typescript and anytime I try to and a new endpoint like 'imageUploader' it starts giving me error #legacy-noob-questions

Table header with `position:sticky` and have horizontal scroll in the table at the same time?

I'm building a table that on mobile, needs to have a sticky header (top of the screen), but also needs to have an scroll on X axis. I can't seem to be able to make both work together. This is the code example of what I'm trying to do: If you look at the example, the header is currently sticky, but the horizontal scroll is scrolling the entire page rather than just the table body. If we set overflow-x: auto; on the table wrapper, to limit the size of the table to the container width, then we lose the sticky behavior from the header. Does anyone know of a way to make that work? Thanks in advance!...

What does importing await import("./src/env.js") do in next.config.js?

Hi all, I'm trying to understand what this does inside of the next.config.js file. I am just trying to have this make sense to me, because when I run my app it tells me I can't run an async function outside of the async block. I am assuming that I don't need to be running the app through create-t3-app to use the env validation library. ```ts // Code for referrence /**...

How to structure this? (Prisma with MongoDB)

I'm creating a social media post management application, it features an interface to edit a design (image) and imports/exports JSON. I need to store this JSON in a database, so that we can provide a list of posts, with an option to edit them. Is there anything wrong with this: ```js model SocialContent {...

Cron job in nextjs14

Do you know an alternative to vercel for the cron job?

Multi-language support on user generated content

Hello, I'm working on an application which will be used for a company where they attract a lot of different nationalities, therefore there is a huge importance to support multiple languages. However, there will be dynamic content which administrators will be managing. So here comes my question,...
GEPGary, el Pingüino Artefacto2/20/2024

React Grid Layout automatic detection

Hi. I'm working with React Grid Layout in a responsive way where I need to compute the correct layout based on some "type" of widget. Here is an example. Input: ```typescript [ { id: "1", type: "simple-value" },...

App router tRPC client side query not working with nextjs basePath

Hi, I'm using basePath option with nextJS, which can't be avoided for my project, and it appears to be causing conflicts with the client side. When I remove the basepath, client side useQuery works perfectly. Add it back in, and it breaks....

runtime environment variables with app router

I am currently tasked with preparing our application to run in multiple deployments on different servers ran on locally which means they will need their own set of environment variables set at either runtime or build time. The issue that my team is facing is that with going with a build time set of environment variables, we no longer will have a single source of truth for our production app because there will be too many versions of it due to a singular environment variable being their local IP address. Our team is using the app router, and we came across this statement in the documentation of using getServerSide props to load in the dynamic variable, but none of us have no idea what that means. I've also seen the runtimeConfig variables, but that apparently does not work with the app router. My question is, is how would we be able to natively build once run anywhere and inject this variable at runtime, without adding another solution like s3 buckets to inject them in that way. Is there even a solution to this?...
No description

Json-server + Next.js 14 deploy to Vercel

Hey Guys, Need help with deploying Next.js 14 app with json-server to vercel. I found some article about deploying only json-server and after some try still getting 404. . Do you know how to configure vercel.json to also build next.js app front end ? Json server -

How to call tRPC on the client?

Hi, I have a new t3 app set up, however I can't seem to figure out how to call tRPC functions on the client. The template from tRPC uses server rendering, however, I am using components from NextUI, which means that my app must be client-rendered. I want to get user login info, but that is not available on the client, so I made a tRPC procedure to pass down the user object. Nowhere in the template can I find a way to call tRPC on the frontend. The T3 docs for tRPC references a utils folder with an api.ts folder present, however this doesn't exist for me. The closest I get is shared.ts, but that doesn't seem to do it....
in your client components you usually access your tRPC routers through the useQuery hook: ```ts import { api } from "~/trpc/react"; function YourUserComp() {...

Shadcn Toast not showing using useEffect

Hello. I am trying to render a shadcn toast after a redirect from a server action, but first, I need to be able to render a toast on page load. ``` export default function Page() { const { toast } = useToast(); useEffect(() => {...

Generate a dynamic zod schema for a user created form

If a user is creating a form we output this: ```{ "sections": [ {...

Not understanding best practices

Hey, I am having a bit of trouble with my app. Here is the list: 1. Any time I do any basic crud operations my entire page reloads without calling router refresh or revalidatepath (trpc fetches again on any db write) 2. I have a component where I query data and pass that data into two separate client components, one that adds an issue, and one that displays the issues. When an issue is added I don't want to router.refresh every single time but I may have to in order to get the other client component to update. 3. Realtime functionality. This is a multi-tenancy system and I need to be able to add realtime funcationality to prevent race conditions when editing. Websockets for trpc seems very complicated when I look at it, and pusher channels don't work in trpc....