SharpieMaster
SharpieMaster•2y ago

trpc error fetch failed

please help
2 Replies
SharpieMaster
SharpieMasterOP•2y 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
Lucas•2y 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());;
          },

Did you find this page helpful?