Merge pull request supabase-community#16 from supabase-community/fix/db-deletes

gregnr · web-flow · commit 73ae14d21511 · 2024-08-03T12:51:36.000-05:00
Fix DBs properly deleting from IndexedDB
diff --git a/apps/postgres-new/app/page.tsx b/apps/postgres-new/app/page.tsx
@@ -2,14 +2,11 @@
 
 import { customAlphabet } from 'nanoid'
 import { useRouter } from 'next/navigation'
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import Workspace from '~/components/workspace'
 import { useDatabaseCreateMutation } from '~/data/databases/database-create-mutation'
 import { useDatabaseUpdateMutation } from '~/data/databases/database-update-mutation'
-import { getDb } from '~/lib/db'
-import { useLocalStorage } from '~/lib/hooks'
-
-export const dynamic = 'force-static'
+import { dbExists, getDb } from '~/lib/db'
 
 // Use a DNS safe alphabet
 const nanoid = customAlphabet('0123456789abcdefghijklmnopqrstuvwxyz', 16)
@@ -29,14 +26,33 @@ export default function Page() {
    */
   const preloadDb = useCallback(
     async (id: string) => {
-      await createDatabase({ id, isHidden: true })
-      await getDb(id)
+      const exists = await dbExists(id)
+      if (!exists) {
+        await createDatabase({ id, isHidden: true })
+        await getDb(id)
+      }
     },
     [createDatabase]
   )
 
   // Track the next database ID in local storage
-  const [nextDatabaseId] = useLocalStorage('next-db-id', uniqueId())
+  const nextDatabaseId = useMemo(() => {
+    const id = uniqueId()
+
+    // To prevent Next.js from failing SSR
+    if (typeof window === 'undefined') {
+      return id
+    }
+
+    // For historical reasons this value exists as JSON
+    let idJson = localStorage.getItem('next-db-id')
+    if (idJson) {
+      return JSON.parse(idJson)
+    }
+
+    localStorage.setItem('next-db-id', JSON.stringify(id))
+    return id
+  }, [])
 
   // The very first DB needs to be loaded on mount
   useEffect(() => {
@@ -53,7 +69,7 @@ export default function Page() {
         // Navigate to this DB's path
         router.push(`/db/${nextDatabaseId}`)
 
-        // Pre-load the next DB (but without causing a re-render)
+        // Pre-load the next DB
         const nextId = uniqueId()
         localStorage.setItem('next-db-id', JSON.stringify(nextId))
         preloadDb(nextId)
diff --git a/apps/postgres-new/lib/db/index.ts b/apps/postgres-new/lib/db/index.ts
@@ -50,7 +50,6 @@ export async function getMetaDb() {
     await handleUnsupportedPGVersion('meta')
 
     const metaDb = await createPGlite('idb://meta')
-    await metaDb.waitReady
     await runMigrations(metaDb, metaMigrations)
     return metaDb
   }
@@ -63,6 +62,16 @@ export async function getMetaDb() {
   return await metaDbPromise
 }
 
+export async function dbExists(id: string) {
+  const metaDb = await getMetaDb()
+
+  const {
+    rows: [database],
+  } = await metaDb.query<Database>('select * from databases where id = $1', [id])
+
+  return database !== undefined
+}
+
 export async function getDb(id: string) {
   const openDatabasePromise = databaseConnections.get(id)
 
@@ -71,13 +80,9 @@ export async function getDb(id: string) {
   }
 
   async function run() {
-    const metaDb = await getMetaDb()
+    const exists = await dbExists(id)
 
-    const {
-      rows: [database],
-    } = await metaDb.query<Database>('select * from databases where id = $1', [id])
-
-    if (!database) {
+    if (!exists) {
       throw new Error(`Database with ID '${id}' doesn't exist`)
     }
 
@@ -86,7 +91,6 @@ export async function getDb(id: string) {
     await handleUnsupportedPGVersion(dbPath)
 
     const db = await createPGlite(`idb://${dbPath}`)
-    await db.waitReady
     await runMigrations(db, migrations)
 
     return db
@@ -113,10 +117,7 @@ export async function closeDb(id: string) {
 
 export async function deleteDb(id: string) {
   await closeDb(id)
-
-  // TODO: fix issue where PGlite holds on to the IndexedDB preventing delete
-  // Once fixed, turn this into an `await` so we can forward legitimate errors
-  deleteIndexedDb(`/pglite/${prefix}-${id}`)
+  await deleteIndexedDb(`/pglite/${prefix}-${id}`)
 }
 
 /**
@@ -219,23 +220,24 @@ export async function handleUnsupportedPGVersion(dbPath: string) {
 }
 
 export async function deleteIndexedDb(name: string) {
-  await new Promise<void>((resolve, reject) => {
-    const req = indexedDB.deleteDatabase(name)
-
-    req.onsuccess = () => {
-      resolve()
-    }
-    req.onerror = () => {
-      reject(
-        req.error
-          ? `An error occurred when deleting IndexedDB database: ${req.error.message}`
-          : 'An unknown error occurred when deleting IndexedDB database'
-      )
-    }
-    req.onblocked = () => {
-      reject('IndexedDB database was blocked when deleting')
-    }
-  })
+  // Sometimes IndexedDB is still finishing a transaction even after PGlite closes
+  // causing the delete to be blocked, so loop until the delete is successful
+  while (true) {
+    const closed = await new Promise((resolve, reject) => {
+      const req = indexedDB.deleteDatabase(name)
+
+      req.onsuccess = () => {
+        resolve(true)
+      }
+      req.onerror = () => {
+        reject(req.error ?? 'An unknown error occurred when deleting IndexedDB database')
+      }
+      req.onblocked = () => {
+        resolve(false)
+      }
+    })
+    if (closed) break
+  }
 }
 
 /**
diff --git a/apps/postgres-new/lib/hooks.ts b/apps/postgres-new/lib/hooks.ts
@@ -1,16 +1,13 @@
 'use client'
 
-import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { FeatureExtractionPipelineOptions, pipeline } from '@xenova/transformers'
 import { generateId } from 'ai'
 import { Chart } from 'chart.js'
 import { codeBlock } from 'common-tags'
 import {
   cloneElement,
-  Dispatch,
   isValidElement,
   ReactNode,
-  SetStateAction,
   useCallback,
   useEffect,
   useMemo,
@@ -25,50 +22,6 @@ import { loadFile, saveFile } from './files'
 import { SmoothScroller } from './smooth-scroller'
 import { OnToolCall } from './tools'
 
-/**
- * Hook to load/store values from local storage with an API similar
- * to `useState()`.
- */
-export function useLocalStorage<T>(key: string, initialValue: T) {
-  const queryClient = useQueryClient()
-  const queryKey = ['local-storage', key]
-
-  const currentValue =
-    typeof window !== 'undefined' ? (window.localStorage.getItem(key) ?? undefined) : undefined
-
-  const { data: storedValue = currentValue ? (JSON.parse(currentValue) as T) : initialValue } =
-    useQuery({
-      queryKey,
-      queryFn: () => {
-        if (typeof window === 'undefined') {
-          return initialValue
-        }
-
-        const item = window.localStorage.getItem(key)
-
-        if (!item) {
-          window.localStorage.setItem(key, JSON.stringify(initialValue))
-          return initialValue
-        }
-
-        return JSON.parse(item) as T
-      },
-    })
-
-  const setValue: Dispatch<SetStateAction<T>> = (value) => {
-    const valueToStore = value instanceof Function ? value(storedValue) : value
-
-    if (typeof window !== 'undefined') {
-      window.localStorage.setItem(key, JSON.stringify(valueToStore))
-    }
-
-    queryClient.setQueryData(queryKey, valueToStore)
-    queryClient.invalidateQueries({ queryKey })
-  }
-
-  return [storedValue, setValue] as const
-}
-
 export function useDebounce<T>(value: T, delay: number) {
   const [debouncedValue, setDebouncedValue] = useState(value)
 
