where should I put trpc.withTRPC in nextjs 13? #3185
-
|
greetings. I'm new to trpc,and learning with nextjs 13 beta app directory. where should I put trpc.withTRPC? I created CreateTRPCNext. export const trpc = createTRPCNext<AppRouter>({
config({ ctx }) {
console.log({ ctx });
return {
links: [
httpBatchLink({
url: `${getBaseUrl()}/api/trpc`,
}),
],
};
},
ssr: true,
});and tried three different things.
'use client';
export const RootLayout = ({ children }: { children: React.ReactNode }) => {
return (
<html>
<head />
<body>
<div>Root Layout</div>
<div>{children}</div>
</body>
</html>
);
};
export default trpc.withTRPC(RootLayout);
const Page = () => {
return <div>Root Page </div>;
};
export default trpc.withTRPC(Page);It is normal case ctx is undefined ? and why where should I use trpc.withTRPC HOC in NextJS 13? |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 8 replies
-
|
tl;dr:
Playground repoLink: #3185 Using tRPC with RSC is hairy right now and we haven't worked out exactly how the story looks like, even if we have it working with hydration and everything in that repo. Setting up tRPC client (for
|
Beta Was this translation helpful? Give feedback.
-
|
me too |
Beta Was this translation helpful? Give feedback.
-
|
me too! please let us know |
Beta Was this translation helpful? Give feedback.
-
|
theres an issue here #3297 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @KATT !! got the answer I needed. |
Beta Was this translation helpful? Give feedback.
-
|
I applied the new trpcClient and added in the layout, not sure how to get the data since I grab the exported trpc and the code just said the router doesn't exist of undefined |
Beta Was this translation helpful? Give feedback.
-
|
Do you even really need "special" HOC in next 13? I realized you can just go on like with usual react app. You can create a "use client" provider component and this should not make everything downstream a "client component" because you can pass server-component through client components, which happens here naturally. |
Beta Was this translation helpful? Give feedback.
-
|
Correct me if i am wrong but instead of using HOC, direct client or caller can be used as mentioned below |
Beta Was this translation helpful? Give feedback.
-
|
You can also make them regular Open API routes by using trpc-openapi, not the best solution, but can work where you don't have access to the general TRPC client on the server. |
Beta Was this translation helpful? Give feedback.
tl;dr:
@trpc/next-package is not Next 13-compliantwithTRPCis not relevant for Next 13use clientcomponents do workPlayground repo
Link: #3185
This is where we are doing experiments on tRPC + Next 13. It's not done, but you can use it as a reference if you wanna be on the bleeding edge of things.
Using tRPC with RSC is hairy right now and we haven't worked out exactly how the story looks like, even if we have it working with hydration and everything in that repo.
Setting up tRPC client (for
use client) components: