How to use trpc in next.js 13 using app directory #3091
Replies: 2 comments 4 replies
-
|
This error is due TRPC using "use client";
const RootLayout = (props: PropsWithChildren) => {
return (
<html lang="en" <body> <TopNavbar /> {props.children} <BottomNavbar /> </body> </html>
);
};
export default trpc.withTRPC(RootLayout);I'm not sure how well Next.js 13 plays with TRPC v10, share with us what you find! There are probably some changes needed to properly support SSR, but client-side queries and mutations 'should' work fine if you're careful not using any TRPC features in server-rendered components. |
Beta Was this translation helpful? Give feedback.
-
|
with "use client" got following error: TypeError: Cannot read properties of undefined (reading 'trpcState') |
Beta Was this translation helpful? Give feedback.
-
|
See here for an example https://github.com/trpc/next-13/blob/main/client/trpcClient.tsx // /client/trpc.ts
"use client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCReact } from "@trpc/react-query";
import superjson from "superjson";
import type { AppRouter } from "~/server/routers/_app";
export const trpc = createTRPCReact<AppRouter>({
unstable_overrides: {
useMutation: {
async onSuccess(opts) {
await opts.originalFn();
await opts.queryClient.invalidateQueries();
},
},
},
});
const queryClient = new QueryClient();
const trpcClient = trpc.createClient({
links: [
loggerLink({
enabled: () => true,
}),
httpBatchLink({
url: "/api/trpc",
}),
],
transformer: superjson,
});
export function ClientProvider(props: { children: React.ReactNode }) {
return (
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient} contextSharing={true}>
{props.children}
</QueryClientProvider>
</trpc.Provider>
);
} |
Beta Was this translation helpful? Give feedback.
-
|
Beware that we haven't done any special APIs for the |
Beta Was this translation helpful? Give feedback.
-
|
Thanks |
Beta Was this translation helpful? Give feedback.
-
|
This will not allow to use SSR Features, right? |
Beta Was this translation helpful? Give feedback.
-
When using trpc in next.js 13 new app directory
const RootLayout = (props: PropsWithChildren) => { return ( <html lang="en"> <body> <TopNavbar /> {props.children} <BottomNavbar /> </body> </html> ); }; export default trpc.withTRPC(RootLayout);It throws errors as
error - (sc_server)\node_modules@tanstack\react-query\build\lib\QueryClientProvider.js (27:53) @ eval
error - TypeError: React__namespace.createContext is not a function
at eval (webpack-internal:///(sc_server)/./node_modules/@tanstack/react-query/build/lib/QueryClientProvider.js:26:55)
at Object.(sc_server)/./node_modules/@tanstack/react-query/build/lib/QueryClientProvider.js (E:\Projects\code-explain-web.next\server\app\page.js:780:1)
at webpack_require (E:\Projects\code-explain-web.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///(sc_server)/./node_modules/@tanstack/react-query/build/lib/useQueries.js:8:27)
at Object.(sc_server)/./node_modules/@tanstack/react-query/build/lib/useQueries.js (E:\Projects\code-explain-web.next\server\app\page.js:912:1)
at webpack_require (E:\Projects\code-explain-web.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///(sc_server)/./node_modules/@tanstack/react-query/build/lib/index.js:7:18)
at Object.(sc_server)/./node_modules/@tanstack/react-query/build/lib/index.js (E:\Projects\code-explain-web.next\server\app\page.js:813:1)
at webpack_require (E:\Projects\code-explain-web.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///(sc_server)/./node_modules/@trpc/next/dist/index.js:5:20) {
type: 'TypeError',
page: '/'
}
null
Beta Was this translation helpful? Give feedback.
All reactions