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

Default Discord Auth

This my first time using T3 Stack and i am facing this issue any help

how to handle tRPC errors with mutationAsync on my react frontend?

im trying to convert this component to use tRPC mutation https://pastebin.com/4sJKCULW here is what I have so far https://pastebin.com/6Hph40Ur this is the backend route ```ts...

turbo lint env not typed

Hey people, i got an type error on local turbo run build --filter api and on vercel deployment of that app (using monorepo with 4 apps ). turbo run lint --filter api is working fine. Here the error i get: ```ts api:build: ../admin/src/server/api_calls/error_handler.ts:7:17...

Implementing route protection

I tried implementing route protection in nextjs 13.4.4 but did not work as a user signs in but is not redirected to the protected pages , below is the codes privateroute.tsx``` import { Spinner } from "@chakra-ui/react"; import { redirect, usePathname } from "next/navigation";...

How to use TRPC inside handleSubmit

Hey, trying to create a form and inside the handleSubmit make a call to a query in my router, heres the code ```function handleSubmit(e: FormEvent<HTMLFormElement>) { e.preventDefault(); ...

how do i prisma

given this model ```ts model Vote { id Int @id @default(autoincrement())...

How to see NextJS logs on Vercel/Axiom/BetterStack?

I have an next 13 app deployed with an endpoint api/dostuff/route.ts that is a simple GET method that returns a JSON and logs message using console.log() when deploying to Vercel and having the Logs page open, I only see HTTP request logs but no runtime/functions logs. I have also added integrations to both Axiom and BetterStack (Logtail) to no avail. Any ideas please?

alternative to getServerSideProps() for /app router era?

1. why is getServerSideProps() depreciated in nextjs 13.4+ ? 2. what are best practices for data fetching at request time from the server but rendering data on the client component? 2.1 => context: currently working on fetching data on the server with an API key but pushing this data to localstorage, ultimately to have it searchable in a simple search bar. let me know if my logic is wrong here or any improvements or more resources to help me better understand this topic :)...

How do I pass down the inferred type returned from tRPC data via react props?

I have a react app with tRPC. I am doing a query to fetch data of objects. But the child component <UserCard> does not have the type of the object in .map and the parent does . Can I pass down the type of the prop somehow so I can put it in the interface of IProps? ```ts import { FC } from "react" import UserCard from './components/UserCard' import { trpc } from './TrpcProvider'...

stack for simple website

Hey everyone! ๐Ÿ‘‹ I'm currently planning to build a simple, static few-page website for my friend and I'm seeking some advice on the best stack to use for this. It doesn't require any backend, just pure front-end work. While I'm pretty familiar with modern full stack development, this project forces me to focus solely on front-end technologies. An important part of this website will be a photo gallery or showcase. Given this, are there particular libraries or tools you'd recommend that excel in handling images? I'm keen to use a stack that strikes a balance between simplicity, performance, and the potential for future scalability. Looking forward to hearing your insights and experiences. Thanks in advance for your assistance! ๐Ÿ˜Š...

EditorJs readOnly toggle is not working

hello guys, i am trying to make a editor in editorjs but when i am not writing anything and trying to toggle in editor it is giving me error of holder is undefine can you please help me resolve this issue? codesandbox link:-https://codesandbox.io/s/inspiring-frost-3v84mf?file=/src/App.js:559-848...

T3 App ESLint Errors

I just created my first t3 app and am getting a ton of Unsafe assignment of an 'any' value linting errors while importing 3rd party libs and using that in my app. All types are imported from the lib so Im not sure why this would be happening. Any idea? Ill include an example of a block of code that is giving this error: ``` import { configureChains } from "wagmi"; import { publicProvider } from "wagmi/providers/public";...

Which content creator offers the best material to learn Nextjs?

I know and have a bit of experience with React and would like to learn Nextjs solidly.

How to read client env using env-nextjs

when attempting to read client variables env.ms always seem to fail on createEnv. I have defined it with NEXTPUBLIC. Am I missing something?

Loads of questions on setting up ESLint and Prettier for different IDEs

Theo's recent video about Prettier promted me to look into eslint and prettier and make sure it's set up the right way in our monorepo. I've also watched the talk from Josh Goldberg, but I'm very very confused about how to set it all up. I've shared a file with my team-mates to resolve some my confusion and to come up with solution and a .md file for our docs to explain how linting is implemented in our codebase and how to use it with VSCode or Webstorm. ...

Where in create t3 app project can I put a proxy server?

I would like to have a proxy server that runs along side my web server. This is the server I'm using: https://github.com/httptoolkit/mockttp I need to access prisma in the proxy so I can store call logs and what not. I'm a JVM dev so I'm kind of new to these JS systems sorry if this is a stupid question....

<template> and stubborn hydration warnings...

So in case you don't know, here's the default behavior of declarative shadow DOM: 1. <template shadowrootmode="open"> gets served to the client. 2. the HTML parser interprets this as shadow DOM in-place, hence removing the <template> tag. and of course...

API Layer with App Dir

Hi all, With tRPC still in limbo with the new app directory, Iโ€™m tempted to go back to GraphQL as my API layer for new projects going forward. I love tRPC for the most part, but having a backend so tightly coupled to the inner workings of Next.js means that significant changes (like the app directory) now seems risky to me. Iโ€™ve played with tRPC in Next.js 13.4 using the โ€œhacksโ€ floating around online, but none seem to have that โ€œmagicโ€ that tRPC had back in the pages directory....

Is there a way with app dir layouts to do something like "island" based pages?

I am making a dashboard where various sections are shown depending on the url. Is there a way I can maintain the wrapper around the "page" without it completely reloading?

Add token requirement to public TRPC endpoint to add to DB (create-t3-app)

I've created a public TRPC endpoint on the exampleRouter like so: ``` export const exampleRouter = createTRPCRouter({ // ... other routes create: publicProcedure...