web: execute only 1 query at a time

apps/web/package.json

@@ -40,6 +40,7 @@
     "@trpc/react-query": "10.38.3",
     "@zip.js/zip.js": "^2.7.32",
     "allotment": "^1.19.3",
+    "async-mutex": "^0.4.0",
     "axios": "^1.3.4",
     "clipboard-polyfill": "4.0.0",
     "comlink": "^4.3.1",
@@ -61,7 +62,9 @@
     "phone": "^3.1.14",
     "platform": "^1.3.6",
     "qclone": "^1.2.0",
+    "react": "18.2.0",
     "react-complex-tree": "^2.2.4",
+    "react-dom": "18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hot-toast": "^2.4.1",
     "react-loading-skeleton": "^3.3.1",
@@ -73,9 +76,7 @@
     "w3c-keyname": "^2.2.6",
     "web-streams-polyfill": "^3.1.1",
     "wouter": "2.12.1",
-    "zustand": "4.4.7",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "zustand": "4.4.7"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

apps/web/src/common/sqlite/sqlite.kysely.ts

@@ -24,6 +24,7 @@ import type { SQLiteWorker } from "./sqlite.worker";
 import SQLiteSyncURI from "./wa-sqlite.wasm?url";
 import SQLiteAsyncURI from "./wa-sqlite-async.wasm?url";
 import { wrap } from "comlink";
+import { Mutex } from "async-mutex";
 
 type Config = { dbName: string; async: boolean };
 
@@ -103,6 +104,7 @@ class ConnectionMutex {
 }
 
 class WaSqliteWorkerConnection implements DatabaseConnection {
+  private readonly queryMutex = new Mutex();
   constructor(private readonly worker: SQLiteWorker) {}
 
   streamQuery<R>(): AsyncIterableIterator<QueryResult<R>> {
@@ -119,6 +121,8 @@ class WaSqliteWorkerConnection implements DatabaseConnection {
         : query.kind === "RawNode"
         ? "raw"
         : "exec";
-    return await this.worker.run(mode, sql, parameters as any);
+    return this.queryMutex.runExclusive(() =>
+      this.worker.run(mode, sql, parameters as any)
+    );
   }
 }