flatten post requests' input

packages/client/src/internals/httpRequest.ts

@@ -39,9 +39,8 @@ export function httpRequest<TResponseShape = TRPCResponse>(props: {
     if (type === 'query') {
       return undefined;
     }
-    return JSON.stringify({
-      input: rt.transformer.serialize(input),
-    });
+    const rawInput = rt.transformer.serialize(input);
+    return rawInput !== undefined ? JSON.stringify(rawInput) : undefined;
   }
 
   const promise = new Promise<TResponseShape>((resolve, reject) => {

packages/server/src/http/internals/getPostBody.ts

@@ -23,6 +23,10 @@ export async function getPostBody({
     });
     req.on('end', () => {
       try {
+        if (body === '') {
+          resolve(undefined);
+          return;
+        }
         const json = JSON.parse(body);
         resolve(json);
       } catch (err) {

packages/server/src/http/requestHandler.ts

@@ -54,9 +54,21 @@ async function getRequestParams({
     return { input };
   }
 
-  const { input } = await getPostBody({ req, maxBodySize });
+  const body = await getPostBody({ req, maxBodySize });
+  /**
+   * @deprecated TODO delete me for next major
+   * */
+  if (
+    body &&
+    typeof body === 'object' &&
+    'input' in body &&
+    Object.keys(body).length === 1
+  ) {
+    // legacy format
+    return { input: body.input };
+  }
 
-  return { input };
+  return { input: body };
 }
 
 export async function requestHandler<

packages/server/test/_testHelpers.ts

@@ -85,6 +85,7 @@ export function routerToServerAndClient<TRouter extends AnyRouter>(
     port: httpPort,
     httpPort,
     wssPort,
+    httpUrl,
     applyWSSHandlerOpts,
     wssHandler,
     wss,

packages/server/test/rawFetch.test.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-types */
+import { z } from 'zod';
+import * as trpc from '../src';
+import { routerToServerAndClient } from './_testHelpers';
+import fetch from 'node-fetch';
+test('call mutation with `input`-prop', async () => {
+  const { close, httpUrl } = routerToServerAndClient(
+    trpc.router().mutation('myMutation', {
+      input: z.object({
+        name: z.string(),
+      }),
+      async resolve({ input }) {
+        return { input };
+      },
+    }),
+  );
+
+  const res = await fetch(`${httpUrl}/myMutation`, {
+    method: 'POST',
+    body: JSON.stringify({
+      input: {
+        name: 'alexdotjs',
+      },
+    }),
+  });
+  const json = await res.json();
+
+  expect(json.result).toMatchInlineSnapshot(`
+Object {
+  "data": Object {
+    "input": Object {
+      "name": "alexdotjs",
+    },
+  },
+  "type": "data",
+}
+`);
+
+  close();
+});

www/docs/further/further-reading.md

@@ -36,8 +36,8 @@ tRPC is a lot simpler and couples your server & website/app more tightly togethe
 
 ### HTTP Methods <-> Type mapping
 
-| HTTP Method          | Mapping           | Notes                                                                                                  |
-| -------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ |
-| `GET`                | `.query()`        | Input JSON-stringified in query param.<br/>_e.g._ `?input=${JSON.stringify(encodeURIComponent(input))` |
-| `POST`               | `.mutation()`     | Input in post body.                                                                                    |
-| `PATCH` / WebSockets | `.subscription()` | Input in post body.<br/>:warning: Experimental. API might change without major version bump.           |
+| HTTP Method | Mapping           | Notes                                                                                                  |
+| ----------- | ----------------- | ------------------------------------------------------------------------------------------------------ |
+| `GET`       | `.query()`        | Input JSON-stringified in query param.<br/>_e.g._ `?input=${JSON.stringify(encodeURIComponent(input))` |
+| `POST`      | `.mutation()`     | Input as post body.                                                                                    |
+| WebSockets  | `.subscription()` | Input as post body.<br/>:warning: Experimental. API might change without major version bump.           |