T
tRPC

trpc error fetch failed

trpc error fetch failed

SSharpieMaster9/26/2023
please help
SSharpieMaster9/27/2023
account/page.tsx
import { redirect } from "next/navigation";
import React from "react";
import NavBar from "~/components/NavBar";
import NewRecipeButton from "~/components/NewRecipeButton";
import { api } from "~/trpc/server";

const AccountPage = () => {
return (
<div>
<NavBar />
<NewRecipeButton onClick={newRecipe} />
</div>
);
};

const newRecipe = async () => {
"use server";

console.log("new recipe");

const newRecipe = await api.recipe.create.mutate({
title: "title",
description: "description",
});

console.log(newRecipe);
};

export default AccountPage;
import { redirect } from "next/navigation";
import React from "react";
import NavBar from "~/components/NavBar";
import NewRecipeButton from "~/components/NewRecipeButton";
import { api } from "~/trpc/server";

const AccountPage = () => {
return (
<div>
<NavBar />
<NewRecipeButton onClick={newRecipe} />
</div>
);
};

const newRecipe = async () => {
"use server";

console.log("new recipe");

const newRecipe = await api.recipe.create.mutate({
title: "title",
description: "description",
});

console.log(newRecipe);
};

export default AccountPage;
components/NewRecipeButton.tsx
"use client";

import { FC } from "react";

interface NewRecipeButtonProps {
onClick: () => Promise<void>;
}

const NewRecipeButton: FC<NewRecipeButtonProps> = ({ onClick }) => {
return (
<button
onClick={async () => {
await onClick();
}}
>
new recipe
</button>
);
};

export default NewRecipeButton;
"use client";

import { FC } from "react";

interface NewRecipeButtonProps {
onClick: () => Promise<void>;
}

const NewRecipeButton: FC<NewRecipeButtonProps> = ({ onClick }) => {
return (
<button
onClick={async () => {
await onClick();
}}
>
new recipe
</button>
);
};

export default NewRecipeButton;
recipe router:
import { z } from "zod";

import {
createTRPCRouter,
protectedProcedure,
publicProcedure,
} from "~/server/api/trpc";

export const recipeRouter = createTRPCRouter({
create: protectedProcedure
.input(z.object({ title: z.string(), description: z.string() }))
.mutation(async ({ ctx, input }) => {
const recipe = await ctx.db.recipe.create({
data: {
title: input.title,
description: input.description,
userId: ctx.session.user.id,
},
});

return recipe;
}),

hello: publicProcedure
.input(z.object({ message: z.string() }))
.query(({ ctx, input }) => {
return "hello" + input.message;
}),
});
import { z } from "zod";

import {
createTRPCRouter,
protectedProcedure,
publicProcedure,
} from "~/server/api/trpc";

export const recipeRouter = createTRPCRouter({
create: protectedProcedure
.input(z.object({ title: z.string(), description: z.string() }))
.mutation(async ({ ctx, input }) => {
const recipe = await ctx.db.recipe.create({
data: {
title: input.title,
description: input.description,
userId: ctx.session.user.id,
},
});

return recipe;
}),

hello: publicProcedure
.input(z.object({ message: z.string() }))
.query(({ ctx, input }) => {
return "hello" + input.message;
}),
});
Error:
new recipe
>> mutation #1 recipe.create { input: { title: 'title', description: 'description' } }
<< mutation #1 recipe.create {
input: { title: 'title', description: 'description' },
result: TRPCClientError: fetch failed
at TRPCClientError.from (webpack-internal:///(rsc)/./node_modules/.pnpm/@trpc+client@10.37.1_@trpc+server@10.37.1/node_modules/@trpc/client/dist/TRPCClientError-fef6cf44.mjs:30:16)
at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@trpc+client@10.37.1_@trpc+server@10.37.1/node_modules/@trpc/client/dist/httpBatchLink-520db465.mjs:207:101) {
meta: undefined,
shape: undefined,
data: undefined,
[cause]: TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11576:11) {
cause: [RequestContentLengthMismatchError]
}
},
elapsedMs: 14
}
- error node_modules\.pnpm\@trpc+client@10.37.1_@trpc+server@10.37.1\node_modules\@trpc\client\dist\TRPCClientError-fef6cf44.mjs (26:15) @ TRPCClientError.from
- error TRPCClientError: fetch failed
null
new recipe
>> mutation #1 recipe.create { input: { title: 'title', description: 'description' } }
<< mutation #1 recipe.create {
input: { title: 'title', description: 'description' },
result: TRPCClientError: fetch failed
at TRPCClientError.from (webpack-internal:///(rsc)/./node_modules/.pnpm/@trpc+client@10.37.1_@trpc+server@10.37.1/node_modules/@trpc/client/dist/TRPCClientError-fef6cf44.mjs:30:16)
at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@trpc+client@10.37.1_@trpc+server@10.37.1/node_modules/@trpc/client/dist/httpBatchLink-520db465.mjs:207:101) {
meta: undefined,
shape: undefined,
data: undefined,
[cause]: TypeError: fetch failed
at Object.fetch (node:internal/deps/undici/undici:11576:11) {
cause: [RequestContentLengthMismatchError]
}
},
elapsedMs: 14
}
- error node_modules\.pnpm\@trpc+client@10.37.1_@trpc+server@10.37.1\node_modules\@trpc\client\dist\TRPCClientError-fef6cf44.mjs (26:15) @ TRPCClientError.from
- error TRPCClientError: fetch failed
null
LLucas9/28/2023
you're passing the 'content-length' header from the server action request to the trpc request which causes a content-length mismatch try replacing your headers function in your trpc link for something like this
headers() {
const h = new Map(headers())

for (const [key] of h.entries()) {
if (key === 'content-length' || key === 'content-type') {
h.delete(key)
}
}

return Object.fromEntries(h.entries());;
},
headers() {
const h = new Map(headers())

for (const [key] of h.entries()) {
if (key === 'content-length' || key === 'content-type') {
h.delete(key)
}
}

return Object.fromEntries(h.entries());;
},

Looking for more? Join the community!

T
tRPC

trpc error fetch failed

Join Server
Recommended Posts
How to type a helper function to standardise loading and error states with a useQuery call?I am trying to standardize handling of error and loading states. I'd like to have one function/compoTypeScript Issue: router.createCaller Implicitly has Return Type "any"Hello everyone, I'm currently working on a project using tRPC and Prisma. However, I've run into an2 react renders causing 4 trpc query executesI see that my nextjs page is rendering twice on initial load. This is causing 4 executes of my querySuspend subscriptions when app is in backgroundWhen using React Native, subscriptions stay open even when the app is in the background. While this Callbacks in Consecutive MutationsI seem to be running into this issue https://tanstack.com/query/v4/docs/react/guides/mutations#consereturn type of a query endpointHello I currently have a trpc endpoint: ```ts const customInstances = api.customInstance.userCustTroubleshooting 'Type Instantiation Is Excessively Deep' Error in Next.js Project with TRPC IntegratI am using the table and pagination for listing data, just as the awesome developer did in 'https://procedure.input(z.object) is inferred as a partial (optional fields)?Have a strange case of my input types coming through as partial in procedures, cannot replicate in tHow to trigger revalidate after server action on a client componenthttps://github.com/trpc/examples-next-app-dir/blob/main/src/app/server-action/ReactHookFormExample.ttrpc openapi api memory problemHi Everyone, I am facing memory issues with trpc-openapi. I have a full-stack app in NextJS using TContext being destroyed in mutatorIm currently building an app using the t3 stack + clerk for auth I have an operation which relies oOptimizing Data Refresh with trpc in React/Nextjs? Is there a more efficient way?I'm working on a Nextjs project using trpc, and I've noticed that I'm repeating the same code for dacorsHi! Some problems with cors maybe you can help, ```readingbee.se/:1 Access to fetch at 'https://servShowing pending inside the request?I am using trpc with nextjs but when I am using hooks they're just not returning anything? Like it mOutput properties missing on frontend results (Type Infer)My trpc client is inferring the type without some properties from the object (See images for explenAvoid checking for TRPCClientError, and return the error in client query/mutateWhat i'm trying to do, is avoid doing try/catch on every trpc call to backend, if ZOD validation fai