fearlessslug
fearlessslug14mo ago

Tutorial for setting up tRPC with Next13 app dir?

Anyone has a goos tutorial (blogpost / YouTube) on setting up tRPC with Next13 app dir for both client components as well as server components? I have tried for the entire day and couldn't find a way to make it work... :/
1 Reply
SmoothNanners
SmoothNanners14mo ago
I'm messing around with the new app dir. Here's what I'm doing so far. I use server-side caller in server components (not passing hydrated state to React Query for now): https://trpc.io/docs/server/server-side-calls For forms and client-side, instead of the Next.js server actions and foregoing progressive enhancement, I use the React Query integration (without the @trpc/next package) created in a client component that is wrapped around the root layout and react-hook-form as normal: https://trpc.io/docs/reactjs/setup
"use client";

import { trpc } from "$/trpc/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import React, { type PropsWithChildren, useState } from "react";
import { transformer } from "$/trpc/transformer";

export default function Providers({ children }: PropsWithChildren) {
const [queryClient] = useState(() => new QueryClient());

const [trpcClient] = useState(() =>
trpc.createClient({
links: [httpBatchLink({ url: "/trpc" })],
transformer
})
);

return (
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</trpc.Provider>
);
}
"use client";

import { trpc } from "$/trpc/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { httpBatchLink } from "@trpc/client";
import React, { type PropsWithChildren, useState } from "react";
import { transformer } from "$/trpc/transformer";

export default function Providers({ children }: PropsWithChildren) {
const [queryClient] = useState(() => new QueryClient());

const [trpcClient] = useState(() =>
trpc.createClient({
links: [httpBatchLink({ url: "/trpc" })],
transformer
})
);

return (
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
</trpc.Provider>
);
}
For trpc api route, I use the fetch adapter in app dir. Example:
import { type NextRequest } from "next/server";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { appRouter } from "$/trpc/routers/app";
import { createContext } from "$/trpc/server";

const handler = (request: NextRequest) =>
fetchRequestHandler({
endpoint: "/trpc",
router: appRouter,
req: request,
createContext
});

export { handler as GET, handler as POST };
import { type NextRequest } from "next/server";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { appRouter } from "$/trpc/routers/app";
import { createContext } from "$/trpc/server";

const handler = (request: NextRequest) =>
fetchRequestHandler({
endpoint: "/trpc",
router: appRouter,
req: request,
createContext
});

export { handler as GET, handler as POST };