fearlessslug•15mo 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•15mo 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 };