Theo's Typesafe Cult•10mo ago

App router tRPC client side query not working with nextjs basePath

Hi, I'm using basePath option with nextJS, which can't be avoided for my project, and it appears to be causing conflicts with the client side. When I remove the basepath, client side useQuery works perfectly. Add it back in, and it breaks. Server side queries work regardless, no issue whether basePath option is enabled in next config or not. The network traffic says it is going to localhost:3002/api/ rather than localhost:3002/portal/api my next-config.js:

await import("./src/env.js");

/** @type {import("next").NextConfig} */
const config = {
   basePath: '/portal',
};

export default config;

await import("./src/env.js");

/** @type {import("next").NextConfig} */
const config = {
   basePath: '/portal',
};

export default config;

I'm using trpc/react

"use client";
import { api } from "~/trpc/react";

"use client";
import { api } from "~/trpc/react";

And calling it on client:

const { data } = api.poly.getLocations.useQuery();

const { data } = api.poly.getLocations.useQuery();

Any suggestions as to why this might be?

1 Reply

DarkAxi0m•7mo ago

did you happen to solve this?

Gaming

Programming

App router tRPC client side query not working with nextjs basePath