"fetch failed" when building

DDavid

11/14/2023

Hi, we are running into an issue where building our production next app causes "fetch failed" errors for every page that is being generated. We have ssr set to false. How can we debug this?

 TRPCClientError: fetch failed
     at TRPCClientError.from (file:///home/david/mrb-docker-dev/www/mrb-monorepo/node_modules/.pnpm/@trpc+client@10.43.3_@trpc+server@10.43.3/node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs:37:16)
     at file:///home/david/mrb-docker-dev/www/mrb-monorepo/node_modules/.pnpm/@trpc+client@10.43.3_@trpc+server@10.43.3/node_modules/@trpc/client/dist/httpUtils-f58ceda1.mjs:128:36
     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
   meta: {},
   shape: undefined,
   data: undefined,
   [cause]: TypeError: fetch failed
       at Object.fetch (node:internal/deps/undici/undici:11372:11)
       at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
     cause: AggregateError
         at internalConnectMultiple (node:net:1114:18)
         at afterConnectMultiple (node:net:1667:5) {
       code: 'ECONNREFUSED',
        ]: [Array]
     }
   }
 }

 TRPCClientError: fetch failed
     at TRPCClientError.from (file:///home/david/mrb-docker-dev/www/mrb-monorepo/node_modules/.pnpm/@trpc+client@10.43.3_@trpc+server@10.43.3/node_modules/@trpc/client/dist/TRPCClientError-0de4d231.mjs:37:16)
     at file:///home/david/mrb-docker-dev/www/mrb-monorepo/node_modules/.pnpm/@trpc+client@10.43.3_@trpc+server@10.43.3/node_modules/@trpc/client/dist/httpUtils-f58ceda1.mjs:128:36
     at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
   meta: {},
   shape: undefined,
   data: undefined,
   [cause]: TypeError: fetch failed
       at Object.fetch (node:internal/deps/undici/undici:11372:11)
       at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
     cause: AggregateError
         at internalConnectMultiple (node:net:1114:18)
         at afterConnectMultiple (node:net:1667:5) {
       code: 'ECONNREFUSED',
        ]: [Array]
     }
   }
 }

DDavid

11/14/2023

We looked through github, this Discord server etc but all the solutions there don't work. Usually people actually want to be fetching as SSR or something but that is not the case with us so we don't understand why it even attempts to fetch something @Alex / KATT 🐱 Sorry, prefer not to tag people but been stuck at this for a while and i've got 0 clue how to continue. Any ideas?

Nnlucas

11/14/2023

Econnrefused probably means you’re pointing at the wrong uri

DDavid

11/14/2023

Appreciate the reply! This is during build though, it shouldn't be trying to fetch anything anyway, so im not sure at what point or why it is attempting to

Nnlucas

11/14/2023

That might mean you’ve put a fetch somewhere which calls on build NextJS and others do have APIs for this

DDavid

11/14/2023

Have looked through the commit where it started several times, I can't find anything that would cause this. All our fetches/hook calls are inside of components, nothing at the root level. Any idea how I could see a better stack trace that may lead to where its coming from? We did add prefetching in this commit on a page, but that is inside of a gssp.

Nnlucas

11/14/2023

I’d start restricting the problem space, print a lot more info from the api to see what the calls are and if the request is reaching it Try adding an onError to your adapter Then commenting out parts of the app if that doesn’t help, basically binary searching your components These types of issues are a pain but not something we can support massively with since it’s likely a setup mistake

DDavid

11/21/2023

Will try these things, thank you for the responses! So, some observations: The request is happening even before the browser renders, it does not show in the network tab in the browser, there are no cookies attached to the request when logging it on the server side Everything works in the background, as in the browser renders and makes a valid request etc. It does not end up in our root error boundary But any call to that specific procedure causes it. So if I only render that specific query it'll happen, even though I render it as we would anywhere else in some page. Only occurs for this specific procedure, taking out the code it errors on (cookie / auth stuff) fixes it, even though a bunch of other procedures use that same middleware So, we reverted the original PR for a while until we had more time to look at it. It starts when you change this:

// blitz way
return useQuery(ActiveLocalesQuery,

// blitz way
return useQuery(ActiveLocalesQuery,

to this:

return trpc.core.companyProduct.getActiveLocales.useSuspenseQuery(undefined, {

return trpc.core.companyProduct.getActiveLocales.useSuspenseQuery(undefined, {

S1Sonny

11/22/2023

@David I had this error a while ago too. Fixed by setting localhost to 127.0.0.1 in /etc/hosts in WSL

DDavid

11/22/2023

mostly confused because it shouldn't be fetching anything initially Changing it to useQuery instead of useSuspenseQuery solves it for now

AKAlex / KATT 🐱

11/22/2023

ohhhhh i get what this is now if you use suspense it'll try to fetch the data on the first load on the server which is probably not what you want you prob want something like this if you're using suspense

import type { SuspenseProps } from 'react';
import React, { Suspense, useEffect, useState } from 'react';
import { Spinner } from '~/components/Spinner';

/**
 * Whether the app has ever mounted.
 * This is used to determine whether to render the fallback on the first render.
 */
let hasEverMounted = false;

/**
 * Suspense that doesn't render on the server.
 * - On server, it always renders the fallback.
 * - On client, it renders the fallback only on the first render.
 */
export function NoSSRSuspense(props: {
  children: React.ReactNode;
  /**
   * Fallback while loading.
   * @default <PageSpinner />
   */
  fallback?: SuspenseProps['fallback'];
}) {
  const [isMounted, setIsMounted] = useState(hasEverMounted);
  useEffect(() => {
    setIsMounted(true);
    hasEverMounted = true;
  }, []);
  const fallback =
    props.fallback === undefined ? <Spinner /> : props.fallback;

  return (
    <>{isMounted ? <Suspense {...props} fallback={fallback} /> : fallback}</>
  );
}

import type { SuspenseProps } from 'react';
import React, { Suspense, useEffect, useState } from 'react';
import { Spinner } from '~/components/Spinner';

/**
 * Whether the app has ever mounted.
 * This is used to determine whether to render the fallback on the first render.
 */
let hasEverMounted = false;

/**
 * Suspense that doesn't render on the server.
 * - On server, it always renders the fallback.
 * - On client, it renders the fallback only on the first render.
 */
export function NoSSRSuspense(props: {
  children: React.ReactNode;
  /**
   * Fallback while loading.
   * @default <PageSpinner />
   */
  fallback?: SuspenseProps['fallback'];
}) {
  const [isMounted, setIsMounted] = useState(hasEverMounted);
  useEffect(() => {
    setIsMounted(true);
    hasEverMounted = true;
  }, []);
  const fallback =
    props.fallback === undefined ? <Spinner /> : props.fallback;

  return (
    <>{isMounted ? <Suspense {...props} fallback={fallback} /> : fallback}</>
  );
}

DDavid

11/22/2023

Will try this now! This works! Thank you so much! Do you know why this happens during build? And could it be related to the fact that those queries get called in _app , compared to everything else which is only called on a page

Looking for more? Join the community!

tRPC

"fetch failed" when building

Join Server

tRPC

"fetch failed" when building

Join Server

Recommended Posts

anyone has an example of SSR with React query working without Next js?Can't find a working example Looking for an up to date boilerplate for tRPC & Fastify.Looking for an up to date boilerplate for tRPC & Fastify.Can You Provide Guidance on Implementing RBAC and Share GitHub Examples?I am currently exploring the implementation of Role-Based Access Control (RBAC) and am seeking your `useQuery` not working?is it just me or does `useQuery` not work in my next js components? i try to call it and it says cli Server Component Call to TRPC on express backendI have following structure: - Nextjs App folder with both client components and server components - Can set cookie with trpc?I tried to create a full authentication system in trpc using jwt and refresh token I find that is no trying to understand how this worksso i'm looking at the t3 template that was made for me, and there seems to be a `trpc` folder that c can't call nested routethis is the top level router: ```ts const appRouter = router({ hello: procedure.query(() => 'hel trpc authDid someone create a full auth system in trpc (with next js trpc react query prisma,jwt token, refre Difference between createTRPCNextAppDirServer, createTRPCNext and createTRPCProxyClient?Hey everyone. I struggle to understand the difference between these 3 TRPC functions when it come t What is the mutation error type?In the provider I want to set onError for all mutations: ```ts new QueryClient({ defau Merging two clients into oneI have two clients. One for react-query for client components and one for server components. I wanna Is it possible to only use WebSockets when necessary, otherwise use httpbatch or http?I have an application, and on certain pages I need live data. Is there a way to only have tRPC open Zod transform typesI have a zod type for our backend requirements that looks like this: ```javascript const ZCustomType useQuery in App Router?I have a client component that I want to use useQuery in like in pages router, but only `query` is a Tranform output data using middleware after handler has run - possible?As the title says, been trying for a couple of hours to modify the return type of the data using mid Can we configure cache on a per-request basis?Hi! I’m a big fan of tRPC! I’ve been using it for quite some time. I actually have 2 questions: ## Error in tRPC with Clerk in t3-app routerHi guys, im trying to implement clerk auth in t3 app router. But it gives me this error when im tryi Error when converting string from router.query to prisma DB enumHey yall, I'm working on a Next.js application using tRPC and Prisma, and I've encountered an invali Next.js tRPC router separated to edge-runtime and node-runtimeI would like to separate server into two runtimes - most things can run on edge-runtime, but I have