feat: expose trpc types to client for app router (#1842)

.changeset/great-hornets-remain.md

@@ -0,0 +1,5 @@
+---
+"create-t3-app": minor
+---
+
+Infers tRPC input & output types to the client for app router

cli/template/extras/src/trpc/react.tsx

@@ -3,6 +3,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
 import { createTRPCReact } from "@trpc/react-query";
+import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
 import { useState } from "react";
 import SuperJSON from "superjson";
 
@@ -22,6 +23,20 @@ const getQueryClient = () => {
 
 export const api = createTRPCReact<AppRouter>();
 
+/**
+ * Inference helper for inputs.
+ *
+ * @example type HelloInput = RouterInputs['example']['hello']
+ */
+export type RouterInputs = inferRouterInputs<AppRouter>;
+
+/**
+ * Inference helper for outputs.
+ *
+ * @example type HelloOutput = RouterOutputs['example']['hello']
+ */
+export type RouterOutputs = inferRouterOutputs<AppRouter>;
+
 export function TRPCReactProvider(props: { children: React.ReactNode }) {
  const queryClient = getQueryClient();