migrate to use tanstack query for all server state

Author: waleedlatif1

apps/sim/app/api/table/[tableId]/rows/route.ts

@@ -77,6 +77,16 @@ const DeleteRowsByFilterSchema = z.object({
     .optional(),
 })
 
+const DeleteRowsByIdsSchema = z.object({
+  workspaceId: z.string().min(1, 'Workspace ID is required'),
+  rowIds: z
+    .array(z.string().min(1), { required_error: 'Row IDs are required' })
+    .min(1, 'At least one row ID is required')
+    .max(1000, 'Cannot delete more than 1000 rows per operation'),
+})
+
+const DeleteRowsRequestSchema = z.union([DeleteRowsByFilterSchema, DeleteRowsByIdsSchema])
+
 interface TableRowsRouteParams {
   params: Promise<{ tableId: string }>
 }
@@ -577,7 +587,7 @@ export async function DELETE(request: NextRequest, { params }: TableRowsRoutePar
     }
 
     const body: unknown = await request.json()
-    const validated = DeleteRowsByFilterSchema.parse(body)
+    const validated = DeleteRowsRequestSchema.parse(body)
 
     const accessResult = await checkAccess(tableId, authResult.userId, 'write')
     if (!accessResult.ok) return accessError(accessResult, requestId, tableId)
@@ -596,41 +606,73 @@ export async function DELETE(request: NextRequest, { params }: TableRowsRoutePar
       eq(userTableRows.workspaceId, validated.workspaceId),
     ]
 
-    const filterClause = buildFilterClause(validated.filter as Filter, USER_TABLE_ROWS_SQL_NAME)
-    if (filterClause) {
-      baseConditions.push(filterClause)
-    }
+    let rowIds: string[] = []
+    let missingRowIds: string[] | undefined
+    let requestedCount: number | undefined
 
-    let matchingRowsQuery = db
-      .select({ id: userTableRows.id })
-      .from(userTableRows)
-      .where(and(...baseConditions))
+    if ('rowIds' in validated) {
+      const uniqueRequestedRowIds = Array.from(new Set(validated.rowIds))
+      requestedCount = uniqueRequestedRowIds.length
 
-    if (validated.limit) {
-      matchingRowsQuery = matchingRowsQuery.limit(validated.limit) as typeof matchingRowsQuery
-    }
+      const matchingRows = await db
+        .select({ id: userTableRows.id })
+        .from(userTableRows)
+        .where(
+          and(
+            ...baseConditions,
+            sql`${userTableRows.id} = ANY(ARRAY[${sql.join(
+              uniqueRequestedRowIds.map((id) => sql`${id}`),
+              sql`, `
+            )}])`
+          )
+        )
 
-    const matchingRows = await matchingRowsQuery
+      const matchedRowIds = matchingRows.map((r) => r.id)
+      const matchedIdSet = new Set(matchedRowIds)
+      missingRowIds = uniqueRequestedRowIds.filter((id) => !matchedIdSet.has(id))
+      rowIds = matchedRowIds
+    } else {
+      const filterClause = buildFilterClause(validated.filter as Filter, USER_TABLE_ROWS_SQL_NAME)
+      if (filterClause) {
+        baseConditions.push(filterClause)
+      }
 
-    if (matchingRows.length === 0) {
+      let matchingRowsQuery = db
+        .select({ id: userTableRows.id })
+        .from(userTableRows)
+        .where(and(...baseConditions))
+
+      if (validated.limit) {
+        matchingRowsQuery = matchingRowsQuery.limit(validated.limit) as typeof matchingRowsQuery
+      }
+
+      const matchingRows = await matchingRowsQuery
+      rowIds = matchingRows.map((r) => r.id)
+    }
+
+    if (rowIds.length === 0) {
       return NextResponse.json(
         {
           success: true,
           data: {
-            message: 'No rows matched the filter criteria',
+            message:
+              'rowIds' in validated
+                ? 'No matching rows found for the provided IDs'
+                : 'No rows matched the filter criteria',
             deletedCount: 0,
+            deletedRowIds: [],
+            ...(requestedCount !== undefined ? { requestedCount } : {}),
+            ...(missingRowIds ? { missingRowIds } : {}),
           },
         },
         { status: 200 }
       )
     }
 
-    if (matchingRows.length > TABLE_LIMITS.DELETE_BATCH_SIZE) {
-      logger.warn(`[${requestId}] Deleting ${matchingRows.length} rows. This may take some time.`)
+    if (rowIds.length > TABLE_LIMITS.DELETE_BATCH_SIZE) {
+      logger.warn(`[${requestId}] Deleting ${rowIds.length} rows. This may take some time.`)
     }
 
-    const rowIds = matchingRows.map((r) => r.id)
-
     await db.transaction(async (trx) => {
       let totalDeleted = 0
 
@@ -653,14 +695,16 @@ export async function DELETE(request: NextRequest, { params }: TableRowsRoutePar
       }
     })
 
-    logger.info(`[${requestId}] Deleted ${matchingRows.length} rows from table ${tableId}`)
+    logger.info(`[${requestId}] Deleted ${rowIds.length} rows from table ${tableId}`)
 
     return NextResponse.json({
       success: true,
       data: {
         message: 'Rows deleted successfully',
-        deletedCount: matchingRows.length,
+        deletedCount: rowIds.length,
         deletedRowIds: rowIds,
+        ...(requestedCount !== undefined ? { requestedCount } : {}),
+        ...(missingRowIds ? { missingRowIds } : {}),
       },
     })
   } catch (error) {

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { AlertCircle } from 'lucide-react'
 import { useParams } from 'next/navigation'
@@ -17,6 +17,12 @@ import {
   Textarea,
 } from '@/components/emcn'
 import type { ColumnDefinition, TableInfo, TableRow } from '@/lib/table'
+import {
+  useCreateTableRow,
+  useDeleteTableRow,
+  useDeleteTableRows,
+  useUpdateTableRow,
+} from '@/hooks/queries/tables'
 
 const logger = createLogger('RowModal')
 
@@ -92,126 +98,78 @@ function formatValueForInput(value: unknown, type: string): string {
   return String(value)
 }
 
+function getInitialRowData(
+  mode: RowModalProps['mode'],
+  columns: ColumnDefinition[],
+  row?: TableRow
+): Record<string, unknown> {
+  if (mode === 'add' && columns.length > 0) {
+    return createInitialRowData(columns)
+  }
+  if (mode === 'edit' && row) {
+    return row.data
+  }
+  return {}
+}
+
 export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess }: RowModalProps) {
   const params = useParams()
   const workspaceId = params.workspaceId as string
+  const tableId = table.id
 
   const schema = table?.schema
   const columns = schema?.columns || []
 
-  const [rowData, setRowData] = useState<Record<string, unknown>>({})
+  const [rowData, setRowData] = useState<Record<string, unknown>>(() =>
+    getInitialRowData(mode, columns, row)
+  )
   const [error, setError] = useState<string | null>(null)
-  const [isSubmitting, setIsSubmitting] = useState(false)
-
-  // Initialize form data based on mode
-  useEffect(() => {
-    if (!isOpen) return
-
-    if (mode === 'add' && columns.length > 0) {
-      setRowData(createInitialRowData(columns))
-    } else if (mode === 'edit' && row) {
-      setRowData(row.data)
-    }
-  }, [isOpen, mode, columns, row])
+  const createRowMutation = useCreateTableRow({ workspaceId, tableId })
+  const updateRowMutation = useUpdateTableRow({ workspaceId, tableId })
+  const deleteRowMutation = useDeleteTableRow({ workspaceId, tableId })
+  const deleteRowsMutation = useDeleteTableRows({ workspaceId, tableId })
+  const isSubmitting =
+    createRowMutation.isPending ||
+    updateRowMutation.isPending ||
+    deleteRowMutation.isPending ||
+    deleteRowsMutation.isPending
 
   const handleFormSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setError(null)
-    setIsSubmitting(true)
 
     try {
       const cleanData = cleanRowData(columns, rowData)
 
       if (mode === 'add') {
-        const res = await fetch(`/api/table/${table?.id}/rows`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ workspaceId, data: cleanData }),
-        })
-
-        const result: { error?: string } = await res.json()
-        if (!res.ok) {
-          throw new Error(result.error || 'Failed to add row')
-        }
+        await createRowMutation.mutateAsync(cleanData)
       } else if (mode === 'edit' && row) {
-        const res = await fetch(`/api/table/${table?.id}/rows/${row.id}`, {
-          method: 'PATCH',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ workspaceId, data: cleanData }),
-        })
-
-        const result: { error?: string } = await res.json()
-        if (!res.ok) {
-          throw new Error(result.error || 'Failed to update row')
-        }
+        await updateRowMutation.mutateAsync({ rowId: row.id, data: cleanData })
       }
 
       onSuccess()
     } catch (err) {
       logger.error(`Failed to ${mode} row:`, err)
       setError(err instanceof Error ? err.message : `Failed to ${mode} row`)
-    } finally {
-      setIsSubmitting(false)
     }
   }
 
   const handleDelete = async () => {
     setError(null)
-    setIsSubmitting(true)
 
     const idsToDelete = rowIds ?? (row ? [row.id] : [])
 
     try {
       if (idsToDelete.length === 1) {
-        const res = await fetch(`/api/table/${table?.id}/rows/${idsToDelete[0]}`, {
-          method: 'DELETE',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ workspaceId }),
-        })
-
-        if (!res.ok) {
-          const result: { error?: string } = await res.json()
-          throw new Error(result.error || 'Failed to delete row')
-        }
+        await deleteRowMutation.mutateAsync(idsToDelete[0])
       } else {
-        const results = await Promise.allSettled(
-          idsToDelete.map(async (rowId) => {
-            const res = await fetch(`/api/table/${table?.id}/rows/${rowId}`, {
-              method: 'DELETE',
-              headers: { 'Content-Type': 'application/json' },
-              body: JSON.stringify({ workspaceId }),
-            })
-
-            if (!res.ok) {
-              const result: { error?: string } = await res.json().catch(() => ({}))
-              throw new Error(result.error || `Failed to delete row ${rowId}`)
-            }
-
-            return rowId
-          })
-        )
-
-        const failures = results.filter((r) => r.status === 'rejected')
-
-        if (failures.length > 0) {
-          const failureCount = failures.length
-          const totalCount = idsToDelete.length
-          const successCount = totalCount - failureCount
-          const firstError =
-            failures[0].status === 'rejected' ? failures[0].reason?.message || 'Unknown error' : ''
-
-          throw new Error(
-            `Failed to delete ${failureCount} of ${totalCount} row(s)${successCount > 0 ? ` (${successCount} deleted successfully)` : ''}. ${firstError}`
-          )
-        }
+        await deleteRowsMutation.mutateAsync(idsToDelete)
       }
 
       onSuccess()
     } catch (err) {
       logger.error('Failed to delete row(s):', err)
       setError(err instanceof Error ? err.message : 'Failed to delete row(s)')
-    } finally {
-      setIsSubmitting(false)
     }
   }