Finn Comments

Finn

Posts Comments

TtRPC

•Created by Finn on 1/30/2024 in #❓-help

How do I setup subscriptions with websockets in Next.js 14 app router?

Cheers mate, thanks for sharing.

6 replies

TtRPC

•Created by Finn on 3/1/2024 in #❓-help

How to properly handle Prima selects/includes with tRPC?

Sorry it took me so long to respond. I've read your answer after you've posted it, but I completely forget about it because I was immersed into something else. Just wanted to say thanks.

8 replies

TtRPC

•Created by Finn on 3/1/2024 in #❓-help

How to properly handle Prima selects/includes with tRPC?

So, my question basically is, how you usually do this. Do you just allow all strings to be passed and try-catch possible errors being thrown, or am I severly misunderstanding how to use tRPC.

8 replies

TtRPC

•Created by Finn on 1/29/2024 in #❓-help

Using tRPC in Next.js Middleware

Well, the cookies are missing in the request to the API for me as well - if that's what you mean. That's why I just read the cookie in the middleware and pass it into the api call, rather than reading the cookie within the procedure itself.

16 replies

TtRPC

•Created by Finn on 1/29/2024 in #❓-help

Using tRPC in Next.js Middleware

yes

16 replies

TtRPC

•Created by Finn on 1/29/2024 in #❓-help

Using tRPC in Next.js Middleware

I think that you should better create a new thread for that, if you're having problems with your code. I am very much not qualified to give any advice on tRPC whatsoever. I just took a quick look at the create-t3-app template and went on with it. The configuration of tRPC is a myth to me. Sorry mate.

16 replies

TtRPC

•Created by Finn on 1/29/2024 in #❓-help

Using tRPC in Next.js Middleware

At the moment my middleware is just this:

export async function middleware(req: NextRequest): Promise<NextResponse> {
    if (!isProtectedRoute(req.nextUrl.pathname)) return NextResponse.next();

    const authCookie = cookies().get(SESSION_COOKIE_NAME);

    if (!authCookie) {
        return NextResponse.redirect(new URL("/signin", req.url));
    }

    const session = await api.session.validate.query({
        sessionId: authCookie.value,
    });

    if (!session) {
        return NextResponse.redirect(new URL("/signin", req.url));
    }

    return NextResponse.next();
}

export async function middleware(req: NextRequest): Promise<NextResponse> {
    if (!isProtectedRoute(req.nextUrl.pathname)) return NextResponse.next();

    const authCookie = cookies().get(SESSION_COOKIE_NAME);

    if (!authCookie) {
        return NextResponse.redirect(new URL("/signin", req.url));
    }

    const session = await api.session.validate.query({
        sessionId: authCookie.value,
    });

    if (!session) {
        return NextResponse.redirect(new URL("/signin", req.url));
    }

    return NextResponse.next();
}

16 replies

TtRPC

•Created by Finn on 1/29/2024 in #❓-help

Using tRPC in Next.js Middleware

Hi, I don't recall needing to change anything for it to work. But its been some time. I gave up trying to create my own authentication system and just started using lucia auth. Right now I use this api to validate requests in middleware.ts

import { createTRPCProxyClient, httpBatchLink, loggerLink } from "@trpc/client";

import { type AppRouter } from "@/server/api/root";
import { getUrl, transformer } from "./shared";

export const api = createTRPCProxyClient<AppRouter>({
    transformer,
    links: [
        loggerLink({
            enabled: op =>
                process.env.NODE_ENV === "development" ||
                (op.direction === "down" && op.result instanceof Error),
        }),

        httpBatchLink({
            url: getUrl(),
            fetch(url, options) {
                return fetch(url, {
                    ...options,
                });
            },
        }),
    ],
});

import { createTRPCProxyClient, httpBatchLink, loggerLink } from "@trpc/client";

import { type AppRouter } from "@/server/api/root";
import { getUrl, transformer } from "./shared";

export const api = createTRPCProxyClient<AppRouter>({
    transformer,
    links: [
        loggerLink({
            enabled: op =>
                process.env.NODE_ENV === "development" ||
                (op.direction === "down" && op.result instanceof Error),
        }),

        httpBatchLink({
            url: getUrl(),
            fetch(url, options) {
                return fetch(url, {
                    ...options,
                });
            },
        }),
    ],
});

But I still don't like that I have 3 different apis, for react, server and edge runtime. But I really don't have any clue as to what I could change for it to work otherwise.

16 replies

TtRPC

•Created by Finn on 1/29/2024 in #❓-help

Using tRPC in Next.js Middleware

For reference, the whole template can be found here: https://github.com/t3-oss/create-t3-app/tree/main/cli/template/extras/src/trpc

16 replies