Refactor: Use Prisma's typedSql and LibSQL adapter

This commit updates the project to use Prisma's typedSql feature for more type-safe SQL queries. It also integrates the LibSQL adapter, enabling the use of LibSQL as the database. This includes changes to Prisma schema, route loaders, and dependency management.

Co-authored-by: me <[email protected]>

Author: cursoragent

app/routes/users+/index.tsx

@@ -4,6 +4,7 @@ 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 { searchUsers } from '#app/utils/prisma-generated.server/sql/searchUsers.ts'
 import { cn, getUserImgSrc, useDelayedIsPending } from '#app/utils/misc.tsx'
 import { type Route } from './+types/index.ts'
 
@@ -13,20 +14,7 @@ export async function loader({ request }: Route.LoaderArgs) {
 		return redirect('/users')
 	}
 
-	const users = await prisma.user.findMany({
-		where: {
-			OR: [
-				{ name: { contains: searchTerm ?? '' } },
-				{ username: { contains: searchTerm ?? '' } },
-			],
-		},
-		select: {
-			id: true,
-			name: true,
-			username: true,
-			image: { select: { objectKey: true } },
-		},
-	})
+	const users = await prisma.$queryRawTyped(searchUsers(`%${searchTerm ?? ''}%`))
 	return { status: 'idle', users } as const
 }
 
@@ -60,7 +48,7 @@ export default function UsersRoute({ loaderData }: Route.ComponentProps) {
 									>
 										<Img
 											alt={user.name ?? user.username}
-            src={getUserImgSrc(user.image?.objectKey)}
+											src={getUserImgSrc(user.imageObjectKey)}
 											className="size-16 rounded-full"
 											width={256}
 											height={256}

app/utils/auth.server.ts

@@ -1,5 +1,5 @@
 import crypto from 'node:crypto'
-import { type Connection, type Password, type User } from '#app/utils/prisma-generated.server'
+import { type Connection, type Password, type User } from '#app/utils/prisma-generated.server/client.ts'
 import bcrypt from 'bcryptjs'
 import { redirect } from 'react-router'
 import { Authenticator } from 'remix-auth'

app/utils/db.server.ts

@@ -1,7 +1,6 @@
 import { styleText } from 'node:util'
 import { remember } from '@epic-web/remember'
-import * as PrismaClientModule from '#app/utils/prisma-generated.server/index.js'
-const { PrismaClient } = PrismaClientModule
+import { PrismaClient } from '#app/utils/prisma-generated.server/client.ts'
 
 export const prisma = remember('prisma', () => {
 	// NOTE: if you change anything in this function you'll need to restart

eslint.config.js

@@ -9,6 +9,6 @@ export default [
 		rules: { 'react-hooks/rules-of-hooks': 'off' },
 	},
 	{
-		ignores: ['.react-router/*', './app/utils/prisma-generated.server'],
+		ignores: ['.react-router/*', './app/utils/prisma-generated.server/**'],
 	},
 ]