fix zod and lint errors in the react todo example (#394)

Author: samwillis

eslint.config.mjs

@@ -5,7 +5,14 @@ import { tanstackConfig } from "@tanstack/config/eslint"
 
 export default [
   ...tanstackConfig,
-  { ignores: [`dist/`] },
+  {
+    ignores: [
+      `**/dist/**`,
+      `**/.output/**`,
+      `**/.nitro/**`,
+      `**/traildepot/**`,
+    ],
+  },
   {
     plugins: {
       stylistic: stylisticPlugin,

examples/react/todo/package.json

@@ -12,7 +12,8 @@
     "@tanstack/trailbase-db-collection": "^0.1.0",
     "cors": "^2.8.5",
     "drizzle-orm": "^0.40.1",
-    "drizzle-zod": "^0.7.0",
+    "drizzle-zod": "^0.8.3",
+    "zod": "^4.0.17",
     "express": "^4.19.2",
     "postgres": "^3.4.7",
     "react": "^19.1.0",

examples/react/todo/src/db/validation.ts

@@ -1,34 +1,24 @@
 import { createInsertSchema, createSelectSchema } from "drizzle-zod"
-import { z } from "zod"
 import { config, todos } from "./schema"
+import type { z } from "zod"
 
-// Date transformation schema - handles Date objects, ISO strings, and parseable date strings
-const dateStringToDate = z
-  .union([
-    z.date(), // Already a Date object
-    z
-      .string()
-      .datetime()
-      .transform((str) => new Date(str)), // ISO datetime string
-    z.string().transform((str) => new Date(str)), // Any parseable date string
-  ])
-  .optional()
-
-// Auto-generated schemas from Drizzle schema with date transformation
-export const insertTodoSchema = createInsertSchema(todos, {
-  created_at: dateStringToDate,
-  updated_at: dateStringToDate,
+// Auto-generated schemas from Drizzle schema (omit auto-generated fields)
+export const insertTodoSchema = createInsertSchema(todos).omit({
+  id: true,
+  created_at: true,
+  updated_at: true,
 })
 export const selectTodoSchema = createSelectSchema(todos)
 
 // Partial schema for updates
 export const updateTodoSchema = insertTodoSchema.partial().strict()
 
-// Config schemas with date transformation
-export const insertConfigSchema = createInsertSchema(config, {
-  created_at: dateStringToDate,
-  updated_at: dateStringToDate,
-}).strict()
+// Config schemas (omit auto-generated fields)
+export const insertConfigSchema = createInsertSchema(config).omit({
+  id: true,
+  created_at: true,
+  updated_at: true,
+})
 export const selectConfigSchema = createSelectSchema(config)
 export const updateConfigSchema = insertConfigSchema.partial().strict()
 

examples/react/todo/src/lib/collections.ts

@@ -43,6 +43,9 @@ export const electricTodoCollection = createCollection(
       const txids = await Promise.all(
         transaction.mutations.map(async (mutation) => {
           const { original, changes } = mutation
+          if (!(`id` in original)) {
+            throw new Error(`Original todo not found for update`)
+          }
           const response = await api.todos.update(original.id, changes)
           return response.txid
         })
@@ -53,6 +56,9 @@ export const electricTodoCollection = createCollection(
       const txids = await Promise.all(
         transaction.mutations.map(async (mutation) => {
           const { original } = mutation
+          if (!(`id` in original)) {
+            throw new Error(`Original todo not found for delete`)
+          }
           const response = await api.todos.delete(original.id)
           return response.txid
         })
@@ -92,6 +98,9 @@ export const queryTodoCollection = createCollection(
       return await Promise.all(
         transaction.mutations.map(async (mutation) => {
           const { original, changes } = mutation
+          if (!(`id` in original)) {
+            throw new Error(`Original todo not found for update`)
+          }
           return await api.todos.update(original.id, changes)
         })
       )
@@ -100,6 +109,9 @@ export const queryTodoCollection = createCollection(
       return await Promise.all(
         transaction.mutations.map(async (mutation) => {
           const { original } = mutation
+          if (!(`id` in original)) {
+            throw new Error(`Original todo not found for delete`)
+          }
           await api.todos.delete(original.id)
         })
       )
@@ -158,6 +170,9 @@ export const electricConfigCollection = createCollection(
       const txids = await Promise.all(
         transaction.mutations.map(async (mutation) => {
           const { original, changes } = mutation
+          if (!(`id` in original)) {
+            throw new Error(`Original config not found for update`)
+          }
           const response = await api.config.update(original.id, changes)
           return response.txid
         })
@@ -193,6 +208,9 @@ export const queryConfigCollection = createCollection(
       const txids = await Promise.all(
         transaction.mutations.map(async (mutation) => {
           const { original, changes } = mutation
+          if (!(`id` in original)) {
+            throw new Error(`Original config not found for update`)
+          }
           const response = await api.config.update(original.id, changes)
           return response.txid
         })

examples/react/todo/tsconfig.json

@@ -4,6 +4,7 @@
     "baseUrl": ".",
     "module": "ES2022",
     "moduleResolution": "bundler",
+    "jsx": "react-jsx",
     "paths": {
       "@/*": ["./src/*"]
     }