diff options
| -rw-r--r-- | packages/web/src/app/_components/post.tsx | 12 | ||||
| -rw-r--r-- | packages/web/src/server/api/trpc.ts | 14 | ||||
| -rw-r--r-- | packages/web/src/server/db/schema.ts | 14 | ||||
| -rw-r--r-- | packages/web/src/trpc/server.ts | 6 |
4 files changed, 25 insertions, 21 deletions
diff --git a/packages/web/src/app/_components/post.tsx b/packages/web/src/app/_components/post.tsx index 532fc91..9a1251f 100644 --- a/packages/web/src/app/_components/post.tsx +++ b/packages/web/src/app/_components/post.tsx @@ -5,11 +5,11 @@ import { api } from "~/trpc/react"; export function LatestPost() { const [latestPost] = api.post.getLatest.useSuspenseQuery(); - const utils = api.useUtils(); + const trpcUtilities = api.useUtils(); const [name, setName] = useState(""); const createPost = api.post.create.useMutation({ onSuccess: async () => { - await utils.post.invalidate(); + await trpcUtilities.post.invalidate(); setName(""); }, }); @@ -23,14 +23,16 @@ export function LatestPost() { )} <form className="flex flex-col gap-2" - onSubmit={(e) => { - e.preventDefault(); + onSubmit={(formSubmitEvent) => { + formSubmitEvent.preventDefault(); createPost.mutate({ name }); }} > <input className="w-full rounded-full bg-white/10 px-4 py-2 text-white" - onChange={(e) => setName(e.target.value)} + onChange={(inputChangeEvent) => + setName(inputChangeEvent.target.value) + } placeholder="Title" type="text" value={name} diff --git a/packages/web/src/server/api/trpc.ts b/packages/web/src/server/api/trpc.ts index e4dd0ab..56dcb4c 100644 --- a/packages/web/src/server/api/trpc.ts +++ b/packages/web/src/server/api/trpc.ts @@ -42,7 +42,7 @@ export const createTRPCContext = async (opts: { headers: Headers }) => { * ZodErrors so that you get typesafety on the frontend if your procedure fails due to validation * errors on the backend. */ -const t = initTRPC.context<typeof createTRPCContext>().create({ +const trpcInstance = initTRPC.context<typeof createTRPCContext>().create({ transformer: superjson, errorFormatter({ shape, error }) { return { @@ -61,7 +61,7 @@ const t = initTRPC.context<typeof createTRPCContext>().create({ * * @see https://trpc.io/docs/server/server-side-calls */ -export const createCallerFactory = t.createCallerFactory; +export const createCallerFactory = trpcInstance.createCallerFactory; /** * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT) @@ -75,7 +75,7 @@ export const createCallerFactory = t.createCallerFactory; * * @see https://trpc.io/docs/router */ -export const createTRPCRouter = t.router; +export const createTRPCRouter = trpcInstance.router; /** * Middleware for timing procedure execution and adding an artificial delay in development. @@ -83,10 +83,10 @@ export const createTRPCRouter = t.router; * You can remove this if you don't like it, but it can help catch unwanted waterfalls by simulating * network latency that would occur in production but not in local development. */ -const timingMiddleware = t.middleware(async ({ next, path }) => { +const timingMiddleware = trpcInstance.middleware(async ({ next, path }) => { const start = Date.now(); - if (t._config.isDev) { + if (trpcInstance._config.isDev) { // artificial delay in dev const waitMs = Math.floor(Math.random() * 400) + 100; @@ -108,7 +108,7 @@ const timingMiddleware = t.middleware(async ({ next, path }) => { * guarantee that a user querying is authorized, but you can still access user session data if they * are logged in. */ -export const publicProcedure = t.procedure.use(timingMiddleware); +export const publicProcedure = trpcInstance.procedure.use(timingMiddleware); /** * Protected (authenticated) procedure @@ -118,7 +118,7 @@ export const publicProcedure = t.procedure.use(timingMiddleware); * * @see https://trpc.io/docs/procedures */ -export const protectedProcedure = t.procedure +export const protectedProcedure = trpcInstance.procedure .use(timingMiddleware) .use(({ ctx, next }) => { if (!ctx.user) { diff --git a/packages/web/src/server/db/schema.ts b/packages/web/src/server/db/schema.ts index aae0ace..6b3965a 100644 --- a/packages/web/src/server/db/schema.ts +++ b/packages/web/src/server/db/schema.ts @@ -9,15 +9,17 @@ import { index, pgTableCreator } from "drizzle-orm/pg-core"; export const createTable = pgTableCreator((name) => `web_${name}`); export const posts = createTable( "post", - (d) => ({ - id: d.integer().primaryKey().generatedByDefaultAsIdentity(), - name: d.varchar({ length: 256 }), - createdById: d.varchar({ length: 255 }).notNull(), - createdAt: d + (columnBuilder) => ({ + id: columnBuilder.integer().primaryKey().generatedByDefaultAsIdentity(), + name: columnBuilder.varchar({ length: 256 }), + createdById: columnBuilder.varchar({ length: 255 }).notNull(), + createdAt: columnBuilder .timestamp({ withTimezone: true }) .$defaultFn(() => new Date()) .notNull(), - updatedAt: d.timestamp({ withTimezone: true }).$onUpdate(() => new Date()), + updatedAt: columnBuilder + .timestamp({ withTimezone: true }) + .$onUpdate(() => new Date()), }), (t) => [ index("created_by_idx").on(t.createdById), diff --git a/packages/web/src/trpc/server.ts b/packages/web/src/trpc/server.ts index 4bebc5a..59b463d 100644 --- a/packages/web/src/trpc/server.ts +++ b/packages/web/src/trpc/server.ts @@ -11,12 +11,12 @@ import { createQueryClient } from "./query-client"; * handling a tRPC call from a React Server Component. */ const createContext = cache(async () => { - const heads = new Headers(await headers()); + const requestHeaders = new Headers(await headers()); - heads.set("x-trpc-source", "rsc"); + requestHeaders.set("x-trpc-source", "rsc"); return createTRPCContext({ - headers: heads, + headers: requestHeaders, }); }); const getQueryClient = cache(createQueryClient); |