WIP

clients/typescript/src/drivers/pglite/adapter.ts

@@ -13,18 +13,14 @@ export class DatabaseAdapter extends GenericDatabaseAdapter {
   }
 
   async _run(statement: Statement): Promise<RunResult> {
-    console.log('_run:', statement.sql)
     const res = await this.db.query(statement.sql, statement.args)
-    console.log('res:', res)
     return {
       rowsAffected: res.affectedRows ?? 0,
     }
   }
 
   async _query(statement: Statement): Promise<Row[]> {
-    console.log('_query:', statement.sql)
     const ret = (await this.db.query<Row>(statement.sql, statement.args)).rows
-    console.log('ret:', ret)
     return ret
   }
 }

examples/web-pglite/package.json

@@ -20,8 +20,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@electric-sql/pglite": "^0.1.1",
-    "electric-sql": "file:../../clients/typescript/electric-sql-0.9.4.tgz",
+    "@electric-sql/pglite": "^0.1.3",
+    "electric-sql": "file:../../clients/typescript/electric-sql-0.9.6.tgz",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/web-pglite/src/Example.tsx

@@ -13,25 +13,28 @@ import './Example.css'
 
 const { ElectricProvider, useElectric } = makeElectricContext<Electric>()
 
+// We use a global database instance to avoid reinitializing the database
+// when the component re-renders under React strict mode.
+let db: PGlite
+
 export const Example = () => {
   const [ electric, setElectric ] = useState<Electric>()
 
   useEffect(() => {
     let isMounted = true
+    let electric: Electric | undefined
 
     const init = async () => {
       const config = {
-        debug: import.meta.env.DEV,
+        debug: false,//import.meta.env.DEV,
         url: import.meta.env.ELECTRIC_SERVICE
       }
 
       const { tabId } = uniqueTabId()
       const scopedDbName = `idb://basic-${LIB_VERSION}-${tabId}.db`
 
-      const db = new PGlite(scopedDbName) 
-      await db.waitReady;
-      await db.exec('SET search_path TO main, public;') // TODO: remove when schemas are fixed
-      const electric = await electrify(db, schema, config)
+      db ??= new PGlite(scopedDbName)
+      electric = await electrify(db, schema, config)
       await electric.connect(authToken())
 
       if (!isMounted) {
@@ -41,9 +44,16 @@ export const Example = () => {
       setElectric(electric)
     }
 
+    const cleanup = async () => {
+      if (electric) {
+        await electric.close()
+      }
+    }
+
     init()
 
     return () => {
+      cleanup()
       isMounted = false
     }
   }, [])