Theo's Typesafe Cult•2y ago

tRPC invalid_type error with Clerk

Hi, I have this weird issue I've been trying to resolve for a while now. This is the error in browser console. Here is my back-end endpoint:

findOrganisation: publicProcedure
    .input(z.string())
    .query(async ({ ctx, input }) => {
      return ctx.prisma.organisation.findFirst({
        where: {
          url: input,
        },
      });
    }),

findOrganisation: publicProcedure
    .input(z.string())
    .query(async ({ ctx, input }) => {
      return ctx.prisma.organisation.findFirst({
        where: {
          url: input,
        },
      });
    }),

and this is how I call it:

  const { data: label } = api.demo.findOrganisation.useQuery("wall");

  const { data: label } = api.demo.findOrganisation.useQuery("wall");

1 Reply

ForstoOP•2y ago

I suspect that the issue is in my weird middleware that is there to handle subdomains, but im not really sure:

import { NextResponse } from "next/server";
import { authMiddleware } from "@clerk/nextjs/server";

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

export default authMiddleware({
  publicRoutes: ["/", "/api/(.*)", "_labels/(.*)"],
  beforeAuth: async (req) => {
    const url = req.nextUrl;

    const DEPLOYMENT_URL = "saas.demodrop.app";

    // Get hostname of request (e.g. demo.vercel.pub, demo.localhost:3000)
    const hostname = req.headers.get("host") || DEPLOYMENT_URL;

    // Get the pathname of the request (e.g. /, /about, /blog/first-post)
    const path = url.pathname;

    const currentHost =
      process.env.NODE_ENV === "production" && process.env.VERCEL === "1"
        ? hostname.replace(`.${DEPLOYMENT_URL}`, "")
        : hostname.replace(".localhost:3000", "");

    // rewrite root application to `/home` folder
    if (hostname === "localhost:3000" || hostname === DEPLOYMENT_URL) {
      return NextResponse.rewrite(new URL(path, req.url));
    }

    // rewrite everything else to `/_labels/[site] dynamic route
    return NextResponse.rewrite(
      new URL(`/_labels/${currentHost}${path}`, req.url),
    );
  },
});

import { NextResponse } from "next/server";
import { authMiddleware } from "@clerk/nextjs/server";

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};

export default authMiddleware({
  publicRoutes: ["/", "/api/(.*)", "_labels/(.*)"],
  beforeAuth: async (req) => {
    const url = req.nextUrl;

    const DEPLOYMENT_URL = "saas.demodrop.app";

    // Get hostname of request (e.g. demo.vercel.pub, demo.localhost:3000)
    const hostname = req.headers.get("host") || DEPLOYMENT_URL;

    // Get the pathname of the request (e.g. /, /about, /blog/first-post)
    const path = url.pathname;

    const currentHost =
      process.env.NODE_ENV === "production" && process.env.VERCEL === "1"
        ? hostname.replace(`.${DEPLOYMENT_URL}`, "")
        : hostname.replace(".localhost:3000", "");

    // rewrite root application to `/home` folder
    if (hostname === "localhost:3000" || hostname === DEPLOYMENT_URL) {
      return NextResponse.rewrite(new URL(path, req.url));
    }

    // rewrite everything else to `/_labels/[site] dynamic route
    return NextResponse.rewrite(
      new URL(`/_labels/${currentHost}${path}`, req.url),
    );
  },
});

I also don't get any type or lint errors. The error started occuring once i started migrating my application to Clerk. Any help would be much appreciated. The difference was in the clerk matcher and my matcher, as on match my middleware wouldn't preserve all url parameters. ended up fixing it like so:

if (hostname === "localhost:3000" || hostname === DEPLOYMENT_URL) {
      const newUrl = new URL(path, req.url);
      newUrl.search = url.search; // preserve the original query string
      return NextResponse.rewrite(newUrl);
    }

    // rewrite everything else to `/_labels/[site] dynamic route
    const newUrl = new URL(`/_labels/${currentHost}${path}`, req.url);
    newUrl.search = url.search; // preserve the original query string
    return NextResponse.rewrite(newUrl);

if (hostname === "localhost:3000" || hostname === DEPLOYMENT_URL) {
      const newUrl = new URL(path, req.url);
      newUrl.search = url.search; // preserve the original query string
      return NextResponse.rewrite(newUrl);
    }

    // rewrite everything else to `/_labels/[site] dynamic route
    const newUrl = new URL(`/_labels/${currentHost}${path}`, req.url);
    newUrl.search = url.search; // preserve the original query string
    return NextResponse.rewrite(newUrl);

Gaming

Programming

tRPC invalid_type error with Clerk