feat: align trpc usage to official docs (t3-oss#581)

.changeset/loud-ways-flash.md

@@ -0,0 +1,5 @@
+---
+"create-t3-app": minor
+---
+
+export helper procedures for trpc instead of the `t`-object

cli/src/installers/index.ts

@@ -37,10 +37,10 @@ export const dependencyVersionMap = {
   "prettier-plugin-tailwindcss": "^0.1.13",
 
   // tRPC
-  "@trpc/client": "10.0.0-proxy-beta.15",
-  "@trpc/server": "10.0.0-proxy-beta.15",
-  "@trpc/react": "10.0.0-proxy-beta.15",
-  "@trpc/next": "10.0.0-proxy-beta.15",
+  "@trpc/client": "10.0.0-proxy-beta.17",
+  "@trpc/server": "10.0.0-proxy-beta.17",
+  "@trpc/react": "10.0.0-proxy-beta.17",
+  "@trpc/next": "10.0.0-proxy-beta.17",
   "@tanstack/react-query": "^4.10.0",
   superjson: "1.9.1",
 } as const;

cli/template/addons/trpc/auth-context.ts

@@ -1,7 +1,7 @@
 // src/server/router/context.ts
-import * as trpc from "@trpc/server";
-import * as trpcNext from "@trpc/server/adapters/next";
-import { Session } from "next-auth";
+import type { inferAsyncReturnType } from "@trpc/server";
+import type { CreateNextContextOptions } from "@trpc/server/adapters/next";
+import type { Session } from "next-auth";
 import { getServerAuthSession } from "../common/get-server-auth-session";
 
 type CreateContextOptions = {
@@ -22,9 +22,7 @@ export const createContextInner = async (opts: CreateContextOptions) => {
  * This is the actual context you'll use in your router
  * @link https://trpc.io/docs/context
  **/
-export const createContext = async (
-  opts: trpcNext.CreateNextContextOptions,
-) => {
+export const createContext = async (opts: CreateNextContextOptions) => {
   const { req, res } = opts;
 
   // Get the session from the server using the unstable_getServerSession wrapper function
@@ -35,4 +33,4 @@ export const createContext = async (
   });
 };
 
-export type Context = trpc.inferAsyncReturnType<typeof createContext>;
+export type Context = inferAsyncReturnType<typeof createContext>;

cli/template/addons/trpc/auth-index-router.ts

@@ -1,9 +1,9 @@
 // src/server/trpc/router/index.ts
-import { t } from "../trpc";
+import { router } from "../trpc";
 import { exampleRouter } from "./example";
 import { authRouter } from "./auth";
 
-export const appRouter = t.router({
+export const appRouter = router({
   example: exampleRouter,
   auth: authRouter,
 });

cli/template/addons/trpc/auth-prisma-context.ts

@@ -1,7 +1,7 @@
 // src/server/router/context.ts
-import * as trpc from "@trpc/server";
-import * as trpcNext from "@trpc/server/adapters/next";
-import { Session } from "next-auth";
+import type { inferAsyncReturnType } from "@trpc/server";
+import type { CreateNextContextOptions } from "@trpc/server/adapters/next";
+import type { Session } from "next-auth";
 import { getServerAuthSession } from "../common/get-server-auth-session";
 import { prisma } from "../db/client";
 
@@ -24,9 +24,7 @@ export const createContextInner = async (opts: CreateContextOptions) => {
  * This is the actual context you'll use in your router
  * @link https://trpc.io/docs/context
  **/
-export const createContext = async (
-  opts: trpcNext.CreateNextContextOptions,
-) => {
+export const createContext = async (opts: CreateNextContextOptions) => {
   const { req, res } = opts;
 
   // Get the session from the server using the unstable_getServerSession wrapper function
@@ -37,4 +35,4 @@ export const createContext = async (
   });
 };
 
-export type Context = trpc.inferAsyncReturnType<typeof createContext>;
+export type Context = inferAsyncReturnType<typeof createContext>;

cli/template/addons/trpc/auth-router.ts

@@ -1,10 +1,10 @@
-import { t, authedProcedure } from "../trpc";
+import { router, publicProcedure, protectedProcedure } from "../trpc";
 
-export const authRouter = t.router({
-  getSession: t.procedure.query(({ ctx }) => {
+export const authRouter = router({
+  getSession: publicProcedure.query(({ ctx }) => {
     return ctx.session;
   }),
-  getSecretMessage: authedProcedure.query(() => {
+  getSecretMessage: protectedProcedure.query(() => {
     return "You are logged in and can see this secret message!";
   }),
 });

cli/template/addons/trpc/auth-server-utils.ts

@@ -2,22 +2,37 @@ import { initTRPC, TRPCError } from "@trpc/server";
 import type { Context } from "./context";
 import superjson from "superjson";
 
-export const t = initTRPC.context<Context>().create({
+const t = initTRPC.context<Context>().create({
   transformer: superjson,
   errorFormatter({ shape }) {
     return shape;
   },
 });
 
-export const authedProcedure = t.procedure.use(({ ctx, next }) => {
+export const router = t.router;
+
+/**
+ * Unprotected procedure
+ **/
+export const publicProcedure = t.procedure;
+
+/**
+ * Reusable middleware to ensure
+ * users are logged in
+ */
+const isAuthed = t.middleware(({ ctx, next }) => {
   if (!ctx.session || !ctx.session.user) {
     throw new TRPCError({ code: "UNAUTHORIZED" });
   }
   return next({
     ctx: {
-      ...ctx,
-      // infers that `session` is non-nullable to downstream resolvers
+      // infers the `session` as non-nullable
       session: { ...ctx.session, user: ctx.session.user },
     },
   });
 });
+
+/**
+ * Protected procedure
+ **/
+export const protectedProcedure = t.procedure.use(isAuthed);

cli/template/addons/trpc/example-prisma-router.ts

@@ -1,15 +1,15 @@
-import { t } from "../trpc";
+import { router, publicProcedure } from "../trpc";
 import { z } from "zod";
 
-export const exampleRouter = t.router({
-  hello: t.procedure
+export const exampleRouter = router({
+  hello: publicProcedure
     .input(z.object({ text: z.string().nullish() }).nullish())
     .query(({ input }) => {
       return {
         greeting: `Hello ${input?.text ?? "world"}`,
       };
     }),
-  getAll: t.procedure.query(({ ctx }) => {
+  getAll: publicProcedure.query(({ ctx }) => {
     return ctx.prisma.example.findMany();
   }),
 });

cli/template/addons/trpc/example-router.ts

@@ -1,8 +1,8 @@
-import { t } from "../trpc";
+import { router, publicProcedure } from "../trpc";
 import { z } from "zod";
 
-export const exampleRouter = t.router({
-  hello: t.procedure
+export const exampleRouter = router({
+  hello: publicProcedure
     .input(z.object({ text: z.string().nullish() }).nullish())
     .query(({ input }) => {
       return {

cli/template/addons/trpc/index-router.ts

@@ -1,9 +1,9 @@
 // src/server/router/index.ts
-import { t } from "../trpc";
+import { router } from "../trpc";
 
 import { exampleRouter } from "./example";
 
-export const appRouter = t.router({
+export const appRouter = router({
   example: exampleRouter,
 });
 

cli/template/addons/trpc/prisma-context.ts

@@ -1,6 +1,6 @@
 // src/server/router/context.ts
-import * as trpc from "@trpc/server";
-import * as trpcNext from "@trpc/server/adapters/next";
+import type { inferAsyncReturnType } from "@trpc/server";
+import type { CreateNextContextOptions } from "@trpc/server/adapters/next";
 import { prisma } from "../db/client";
 
 /**
@@ -22,10 +22,8 @@ export const createContextInner = async (opts: CreateContextOptions) => {
  * This is the actual context you'll use in your router
  * @link https://trpc.io/docs/context
  **/
-export const createContext = async (
-  opts: trpcNext.CreateNextContextOptions,
-) => {
+export const createContext = async (opts: CreateNextContextOptions) => {
   return await createContextInner({});
 };
 
-export type Context = trpc.inferAsyncReturnType<typeof createContext>;
+export type Context = inferAsyncReturnType<typeof createContext>;

cli/template/addons/trpc/server-utils.ts

@@ -2,9 +2,13 @@ import { initTRPC } from "@trpc/server";
 import type { Context } from "./context";
 import superjson from "superjson";
 
-export const t = initTRPC.context<Context>().create({
+const t = initTRPC.context<Context>().create({
   transformer: superjson,
   errorFormatter({ shape }) {
     return shape;
   },
 });
+
+export const router = t.router;
+
+export const publicProcedure = t.procedure;