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 generate a github action to build a preview of a pull request in nextjs?

Im looking for a way to generate preview for my nextjs project but I didnt find a way to do it that works for me.

File Uploads to Local Storage

I'm building a website for my brother's shop. They want an admin panel where they can add new product pages. I'm mostly done except for image uploads. I got it working using normal api routes but couldn't find a way to achieve it in trpc. Since all of the project is typesafe back-to-front there are a lot of warnings and errors in my file upload api. They're already paying a hosting company for storage so I don't want to upload to S3, public folder in the server is quite ok. Is there a template o...

Change ctx.session.user values to include new ones? Bad idea?

Right now when using ctx.session.user I get a few default options that come with t3-app. .id, .name?, .image? and .email?. Is there a way to change this to include new values? I can't find an obvious spot or I am being silly....
Solution:
You can do this in your auth.ts where the next-auth module is extended. Make sure you don't add anything sensitive when extending. ``` import type { Role } from "@prisma/client"; import { DefaultSession } from "next-auth"; ...

Next13 app-router: How to get request headers on client page comp?

All my pages are client components because I want to use page transitions and need to wrap them in a provider from framer-motion. But I also now need request headers on specific pages. How would you do that? Any ideas?

Can i send a file from trcp router?

I want to send a xlxs/csv file to FE (expo). Can i do this like expressJs? or do i need to first uplaod to s3 then give it's uploaded URL?

useSession has an empty user object {}

When using the useSession hook, session.data contains { user: {}, expires: '2023-06-30T20:30:42.181Z' } this is my auth options: ```ts declare module 'next-auth' {...

TypeSafe external API ?

I am currently communicating with an external API and after falling in love with TRPC, I would like to make this communication with the external API as TypeSafe as possible as well. I am however kinda failing in the basics of figuring out how to return different types, depending on the inputs of my function call. Example, i can call the same endpoint on my external API with the parameter "withItems", which kinda ends up mimicking the Prisma version of "include" - but unlike the great work Prisma has done - I am unsure how to detect if the programmer (in this case - mostly me), has passed this parameter to my API call function and return a different typesafe-type. I therefore always end up returning a mixed result (one type - or the other)....

Want to request only half of the audio file but not working

i request an audio file from my server and stream it to the browser .. on the browser i make a request to get only half of the audio file stream (i am doing total size of the file / 2 bytes) using the range header in request. the response header is something like this
Content-Range: bytes 0-5510814/11021629;
Content-Range: bytes 0-5510814/11021629;
...

How is realtime DB syncing accomplished without Firestore/Supabase?

Hi! I've been working with Firestore for a long time now and gotten very used to the realtime db syncing functionality it provides, although I'm trying to move away from Firestore now. Supabase is an obvious alternative because it also provides realtime functionality, but I'm wondering if there's any other way DB syncing might be accomplished (say, if I'm using PlanetScale). If I'm using Planetscale as a DB and, say, viewing data from the database on the webapp, and a different user updates the data, is there a way for me to receive the update on my end (without refreshing)? Thanks!...

Drag and drop library recommendation?

Whats the community-favorite option right now? I saw that react-beautiful-dnd isn't being maintained anymore. Not sure the best route to go.

tRPC invalid_type error with Clerk

Hi, I have this weird issue I've been trying to resolve for a while now. This is the error in browser console. Here is my back-end endpoint:...

Save selected option on dropdown

Hii, I have a dropdown list that is being made from an array and a Save button. When I click the save button I want to save only the selected dropdown option, but I am saving all the array from the dropdown. Can someone help me please?

End-to-end testing tools, Suggestions

Hey everyone! 😄 I hope you're all doing well. 👋 I have a couple of questions for you, and I'd really appreciate your input! 🙏...

N Nested Relations

Hi im having trouble dealing with nested includes. I have a Comment and reply structure and replies are type Comments. Each Comment can have N replies and each reply(Comment type) can also have N replies. Prisma currently does not include support for this and I have N levels so I can't nest includes an unknown number of times. Right now I am trying a raw query but I suck at SQL and this is as far as i got. ```sql WITH RECURSIVE comment_replies AS ( SELECT "Comment".id, "Comment".content...

A question on procedure design.

I would like to know if it is best to try combine procedures or keep them separated. I don't want to repeat myself but am not sure regarding best practices for this types of thing. Would appreciate if someone could push me in the right direction. Something like this for bookmarks on 2 different post types ...

Migrating to supabase from create-t3-turbo

Hey guys! I'm migrating a create-t3-turbo app to the supabase create-t3-turbo template, and I'm a bit confused about how you're supposed to go about adding the Profile model in the Prisma schema to the DB (although I renamed it to User), I saw a blog post about adding it using supabase triggers, but I'm not sure if that's the way you intended for people to do it. Any ideas on how to go about this or am I missing something?

System dark mode not detected when using darkMode: "media" in tailwind.config.ts

Hello! I am building a simple starter project using Tailwind and shadcn-ui components. I want the webapp to display dark mode/light mode depending on the system preference. My understanding from this documentation (https://tailwindcss.com/docs/dark-mode) is that if I set darkMode: "media" in tailwind.config.ts, then the app will automatically detect the system preference of dark mode/light mode. However, despite this modification there is no effect in the webapp when switching dark/light mode on my OS. Am I missing some functionality here? All I've done is install shadcn-ui components with the CLI and use them to build a simple page layout (with some help from the examples in the documentation). The repo link is: https://github.com/hcs-t4sg/starter-project-2023-core...

What is wrapping a next server action in startTransition doing?

This was brought up in another question. I came up with the following explination, however this is just from reverse engineering it in my head on the fly, so i have no idea if im on the right track or not. if you arent updating the client, you dont need to use startTransition (per docs). Updating the client includes doing any of redirect, revalidatePath, or revalidateTag. If we ARE updating state, and therefore updating the client, this inherently means we are manipulating the client state in some way, since our UI is changing after the server action is complete. In react, we use startTransition to start non-blocking state updates, so in theory, if you use a server action & dont wrap it in startTransition, your UI would completely block untill the server action is done. Since this is not what we want, we tell react to let the client continue to update and move around while the server is processing the request by wrapping it in the startTransition....

Can I call tRPC procedure inside another procedure?

Something like this: ```js export const mainRouter = createTRPCRouter({ create: privateProcedure
.mutation(async ({ ctx }) => {...