T
tRPC

❓-help

Possible to use tRPC proxy client inside Edge Runtime?

W.westsaid10/28/2022
Hi, im trying to fetch a route from trpc inside a Vercel Edge Runtime function. Therefore im trying to create a ProxyClient from @trpc/client and importing it in the Edge function:
// trpc.ts
export const serverTrpc = createTRPCProxyClient<AppRouter>({
links: [
httpBatchLink({
url: `${getBaseUrl()}/api/trpc`,
}),
],
});

// edge-function.ts
export default async function handler(req: NextRequest) {
const { searchParams } = req.nextUrl;
const id = searchParams.get("plant");

const data = await serverTrpc.product.byId.query({id}).catch(); // This is not working
}
// trpc.ts
export const serverTrpc = createTRPCProxyClient<AppRouter>({
links: [
httpBatchLink({
url: `${getBaseUrl()}/api/trpc`,
}),
],
});

// edge-function.ts
export default async function handler(req: NextRequest) {
const { searchParams } = req.nextUrl;
const id = searchParams.get("plant");

const data = await serverTrpc.product.byId.query({id}).catch(); // This is not working
}
This gives me the following error:
Failed to compile.

../node_modules/lodash/_root.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation

Import trace for requested module:
../node_modules/lodash/_root.js
../node_modules/lodash/now.js
../node_modules/lodash/debounce.js
./pages/_app.tsx
./lib/trpc.ts

../node_modules/@babel/runtime/regenerator/index.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation

Import trace for requested module:
../node_modules/@babel/runtime/regenerator/index.js
../node_modules/next-auth/react/index.js
./pages/_app.tsx
./lib/trpc.ts


> Build failed because of webpack errors
Failed to compile.

../node_modules/lodash/_root.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation

Import trace for requested module:
../node_modules/lodash/_root.js
../node_modules/lodash/now.js
../node_modules/lodash/debounce.js
./pages/_app.tsx
./lib/trpc.ts

../node_modules/@babel/runtime/regenerator/index.js
Dynamic Code Evaluation (e. g. 'eval', 'new Function', 'WebAssembly.compile') not allowed in Edge Runtime
Learn More: https://nextjs.org/docs/messages/edge-dynamic-code-evaluation

Import trace for requested module:
../node_modules/@babel/runtime/regenerator/index.js
../node_modules/next-auth/react/index.js
./pages/_app.tsx
./lib/trpc.ts


> Build failed because of webpack errors
A workaround which im using:
// edge-function.ts
export default async function handler(req: NextRequest) {
// ...

const productData = await(
await fetch(
`${getBaseUrl()}/api/trpc/product.byId?batch=1&input=%7B%220%22%3A%7B%22json%22%3A%7B%22id%22%3A%22${id}%22%7D%7D%7D`,
)
).json() as TRPCRes<
Product & {
seller: User;
images: Image[];
}
>;

// ...
}
// edge-function.ts
export default async function handler(req: NextRequest) {
// ...

const productData = await(
await fetch(
`${getBaseUrl()}/api/trpc/product.byId?batch=1&input=%7B%220%22%3A%7B%22json%22%3A%7B%22id%22%3A%22${id}%22%7D%7D%7D`,
)
).json() as TRPCRes<
Product & {
seller: User;
images: Image[];
}
>;

// ...
}
Is there a way to create a tRPC client which is "edge-able" or should I file an issue?

Looking for more? Join the community!