SmoothNanners Comments

SmoothNanners

•Created by fearlessslug on 5/11/2023 in #❓-help

Tutorial for setting up tRPC with Next13 app dir?

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 };

3 replies

TtRPC

•Created by oscarama on 12/12/2022 in #❓-help

cookies, headers and authentication

That's awesome, thanks for sharing!

13 replies

TtRPC

•Created by oscarama on 12/12/2022 in #❓-help

cookies, headers and authentication

There is the Lucia auth lib for SvelteKit: https://lucia-auth.vercel.app/ It sets some locals, it might be able to be passed to tRPC, but I haven't used it. I have a repo for a custom auth with GitHub OAuth using endpoints as well and passes the session to the tRPC context, feel free to check it out https://github.com/austins/sveltekit-customauth

13 replies

TtRPC

•Created by oscarama on 12/12/2022 in #❓-help

cookies, headers and authentication

I tried to pass the SvelteKit cookies object into the context, but it didn't work since SvelteKit resolves the response separately. I was able to set cookies directly in the response (not using SvelteKit's cookies object) in responseMeta by checking the response and paths, but that's kinda messy. I recommend keeping the auth logic on a +page.server.js or +server.js endpoint. tRPC for everything else.

13 replies