TTC
Theo's Typesafe CultForsto

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");
Forsto
Forsto•352d 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);
Want results from more Discord servers?
Add your server
More Posts
Save selected option on dropdownHii, I have a dropdown list that is being made from an array and a Save button. When I click the savEnd-to-end testing tools, SuggestionsHey everyone! 😄 I hope you're all doing well. 👋 I have a couple of questions for you, and I'd reN Nested RelationsHi im having trouble dealing with nested includes. I have a Comment and reply structure and replies A question on procedure design.I would like to know if it is best to try combine procedures or keep them separated. I don't want toMigrating to supabase from create-t3-turboHey guys! I'm migrating a create-t3-turbo app to the supabase create-t3-turbo template, and I'm a biSystem dark mode not detected when using darkMode: "media" in tailwind.config.tsHello! I am building a simple starter project using Tailwind and `shadcn-ui` components. I want the