Hobbs
Hobbs
PostsComments
TtRPC
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
TtRPC
Created by PavidR on 7/31/2024 in #❓-help
Correct tRPC implementation (NextJS AppDir)
Yup do you have the tanstack devtools installed?
55 replies
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
Created by PavidR on 7/31/2024 in #❓-help
Correct tRPC implementation (NextJS AppDir)
Are you familiar with react query?
55 replies
TtRPC
Created by PavidR on 7/31/2024 in #❓-help
Correct tRPC implementation (NextJS AppDir)
yup
55 replies
TtRPC
Created by PavidR on 7/31/2024 in #❓-help
Correct tRPC implementation (NextJS AppDir)
agreed
55 replies
TtRPC
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
TtRPC
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
TtRPC
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
TtRPC
Created by PavidR on 7/31/2024 in #❓-help
Correct tRPC implementation (NextJS AppDir)
Yeah that's my understand I guess just figuring out which pattern to use is the tricky part
55 replies
TtRPC
Created by PavidR on 7/31/2024 in #❓-help
Correct tRPC implementation (NextJS AppDir)
Awesome, thank you for sharing! I can probably help with the loading times if you want to minimize or simulate it being instantaneous. Curious - do you have to do a trpc server / client implementation? Meaning a separate procedure/instance if you want to use trpc to make requests on the server side vs client?
55 replies
TtRPC
Created by PavidR on 7/31/2024 in #❓-help
Correct tRPC implementation (NextJS AppDir)
Hey @PavidR I'm in the exact same boat as you - curious if you made a decision/any progress since you posted this 12 hours ago?
55 replies