2 replies

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?

TTC

Theo's Typesafe Cult•2y ago•

2 replies

WeiKaiLe

App router tRPC client side query not working with nextjs basePath

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?

App router tRPC client side query not working with nextjs basePath

Similar Threads

App router tRPC client side query not working with nextjs basePath

Similar Threads

Similar Threads

Similar Threads