T
tRPC

"fetch failed" when building

"fetch failed" when building

DDavid11/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]
}
}
}
DDavid11/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?
Nnlucas11/14/2023
Econnrefused probably means you’re pointing at the wrong uri
DDavid11/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
Nnlucas11/14/2023
That might mean you’ve put a fetch somewhere which calls on build NextJS and others do have APIs for this
DDavid11/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.
Nnlucas11/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
DDavid11/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, {
S1Sonny11/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
DDavid11/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}</>
);
}
DDavid11/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!

T
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 exampleLooking 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 cliServer 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 notrying 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 ccan't call nested routethis is the top level router: ```ts const appRouter = router({ hello: procedure.query(() => 'heltrpc authDid someone create a full auth system in trpc (with next js trpc react query prisma,jwt token, refreDifference between createTRPCNextAppDirServer, createTRPCNext and createTRPCProxyClient?Hey everyone. I struggle to understand the difference between these 3 TRPC functions when it come tWhat is the mutation error type?In the provider I want to set onError for all mutations: ```ts new QueryClient({ defauMerging two clients into oneI have two clients. One for react-query for client components and one for server components. I wannaIs 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 ZCustomTypeuseQuery in App Router?I have a client component that I want to use useQuery in like in pages router, but only `query` is aTranform 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 midCan 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 tryiError 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 invaliNext.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