.westsaid Posts

.westsaid

Posts Comments

TtRPC

•Created by .westsaid on 4/20/2023 in #❓-help

useInfinieQuery with initialData, Refetch only after second change of inputs

2 replies

TtRPC

•Created by .westsaid on 10/28/2022 in #❓-help

Possible to use tRPC proxy client inside Edge Runtime?

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[];
    }
  >;

  // ...
}