trpc error fetch failed

SSharpieMaster

9/26/2023

please help

SSharpieMaster

9/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

LLucas

9/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!

tRPC

trpc error fetch failed

Join Server

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/compo TypeScript 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 an 2 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 query Suspend 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#conse return type of a query endpointHello I currently have a trpc endpoint: ```ts const customInstances = api.customInstance.userCust Troubleshooting '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 t How to trigger revalidate after server action on a client componenthttps://github.com/trpc/examples-next-app-dir/blob/main/src/app/server-action/ReactHookFormExample.t trpc openapi api memory problemHi Everyone, I am facing memory issues with trpc-openapi. I have a full-stack app in NextJS using T Context being destroyed in mutatorIm currently building an app using the t3 stack + clerk for auth I have an operation which relies o Optimizing 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 da corsHi! Some problems with cors maybe you can help, ```readingbee.se/:1 Access to fetch at 'https://serv Showing pending inside the request?I am using trpc with nextjs but when I am using hooks they're just not returning anything? Like it m Output properties missing on frontend results (Type Infer)My trpc client is inferring the type without some properties from the object (See images for explen Avoid 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