Theo's Typesafe Cult•4mo ago

tRPC fetch breaking when building Next project

I'm testing out tRPC, and I've tried fetching some asynchronous data. This only happens during pnpm build, dev mode works completely fine. The fetch is prefetched in the page, and then actually fetched within the component. It always errors in this way when it gets to the static page generation step.

a [TRPCClientError]: fetch failed
    at a.from (C:\Users\\OneDrive\Documents\GitHub\trpctest\.next\server\chunks\29.js:2:72953)
    at C:\Users\\OneDrive\Documents\GitHub\trpctest\.next\server\chunks\29.js:2:79757
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  meta: undefined,
  shape: undefined,
  data: undefined,
  digest: '3695965412',
  [cause]: TypeError: fetch failed
      at node:internal/deps/undici/undici:12618:11
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.fetch (C:\Users\\OneDrive\Documents\GitHub\trpctest\.next\server\chunks\29.js:2:78917) {
    cause: AggregateError [ECONNREFUSED]:
        at internalConnectMultiple (node:net:1116:18)
        at afterConnectMultiple (node:net:1683:7)
        at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
      code: 'ECONNREFUSED',
      [errors]: [Array]
    }
  }
}

a [TRPCClientError]: fetch failed
    at a.from (C:\Users\\OneDrive\Documents\GitHub\trpctest\.next\server\chunks\29.js:2:72953)
    at C:\Users\\OneDrive\Documents\GitHub\trpctest\.next\server\chunks\29.js:2:79757
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  meta: undefined,
  shape: undefined,
  data: undefined,
  digest: '3695965412',
  [cause]: TypeError: fetch failed
      at node:internal/deps/undici/undici:12618:11
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async Object.fetch (C:\Users\\OneDrive\Documents\GitHub\trpctest\.next\server\chunks\29.js:2:78917) {
    cause: AggregateError [ECONNREFUSED]:
        at internalConnectMultiple (node:net:1116:18)
        at afterConnectMultiple (node:net:1683:7)
        at TCPConnectWrap.callbackTrampoline (node:internal/async_hooks:130:17) {
      code: 'ECONNREFUSED',
      [errors]: [Array]
    }
  }
}

export const postRouter = createTRPCRouter({
  getMessages: publicProcedure.query(async (): Promise<[]> => {
    return [];
  }),
  ...
});

export const postRouter = createTRPCRouter({
  getMessages: publicProcedure.query(async (): Promise<[]> => {
    return [];
  }),
  ...
});

const [messages] = api.post.getMessages.useSuspenseQuery(); //the act of just sending the request is the issue after ruling out any possible shenanigans in the postRouter

const [messages] = api.post.getMessages.useSuspenseQuery(); //the act of just sending the request is the issue after ruling out any possible shenanigans in the postRouter

2 Replies

InbestigatorOP•4mo ago

I fixed it by having a random api call above/below it. I have no clue why this is necessary, so if anybody knows how I can remove the api call, pls lmk

InbestigatorOP•4mo ago

Alternative way is to do export const dynamic = "force-dynamic"; as seen here

GitHub

trpc/examples/.experimental/next-app-dir/src/app/rsc-rq-prefetch/pa...

🧙‍♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy. - trpc/trpc

Gaming

Programming

tRPC fetch breaking when building Next project