tRPC invalid_type error with Clerk

FForsto5/31/2023
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");
FForsto5/31/2023
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);

Looking for more? Join the community!