Theo's Typesafe Cult•13mo ago

trpc fetch failed in server actions: Request body length does not match content-length header

Hello guys ! I was trying out the new t3-app boilerplate with the app router and in the example, we have: - Two queries in server side (hello and latest post) - A mutation in client side (create post) I tried to create a mutation in server side like so:

async function createPostAction(formData: FormData) {
  "use server";

  const postName = formData.get("name")?.toString();

  await api.post.create.mutate({ name: postName });
  revalidatePath("/");
}

async function createPostAction(formData: FormData) {
  "use server";

  const postName = formData.get("name")?.toString();

  await api.post.create.mutate({ name: postName });
  revalidatePath("/");
}

But i have this error message:

RequestContentLengthMismatchError: Request body length does not match content-length header

RequestContentLengthMismatchError: Request body length does not match content-length header

with code

UND_ERR_REQ_CONTENT_LENGTH_MISMATCH

UND_ERR_REQ_CONTENT_LENGTH_MISMATCH

Is trpc mutation supported in server actions or am I doing something impossible ? I suspect it's due to error headers are set for trpc in the server side but i'm not sure...

7 Replies

FélixOP•13mo ago

@julius you might have the answer to this ? I don't know if it's allowed to tag people, if not, i'm sorry !

julius•13mo ago

hmm looks like bad headers... try this in the link options

headers() {
  return {
    cookie: cookies().toString(),
    'x-trpc-source': '...',
  };
},

headers() {
  return {
    cookie: cookies().toString(),
    'x-trpc-source': '...',
  };
},

shouldn't need to forward every header really... cookie should be enough to get authed

FélixOP•13mo ago

Thank you for your answer ! I found a way to make it work but still need to check it broke nothing. Previous way to set headers (giving us the error):

headers() {
  const heads = new Map(headers());
  heads.set("x-trpc-source", "rsc");
  return Object.fromEntries(heads);
}

headers() {
  const heads = new Map(headers());
  heads.set("x-trpc-source", "rsc");
  return Object.fromEntries(heads);
}

New way to set headers:

headers() {
  const heads = new Map();
  heads.set("cookie", cookies().toString());
  heads.set("x-trpc-source", "rsc");
  return Object.fromEntries(heads);
}

headers() {
  const heads = new Map();
  heads.set("cookie", cookies().toString());
  heads.set("x-trpc-source", "rsc");
  return Object.fromEntries(heads);
}

The first nextjs headers that was passed is empty.

NotLuksus•13mo ago

I have the same error, but when I call a client side mutation. Any ideas?

NotLuksus•13mo ago

These are the logs I get, it mentions a server component error which I don't understand since the mutation runs on the client. The mutation also works, I just keep getting these logs

NotLuksus•13mo ago

Detailed logs

NotLuksus•13mo ago

I tried upgrading to the latest ct3a now I get

Gaming

Programming

trpc fetch failed in server actions: Request body length does not match content-length header