SharpieMaster
SharpieMaster9mo ago

trpc error fetch failed

please help
2 Replies
SharpieMaster
SharpieMaster9mo ago
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
Lucas
Lucas9mo ago
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());;
},
More 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 T