Hobbs Comments - Answer Overflow

Topics

Hobbs

Explore posts from servers

TtRPC TTCTheo's Typesafe Cult

TTCTheo's Typesafe Cult

•Created by Hobbs on 8/13/2024 in #questions

T3 Next Auth / TRPC Documentation is outdated

The next auth docs are wildly different regarding folder structure than t3 app especially between v4 and v5. It seems from the docs t3 is fairly opinionated about the folder structure and how it integrates trpc/middleware so having an idea of how you had linked everything would be helpful since the create t3 app doesn't work out of box with drizzle

5 replies

TTCTheo's Typesafe Cult

•Created by Simon Verhoeven on 8/11/2024 in #questions

t3 tRPC - CTX is undefined

I think you may be looking for using something like the privateProcedure instead of the publiceProcedure

4 replies

TTCTheo's Typesafe Cult

•Created by Simon Verhoeven on 8/11/2024 in #questions

t3 tRPC - CTX is undefined

did you end up figuring it out @Simon Verhoeven ?

4 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

If your layout/provider looks like this, you can add it in like so:

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <ReactQueryDevtools initialIsOpen={false} />
        {children}
      </QueryClientProvider>
    </trpc.Provider>
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <ReactQueryDevtools initialIsOpen={false} />
        {children}
      </QueryClientProvider>
    </trpc.Provider>
  );

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

Yup do you have the tanstack devtools installed?

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

This has been a big trip for me, its too easy for duplicate actions to exist. It's too easy to fall into the pattern of creating a hook, to make a trpc call, to use a server action

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

if anything you should see some optimizations what with the batching/deduping and stuff that rq has out of the box for trpc to leverage

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

oh great then hmm, im not sure why the load times would be exagerated with trpc

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

also keep in mind that RSC are different than a server action

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

Another thing to note is that if you are using server actions that those can't run in parallel (you might want to double check to confirm) but I recall that being the case. So basically I try to stick to using server actions only for mutations

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

Yeah that sounds like a good pattern to use. Maybe think about if you want the fetch to occur on the parent level and then render the component conditionally or if you want to render the component

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

Yeah I really recommend the ui.dev react query course, its a little expensive but it helped me out heaps

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

I can help you out with that stuff if you want to have more granularity on when you are fetching/populating

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

For the loading times it sounds like it has to do with your refetchInterval/staleTime If you are using the hydration pattern you can preFetch/PreHydrate your data as well and that can make it appear quicker

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

Are you familiar with react query?

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

yup

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

agreed

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

I haven't even gone down the ssr/ssg options yet. I have requests working I just feel it's pretty verbose on distinguishing which caller to use depending on server/client

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

So i'm basically importing my trpc from /utils/trpc.ts then using that to make my requests however I have no clue how you would differentiate this from a server vs client (i'm using the createTRPCNext method , does this handle if it's client vs server on it's own or did you by any chance go down the rabbit hole of setting up a createCallerFactory? haha

55 replies

•Created by PavidR on 7/31/2024 in #❓-help

Correct tRPC implementation (NextJS AppDir)

What's confusing to me is in the pages router you'd have a withTRPC that wraps the app router / App itself In app directory from what I understand is we create that kind of psuedo provider and combine it with a query provider to wrap the application and both of those use local state for the queryClient/trpcClient

55 replies