Refactor user search with Prisma typed SQL and remove zod validation

Author: kentcdodds

app/routes/users+/index.tsx

@@ -1,53 +1,22 @@
+import { searchUsers } from '@prisma/client/sql'
 import { Img } from 'openimg/react'
-import { data, redirect, Link } from 'react-router'
-import { z } from 'zod'
+import { redirect, Link } from 'react-router'
 import { GeneralErrorBoundary } from '#app/components/error-boundary.tsx'
 import { ErrorList } from '#app/components/forms.tsx'
 import { SearchBar } from '#app/components/search-bar.tsx'
 import { prisma } from '#app/utils/db.server.ts'
 import { cn, getUserImgSrc, useDelayedIsPending } from '#app/utils/misc.tsx'
 import { type Route } from './+types/index.ts'
 
-const UserSearchResultSchema = z.object({
-	id: z.string(),
-	username: z.string(),
-	name: z.string().nullable(),
-	imageId: z.string().nullable(),
-	imageObjectKey: z.string().nullable(),
-})
-
-const UserSearchResultsSchema = z.array(UserSearchResultSchema)
-
 export async function loader({ request }: Route.LoaderArgs) {
 	const searchTerm = new URL(request.url).searchParams.get('search')
 	if (searchTerm === '') {
 		return redirect('/users')
 	}
 
 	const like = `%${searchTerm ?? ''}%`
-	const rawUsers = await prisma.$queryRaw`
-		SELECT User.id, User.username, User.name, UserImage.id AS imageId, UserImage.objectKey AS imageObjectKey
-		FROM User
-		LEFT JOIN UserImage ON User.id = UserImage.userId
-		WHERE User.username LIKE ${like}
-		OR User.name LIKE ${like}
-		ORDER BY (
-			SELECT Note.updatedAt
-			FROM Note
-			WHERE Note.ownerId = User.id
-			ORDER BY Note.updatedAt DESC
-			LIMIT 1
-		) DESC
-		LIMIT 50
-	`
-
-	const result = UserSearchResultsSchema.safeParse(rawUsers)
-	if (!result.success) {
-		return data({ status: 'error', error: result.error.message } as const, {
-			status: 400,
-		})
-	}
-	return { status: 'idle', users: result.data } as const
+	const users = await prisma.$queryRawTyped(searchUsers(like))
+	return { status: 'idle', users } as const
 }
 
 export default function UsersRoute({ loaderData }: Route.ComponentProps) {
@@ -56,10 +25,6 @@ export default function UsersRoute({ loaderData }: Route.ComponentProps) {
 		formAction: '/users',
 	})
 
-	if (loaderData.status === 'error') {
-		console.error(loaderData.error)
-	}
-
 	return (
 		<div className="container mb-48 mt-36 flex flex-col items-center justify-center gap-6">
 			<h1 className="text-h1">Epic Notes Users</h1>

prisma/schema.prisma

@@ -2,7 +2,8 @@
 // learn more about it in the docs: https://pris.ly/d/prisma-schema
 
 generator client {
-  provider = "prisma-client-js"
+  provider        = "prisma-client-js"
+  previewFeatures = ["typedSql"]
 }
 
 datasource db {

prisma/sql/searchUsers.sql

@@ -0,0 +1,19 @@
+-- @param {String} $1:like
+SELECT 
+  "User".id,
+  "User".username,
+  "User".name,
+  "UserImage".id AS imageId,
+  "UserImage".objectKey AS imageObjectKey
+FROM "User"
+LEFT JOIN "UserImage" ON "User".id = "UserImage".userId
+WHERE "User".username LIKE :like
+OR "User".name LIKE :like
+ORDER BY (
+  SELECT "Note".updatedAt
+  FROM "Note"
+  WHERE "Note".ownerId = "User".id
+  ORDER BY "Note".updatedAt DESC
+  LIMIT 1
+) DESC
+LIMIT 50