Max
Explore posts from serversConfused by the many examples and docs of implementing trpc, next.js (app router), and clerk.
@DiamondDragon @makistos @here
1. Sorry I didn’t see these notifications earlier!
2. Like 90% > are using NextJS (Page) & TRPC.
3. NextJs (App) & TRPC require a different configuration. 4. But documentation, online forms, and even people here usually provide bad Intel. Because it’s not the popular way and is relatively new. 5. I felt your pain.
I was able to figure it out by using this repo as a template. - https://github.com/juliusmarminge/acme-corp SSR Note: - I found that I didn’t need react server components to get data and build the page. - Maybe useful for content that is static or changes infrequently. - “use client” components render both server and client side, and I simply streamed it to the browser after it has resolved getting data and built the UI. - https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming - I found this really nice since I can still use trpc/react-query methods to interact with the data. - https://trpc.io/docs/client/react/useUtils - Using SSR you would need to invalidate the server cache and force a refresh since this happens exclusively on the server and has a server cache within nextjs. - https://nextjs.org/docs/app/building-your-application/caching#routerrefresh - But maybe you want this for static reasons, my pages were very dynamic.
3. NextJs (App) & TRPC require a different configuration. 4. But documentation, online forms, and even people here usually provide bad Intel. Because it’s not the popular way and is relatively new. 5. I felt your pain.
I was able to figure it out by using this repo as a template. - https://github.com/juliusmarminge/acme-corp SSR Note: - I found that I didn’t need react server components to get data and build the page. - Maybe useful for content that is static or changes infrequently. - “use client” components render both server and client side, and I simply streamed it to the browser after it has resolved getting data and built the UI. - https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming - I found this really nice since I can still use trpc/react-query methods to interact with the data. - https://trpc.io/docs/client/react/useUtils - Using SSR you would need to invalidate the server cache and force a refresh since this happens exclusively on the server and has a server cache within nextjs. - https://nextjs.org/docs/app/building-your-application/caching#routerrefresh - But maybe you want this for static reasons, my pages were very dynamic.
18 replies
TTCTheo's Typesafe Cult
•Created by v-for-v on 4/2/2024 in #questions
Turborepo without Expo?
Yeah I think the only way is to do it. Pull things out see errors iterate until happy. Use git so you can revert as needed. Good luck
6 replies
TTCTheo's Typesafe Cult
•Created by aditya on 4/2/2024 in #questions
Query Invalidation with trpc not working with React Server Components and App Router
Awesome good to know!
32 replies
TTCTheo's Typesafe Cult
•Created by Huilen on 3/31/2024 in #questions
Im a newbie creating a document editor and idk how to setup an architecture to save the data
and if using prisma use a transact to make sure your delete and create prisma queries work. If it deletes and create fails it will role back and throw an error.
16 replies
TTCTheo's Typesafe Cult
•Created by Huilen on 3/31/2024 in #questions
Im a newbie creating a document editor and idk how to setup an architecture to save the data
Yeah just save it as json. if you're using prisma you can set it as a field in a table as Json.
16 replies
TTCTheo's Typesafe Cult
•Created by aditya on 4/2/2024 in #questions
Query Invalidation with trpc not working with React Server Components and App Router
32 replies
TTCTheo's Typesafe Cult
•Created by aditya on 4/2/2024 in #questions
Query Invalidation with trpc not working with React Server Components and App Router
32 replies
TTCTheo's Typesafe Cult
•Created by aditya on 4/2/2024 in #questions
Query Invalidation with trpc not working with React Server Components and App Router
You might be better off just using using suspense. "use client" components are deceptive as they do still run on the server. If you wrap it with a suspense you'll have a faster intial paint with your layout then it will stream in your component that relies on data when the data is available. So then you would be able to just invalidate it like you're trying to. U would just need to call
const dbWallets = await api.wallet.getAll(); using the client api and wrap it with a suspense.32 replies
TTCTheo's Typesafe Cult
•Created by v-for-v on 4/2/2024 in #questions
Turborepo without Expo?
Just remove it and all references to in your turbo setup, root package json workspace, and ci/cd.
6 replies
TTCTheo's Typesafe Cult
•Created by aditya on 4/2/2024 in #questions
Query Invalidation with trpc not working with React Server Components and App Router
I'm seeing router.refresh() used more.
32 replies
TTCTheo's Typesafe Cult
•Created by aditya on 4/2/2024 in #questions
Query Invalidation with trpc not working with React Server Components and App Router
let me know if any of those work or if you find a better solution.
32 replies
TTCTheo's Typesafe Cult
•Created by aditya on 4/2/2024 in #questions
Query Invalidation with trpc not working with React Server Components and App Router
I think cache invalidation from the client side doesn't automatically trigger a re-invocation of the call from the server side. Observers are created via useQuery so on the server, you have none. So if you'd expect invalidateQueries to refetch the queries, this wouldn't happen.
Possible Solutions I found, haven’t done this myself yet.
- refetch instead of invalidate? - I dont think it’s that simple tho - revalidatePath - This is what you want I think - https://nextjs.org/docs/app/api-reference/functions/revalidatePath - router.refresh() - I think this would also work - https://nextjs.org/docs/app/building-your-application/caching#routerrefresh
- refetch instead of invalidate? - I dont think it’s that simple tho - revalidatePath - This is what you want I think - https://nextjs.org/docs/app/api-reference/functions/revalidatePath - router.refresh() - I think this would also work - https://nextjs.org/docs/app/building-your-application/caching#routerrefresh
32 replies
TTCTheo's Typesafe Cult
•Created by BillyBob on 1/5/2024 in #questions
Why is create-t3-app using TRPCReactProvider and not createTRPCNext?
7 replies
TTCTheo's Typesafe Cult
•Created by BillyBob on 1/5/2024 in #questions
Why is create-t3-app using TRPCReactProvider and not createTRPCNext?
For future people. Example of trpc with app router, it's in a mono but good example https://github.com/t3-oss/create-t3-turbo
7 replies
TTCTheo's Typesafe Cult
•Created by BillyBob on 1/5/2024 in #questions
Why is create-t3-app using TRPCReactProvider and not createTRPCNext?
Yeah took me a long time to figure this out. Docs are out of date.
7 replies