feat: switch to postgresql

Author: RihanArfan

app/pages/optimistic-todos.vue

@@ -20,7 +20,7 @@ const { mutate: addTodo } = useMutation({
       method: 'POST',
       body: {
         title,
-        completed: 0
+        completed: false
       }
     }) as Promise<Todo>
   },
@@ -31,7 +31,7 @@ const { mutate: addTodo } = useMutation({
     const oldTodos = queryCache.getQueryData(todosQuery.key) || []
     const newTodoItem = {
       title,
-      completed: 0,
+      completed: false,
       // a negative id to differentiate them from the server ones
       id: -Date.now(),
       createdAt: new Date(),
@@ -97,7 +97,7 @@ const { mutate: toggleTodo } = useMutation({
     $fetch(`/api/todos/${todo.id}`, {
       method: 'PATCH',
       body: {
-        completed: Number(!todo.completed)
+        completed: !todo.completed
       }
     }),
 
@@ -108,7 +108,7 @@ const { mutate: toggleTodo } = useMutation({
     if (todoIndex >= 0) {
       newTodos = oldTodos.toSpliced(todoIndex, 1, {
         ...todo,
-        completed: Number(!todo.completed)
+        completed: !todo.completed
       })
       queryCache.setQueryData(todosQuery.key, newTodos)
     }

app/pages/todos.vue

@@ -63,7 +63,7 @@ const { mutate: toggleTodo } = useMutation({
     $fetch(`/api/todos/${todo.id}`, {
       method: 'PATCH',
       body: {
-        completed: Number(!todo.completed)
+        completed: !todo.completed
       }
     }),
 

drizzle.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from 'drizzle-kit'
 
 export default defineConfig({
-  dialect: 'sqlite',
+  dialect: 'postgresql',
   schema: './server/database/schema.ts',
   out: './server/database/migrations'
 })

package.json

@@ -9,33 +9,37 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@iconify-json/lucide": "^1.2.49",
-    "@iconify-json/simple-icons": "^1.2.38",
-    "@nuxt/ui": "^3.1.3",
+    "@electric-sql/pglite": "^0.3.8",
+    "@iconify-json/lucide": "^1.2.68",
+    "@iconify-json/simple-icons": "^1.2.52",
+    "@nuxt/ui": "^3.3.4",
     "@nuxthub/core": "^0.9.0",
-    "@pinia/colada": "^0.17.1",
-    "@pinia/colada-nuxt": "^0.2.1",
-    "@pinia/nuxt": "^0.11.1",
-    "drizzle-kit": "^0.31.1",
-    "drizzle-orm": "0.44.2",
-    "h3-zod": "^0.5.3",
-    "nuxt": "^3.17.5",
-    "nuxt-auth-utils": "^0.5.20",
+    "@pinia/colada": "^0.17.5",
+    "@pinia/colada-nuxt": "^0.2.2",
+    "@pinia/nuxt": "^0.11.2",
+    "@types/pg": "^8.15.5",
+    "drizzle-kit": "^0.31.4",
+    "drizzle-orm": "0.44.5",
+    "nuxt": "^4.1.2",
+    "nuxt-auth-utils": "^0.5.25",
+    "pg": "^8.16.3",
     "pinia": "^3.0.3",
-    "zod": "^3.25.67"
+    "zod": "^4.1.9"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^2.5.0",
-    "@nuxt/eslint": "^1.4.1",
-    "eslint": "^9.29.0",
-    "typescript": "^5.8.3",
-    "wrangler": "^4.20.1"
+    "@nuxt/devtools": "^2.6.3",
+    "@nuxt/eslint": "^1.9.0",
+    "eslint": "^9.35.0",
+    "typescript": "^5.9.2"
   },
-  "packageManager": "pnpm@10.12.1",
+  "packageManager": "pnpm@10.17.0",
   "pnpm": {
     "onlyBuiltDependencies": [
+      "@parcel/watcher",
       "@tailwindcss/oxide",
+      "better-sqlite3",
       "esbuild",
+      "libpq",
       "sharp",
       "unrs-resolver",
       "vue-demi",

pnpm-lock.yaml

@@ -1,18 +1,21 @@
-import { eq, and } from 'drizzle-orm'
-import { useValidatedParams, zh } from 'h3-zod'
+import { z } from 'zod'
+
+const ParamsSchema = z.object({
+  id: z.coerce.number().int()
+})
 
 export default eventHandler(async (event) => {
-  const { id } = await useValidatedParams(event, {
-    id: zh.intAsString
-  })
+  const { id } = await getValidatedQuery(event, ParamsSchema.parse)
   const { user } = await requireUserSession(event)
 
-  // List todos for the current user
-  const deletedTodo = await useDB().delete(tables.todos).where(and(
+  // Delete todo for the current user
+  const db = await useDB()
+  const deletedTodos = await db.delete(tables.todos).where(and(
     eq(tables.todos.id, id),
     eq(tables.todos.userId, user.id)
-  )).returning().get()
+  )).returning()
 
+  const deletedTodo = deletedTodos[0]
   if (!deletedTodo) {
     throw createError({
       statusCode: 404,

server/api/todos/[id].delete.ts

@@ -1,22 +1,37 @@
-import { eq, and } from 'drizzle-orm'
-import { useValidatedParams, useValidatedBody, z, zh } from 'h3-zod'
+import { z } from 'zod'
+
+const ParamsSchema = z.object({
+  id: z.coerce.number().int()
+})
+
+const BodySchema = z.object({
+  completed: z.boolean()
+})
 
 export default eventHandler(async (event) => {
-  const { id } = await useValidatedParams(event, {
-    id: zh.intAsString
-  })
-  const { completed } = await useValidatedBody(event, {
-    completed: z.number().int().min(0).max(1)
-  })
+  const { id } = await getValidatedQuery(event, ParamsSchema.parse)
+  const { completed } = await readValidatedBody(event, BodySchema.parse)
   const { user } = await requireUserSession(event)
 
-  // List todos for the current user
-  const todo = await useDB().update(tables.todos).set({
-    completed
+  // SQlite:
+  // const isCompleted = completed ? 1 : 0
+  const isCompleted = completed
+
+  // Update todo for the current user
+  const db = await useDB()
+  const updatedTodos = await db.update(tables.todos).set({
+    completed: isCompleted
   }).where(and(
     eq(tables.todos.id, id),
     eq(tables.todos.userId, user.id)
-  )).returning().get()
+  )).returning()
 
+  const todo = updatedTodos[0]
+  if (!todo) {
+    throw createError({
+      statusCode: 404,
+      message: 'Todo not found'
+    })
+  }
   return todo
 })

server/api/todos/[id].patch.ts

@@ -1,10 +1,9 @@
-import { eq } from 'drizzle-orm'
-
 export default eventHandler(async (event) => {
   const { user } = await requireUserSession(event)
 
   // List todos for the current user
-  const todos = await useDB().select().from(tables.todos).where(eq(tables.todos.userId, user.id)).all()
+  const db = await useDB()
+  const todos = await db.select().from(tables.todos).where(eq(tables.todos.userId, user.id))
 
   return todos as Todo[]
 })

server/api/todos/index.get.ts

@@ -1,17 +1,20 @@
-import { useValidatedBody, z } from 'h3-zod'
+import { z } from 'zod'
+
+const BodySchema = z.object({
+  title: z.string().min(1).max(100)
+})
 
 export default eventHandler(async (event) => {
-  const { title } = await useValidatedBody(event, {
-    title: z.string().min(1).max(100)
-  })
+  const { title } = await readValidatedBody(event, body => BodySchema.parse(body))
   const { user } = await requireUserSession(event)
 
   // Insert todo for the current user
-  const todo = await useDB().insert(tables.todos).values({
+  const db = await useDB()
+  const todos = await db.insert(tables.todos).values({
     userId: user.id,
     title,
     createdAt: new Date()
-  }).returning().get()
+  }).returning()
 
-  return todo
+  return todos[0]
 })

server/api/todos/index.post.ts

@@ -1,9 +1,10 @@
-import { sql } from 'drizzle-orm'
-
 export default eventHandler(async () => {
   // Count the total number of todos
-  return await useDB().select({
+  const db = await useDB()
+  const result = await db.select({
     todos: sql<number>`count(*)`,
     users: sql<number>`count(distinct(${tables.todos.userId}))`
-  }).from(tables.todos).get()
+  }).from(tables.todos)
+
+  return result[0]
 })