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

"Unsafe call of an `any` typed value." but everything is typed

I'm using this exact same pattern in 10 other places in my app, but for some reason it is really mad here, even though everything is typed. create even shows on the auto completion. I must be missing something silly

Debugging TRPC issues?

Am I the only one having trouble debugging trpc code? I am talking specifically about endpoints. I can't seem to mouse over variables / objects and it's quite difficult to debug. I am running the debugger with these options: ```json { "name": "Next.js: debug full stack",...

Invalidate query not working

I'd like to invalidate my query but it doesn't seem to be working so I'm thinking I'll pass refetch as a prop and just retrigger the query. This is what my query looks like in one component: ```...

getServerSideProps() fetches NextAuth session put fails to pass props to Next.js page components

I'm building a note-taking app with ct3a, currently working on implementing basic auth features in the UI. Here's my GitHub repo - the relevant code can be found in the auth branch: https://github.com/ChromeUniverse/luccanotes/tree/auth I'm trying to call getServerSideProps() in /pages/notes/index.tsx to fetch my NextAuth session with ct3a's getServerAuthSession() wrapper and pass it as a prop to the main NotesPage() page component. Next.js appears to be fetching the auth session properly - I confirm this through the serialized __NEXT_DATA__ in the browser - but for reason the session won't get passed down into the main page component. Server-side console logs also confirm this: ...

react query not updating the `error` field on errors

I'm new to using react query and i'm using axios to fetch an REST API, the api is throwing a 4xx error but the error field of useQuery() is not updating, the same happens to isError isLoading stays true, so the application gets stuck on loading state forever. I've tried setting retry option to false or 0 but still doesn't work...

what's happening to tailwind's lsp client?

yesterday I left my code working, but today I don't know what is happening with tailwind, I tried updating npm packages and everything. this is the piece of code where I struggled to get tailwind to work: (simplified version) ```js //......

infinite streaming response with tRPC?

I want to create a tRPC endpoint which calls to the docker log API (https://docs.docker.com/engine/api/v1.41/#tag/Container/operation/ContainerLogs). This API can return an infinite stream of data (when setting follow=true) to send data in real time when there's a new log. I am not sure how to send back this streaming data to the client side so that the app can display the logs in real time. I am aware of the existence of tRPC subscription (https://trpc.io/docs/subscriptions) and it seems like that will be what i need, but I don't know how to connect the pieces together for my case. Thank you so much in advance....

tRPC + useSWR for fetching data from Shopify API ?

I'm currently in the process of building a custom Shopify Store running with the T3 stack. I'm using primarily tRPC in order to build most of my API's for fetching data from Shopify's API I believe that the use of useSWR and tRPC together could potentially boost the performance of the app, however, I have no idea whether this is true? Been looking for any kind of documentation on both sides, stackoverflow questions or anything on the topic but was unable to find anything except a npm package trpc-swr (but I avoid using packages that are not that well known)...

Type error when using react-hook-form submit handler

So I'm using react-hook-form with a fresh T3 app, but I'm getting the following error. Has anyone else encountered this?...

oAuth callback uri

Hi, so following a video I tried creating an app and deploying it to vercel with github login but I think I'm messing something with the env vars.. Adding pictures of my github OAuth settings and vercel env vars. What happens is that when I try to login, it redirects me to localhost:3000 with this error: "github?error=redirect_uri_mismatch&error_description=The+redirect_uri+MUST+match+the+registered+callback+URL+for+this+application." I wanna say that while my localhost is running everything is okay so maybe I missed something that I should have changed....

Vercel Deployment Invalid Env Variables

Hello, I've been trying to figure out why deploying to vercel is causing this issue during the build phase. Everything runs fine locally and I am not getting any errors building locally either. I have a .env with all my keys. I have deployed this project successfully before but after adding my AWS s3 bucket key, secret, region and bucket name, it fails at that part of the build. My env vars are in vercel as well and i have checked using the vercel cli. Any help would be great. It's driving me insane lol....

T3 API routes and GraphQL

We're building new React/Next front end code. We need to access our legacy Java business layer. In future we expect to build new business logic in Typescript accessing DB with Prisma. So we need a mix of T3/primsa and GraphQL (or OpenAPI / Rest). What is the best code architecture. I am thinking we create tRPC server side routes where we check authorisation etc. then call our GraphQL or access other databases via Prisma. Does this make sense, or this there a best way to mix?

Type of return from await

getting a TS error stating "34:9 Error: Unsafe assignment of an any value." on my await in getServerSideProps. Tried to scour the docs for a solution but can't find anywhere where someone sets a type that works for me await. getAudit is a JS function, not TS (yet). Any ideas on how I should best solve this? ``js export const getServerSideProps: GetServerSideProps = async (params) => { const audit= await getAudit(/granskninger/${params.query.slug}); // 34:9 Error: Unsafe assignment of an any` value. + 34:48 Error: Invalid type "string | string[] | undefined" of template literal expression. ...

electron + vite + react template?

does anyone have a template for electron vite and react without non-essenstial plugins.

[Help] Turbo shared types

I have a turborepo with two apps (web and embed). web is a t3 stack and embed is a create-react-app. I am trying to use the trpc endpoint from web to embed. I managed to make it work by configuring web's cors. However, I am getting type issues when importing AppRouter in the embed app. I don't think you can just import AppRouter from web like import type { AppRouter } from "../../../web/src/server/routers/_app"; which is currently what I am doing. So my question is how would I go about this? do I need to somehow share the types between the two? if so how would I do it?. Should I just seperate trpc as an internal package?...

Zustland Multiple stores

hey when using something like zustand, how would i use a store inside another store? for example i have metaDataStore which contains metadata, that i want to use in my readerStore metadata is getting used in a callback in the readerStore. The readerStore contains an event callback for onRead() so i cant really pass it into the function...

"The AWS Access Key Id you provided does not exist in our records."..but I have the right access key

Trying to use the S3 SDK. ```js export const s3 = new S3({ region: env.REGION,...

Build failed due to import error

Build failed due to import error After running the build command for my react app the build failed and the below is the response I get. ```Creating an optimized production build......

NextAuth auth flow causes Next.js 13 dev server to crash without throwing any errors

I'm building a note-taking app with ct3a (partly inspired by Jack Herrington's awesome T3 video) but I'm having a really weird issue with NextAuth where the auth flow succeeds, OAuth2 callback route is hit, but then for some reason the Next.js dev server crashes without throwing any errors whatsoever. I'm positive the auth flow is working properly because running NextAuth in debug mode shows a successful OAuth2 callback response with data - but it's still not throwing errors. Here's a slightly censored version of the console output from NextAuth: ```...

Customize QueryClient for TRPC?

👋 I’m using T3 for a project. Is it possible to pass a custom QueryClient to TRPC? I don’t like some of the defaults of react-query refetch logic and would like to set my preferences globally rather than per query...