@livestore/livestore 0.0.13 → 0.0.14

package/dist/store.js

@@ -1,247 +1,294 @@
 import { assertNever, makeNoopSpan, makeNoopTracer, shouldNeverHappen } from '@livestore/utils';
 import { identity } from '@livestore/utils/effect';
 import * as otel from '@opentelemetry/api';
-import * as graphql from 'graphql';
-import { uniqueId } from 'lodash-es';
-import * as ReactDOM from 'react-dom';
-import initSqlite3Wasm from 'sqlite-esm';
 import { v4 as uuid } from 'uuid';
 import { tableNameForComponentKey } from './componentKey.js';
 import { InMemoryDatabase } from './inMemoryDatabase.js';
 import { migrateDb } from './migrations.js';
 import { getDurationMsFromSpan } from './otel.js';
-import { ReactiveGraph } from './reactive.js';
-import { LiveStoreGraphQLQuery } from './reactiveQueries/graphql.js';
-import { LiveStoreJSQuery } from './reactiveQueries/js.js';
-import { LiveStoreSQLQuery } from './reactiveQueries/sql.js';
+import { dbGraph } from './reactiveQueries/graph.js';
 import { componentStateTables } from './schema.js';
-import { isPromise, sql } from './util.js';
-export const RESET_DB_LOCAL_STORAGE_KEY = 'livestore-reset';
-const globalComponentKey = { _tag: 'singleton', componentName: '__global', id: 'singleton' };
+import { isPromise, prepareBindValues, sql } from './util.js';
+export const globalComponentKey = { _tag: 'singleton', componentName: '__global', id: 'singleton' };
 export class Store {
-    constructor({ db, schema, storage, graphQLOptions, otelTracer, otelRootSpanContext, }) {
+    constructor({ db, dbProxy, schema, storage, graphQLOptions, otelTracer, otelRootSpanContext, }) {
         /**
          * Creates a reactive LiveStore SQL query
          *
          * NOTE The query is actually running (even if no one has subscribed to it yet) and will be kept up to date.
          */
-        this.querySQL = (genQueryString, { queriedTables, bindValues, componentKey, label, otelContext = otel.context.active(), }) => this.otel.tracer.startActiveSpan('querySQL', // NOTE span name will be overridden further down
-        { attributes: { label } }, otelContext, (span) => {
-            const otelContext = otel.trace.setSpan(otel.context.active(), span);
-            const queryString$ = this.graph.makeThunk((get, addDebugInfo) => {
-                const queryString = genQueryString(get);
-                addDebugInfo({ _tag: 'js', label: `${label}:queryString`, query: queryString });
-                return queryString;
-            }, { label: `${label}:queryString`, meta: { liveStoreThunkType: 'sqlQueryString' } }, otelContext);
-            label = label ?? queryString$.result;
-            span.updateName(`querySQL:${label}`);
-            const queryLabel = `${label}:results` + (this.temporaryQueries ? ':temp' : '');
-            const results$ = this.graph.makeThunk((get, addDebugInfo) => this.otel.tracer.startActiveSpan('sql', // NOTE span name will be overridden further down
-            {}, otelContext, (span) => {
-                try {
-                    const otelContext = otel.trace.setSpan(otel.context.active(), span);
-                    // Establish a reactive dependency on the tables used in the query
-                    for (const tableName of queriedTables) {
-                        const tableRef = this.tableRefs[tableName] ?? shouldNeverHappen(`No table ref found for ${tableName}`);
-                        get(tableRef);
-                    }
-                    const sqlString = get(queryString$);
-                    span.setAttribute('sql.query', sqlString);
-                    span.updateName(`sql:${sqlString.slice(0, 50)}`);
-                    const results = this.inMemoryDB.select(sqlString, { queriedTables, bindValues, otelContext });
-                    span.setAttribute('sql.rowsCount', results.length);
-                    addDebugInfo({ _tag: 'sql', label: label ?? '', query: sqlString });
-                    return results;
-                }
-                finally {
-                    span.end();
-                }
-            }), { label: queryLabel }, otelContext);
-            const query = new LiveStoreSQLQuery({
-                label,
-                queryString$,
-                results$,
-                componentKey: componentKey ?? globalComponentKey,
-                store: this,
-                otelContext,
-            });
-            this.activeQueries.add(query);
-            // TODO get rid of temporary query workaround
-            if (this.temporaryQueries !== undefined) {
-                this.temporaryQueries.add(query);
-            }
-            // NOTE we are not ending the span here but in the query `destroy` method
-            return query;
-        });
-        this.queryJS = (genResults, { componentKey = globalComponentKey, label = `js${uniqueId()}`, otelContext = otel.context.active(), }) => this.otel.tracer.startActiveSpan(`queryJS:${label}`, { attributes: { label } }, otelContext, (span) => {
-            const otelContext = otel.trace.setSpan(otel.context.active(), span);
-            const queryLabel = `${label}:results` + (this.temporaryQueries ? ':temp' : '');
-            const results$ = this.graph.makeThunk((get, addDebugInfo) => {
-                addDebugInfo({ _tag: 'js', label, query: genResults.toString() });
-                return genResults(get);
-            }, { label: queryLabel, meta: { liveStoreThunkType: 'jsResults' } }, otelContext);
-            const query = new LiveStoreJSQuery({
-                label,
-                results$,
-                componentKey,
-                store: this,
-                otelContext,
-            });
-            this.activeQueries.add(query);
-            // TODO get rid of temporary query workaround
-            if (this.temporaryQueries !== undefined) {
-                this.temporaryQueries.add(query);
-            }
-            // NOTE we are not ending the span here but in the query `destroy` method
-            return query;
-        });
-        this.queryGraphQL = (document, genVariableValues, { componentKey, label, otelContext = otel.context.active(), }) => this.otel.tracer.startActiveSpan(`queryGraphQL:`, // NOTE span name will be overridden further down
-        {}, otelContext, (span) => {
-            const otelContext = otel.trace.setSpan(otel.context.active(), span);
-            if (this.graphQLContext === undefined) {
-                return shouldNeverHappen("Can't run a GraphQL query on a store without GraphQL context");
-            }
-            const labelWithDefault = label ?? graphql.getOperationAST(document)?.name?.value ?? 'graphql';
-            span.updateName(`queryGraphQL:${labelWithDefault}`);
-            const variableValues$ = this.graph.makeThunk(genVariableValues, { label: `${labelWithDefault}:variableValues`, meta: { liveStoreThunkType: 'graphqlVariableValues' } }, otelContext);
-            const resultsLabel = `${labelWithDefault}:results` + (this.temporaryQueries ? ':temp' : '');
-            const results$ = this.graph.makeThunk((get, addDebugInfo) => {
-                const variableValues = get(variableValues$);
-                const { result, queriedTables } = this.queryGraphQLOnce(document, variableValues, otelContext);
-                // Add dependencies on any tables that were used
-                for (const tableName of queriedTables) {
-                    const tableRef = this.tableRefs[tableName];
-                    assertNever(tableRef !== undefined, `No table ref found for ${tableName}`);
-                    get(tableRef);
-                }
-                addDebugInfo({ _tag: 'graphql', label: resultsLabel, query: graphql.print(document) });
-                return result;
-            }, { label: resultsLabel, meta: { liveStoreThunkType: 'graphqlResults' } }, otelContext);
-            const query = new LiveStoreGraphQLQuery({
-                document,
-                context: this.graphQLContext,
-                results$,
-                componentKey,
-                label: labelWithDefault,
-                store: this,
-                otelContext,
-            });
-            this.activeQueries.add(query);
-            // TODO get rid of temporary query workaround
-            if (this.temporaryQueries !== undefined) {
-                this.temporaryQueries.add(query);
-            }
-            // NOTE we are not ending the span here but in the query `destroy` method
-            return query;
-        });
-        this.queryGraphQLOnce = (document, variableValues, otelContext = this.otel.queriesSpanContext) => {
-            const schema = this.graphQLSchema ?? shouldNeverHappen("Can't run a GraphQL query on a store without GraphQL schema");
-            const context = this.graphQLContext ?? shouldNeverHappen("Can't run a GraphQL query on a store without GraphQL context");
-            const tracer = this.otel.tracer;
-            const operationName = graphql.getOperationAST(document)?.name?.value;
-            return tracer.startActiveSpan(`executeGraphQLQuery: ${operationName}`, {}, otelContext, (span) => {
-                try {
-                    span.setAttribute('graphql.variables', JSON.stringify(variableValues));
-                    span.setAttribute('graphql.query', graphql.print(document));
-                    context.queriedTables.clear();
-                    context.otelContext = otel.trace.setSpan(otel.context.active(), span);
-                    const res = graphql.executeSync({
-                        document,
-                        contextValue: context,
-                        schema: schema,
-                        variableValues,
-                    });
-                    // TODO track number of nested SQL queries via Otel + debug info
-                    if (res.errors) {
-                        span.setStatus({ code: otel.SpanStatusCode.ERROR, message: 'GraphQL error' });
-                        span.setAttribute('graphql.error', res.errors.join('\n'));
-                        span.setAttribute('graphql.error-detail', JSON.stringify(res.errors));
-                        console.error(`graphql error (${operationName})`, res.errors);
-                    }
-                    return { result: res.data, queriedTables: Array.from(context.queriedTables.values()) };
-                }
-                finally {
-                    span.end();
-                }
-            });
-        };
+        // querySQL = <TResult>(
+        //   genQueryString: string | ((get: GetAtomResult) => string),
+        //   {
+        //     queriedTables,
+        //     bindValues,
+        //     componentKey,
+        //     label,
+        //     otelContext = otel.context.active(),
+        //   }: {
+        //     /**
+        //      * List of tables that are queried in this query;
+        //      * used to determine reactive dependencies.
+        //      *
+        //      * NOTE In the future we want to auto-generate this via parsing the query
+        //      */
+        //     queriedTables: string[]
+        //     bindValues?: Bindable | undefined
+        //     componentKey?: ComponentKey | undefined
+        //     label?: string | undefined
+        //     otelContext?: otel.Context
+        //   },
+        // ): LiveStoreSQLQuery<TResult> =>
+        //   this.otel.tracer.startActiveSpan(
+        //     'querySQL', // NOTE span name will be overridden further down
+        //     { attributes: { label } },
+        //     otelContext,
+        //     (span) => {
+        //       const otelContext = otel.trace.setSpan(otel.context.active(), span)
+        //       const queryString$ = this.graph.makeThunk(
+        //         (get, addDebugInfo) => {
+        //           if (typeof genQueryString === 'function') {
+        //             const queryString = genQueryString(makeGetAtomResult(get))
+        //             addDebugInfo({ _tag: 'js', label: `${label}:queryString`, query: queryString })
+        //             return queryString
+        //           } else {
+        //             return genQueryString
+        //           }
+        //         },
+        //         { label: `${label}:queryString`, meta: { liveStoreThunkType: 'sqlQueryString' } },
+        //         otelContext,
+        //       )
+        //       label = label ?? queryString$.result
+        //       span.updateName(`querySQL:${label}`)
+        //       const queryLabel = `${label}:results` + (this.temporaryQueries ? ':temp' : '')
+        //       const results$ = this.graph.makeThunk<ReadonlyArray<TResult>>(
+        //         (get, addDebugInfo) =>
+        //           this.otel.tracer.startActiveSpan(
+        //             'sql:', // NOTE span name will be overridden further down
+        //             {},
+        //             otelContext,
+        //             (span) => {
+        //               try {
+        //                 const otelContext = otel.trace.setSpan(otel.context.active(), span)
+        //                 // Establish a reactive dependency on the tables used in the query
+        //                 for (const tableName of queriedTables) {
+        //                   const tableRef =
+        //                     this.tableRefs[tableName] ?? shouldNeverHappen(`No table ref found for ${tableName}`)
+        //                   get(tableRef)
+        //                 }
+        //                 const sqlString = get(queryString$)
+        //                 span.setAttribute('sql.query', sqlString)
+        //                 span.updateName(`sql:${sqlString.slice(0, 50)}`)
+        //                 const results = this.inMemoryDB.select<TResult>(sqlString, {
+        //                   queriedTables,
+        //                   bindValues: bindValues ? prepareBindValues(bindValues, sqlString) : undefined,
+        //                   otelContext,
+        //                 })
+        //                 span.setAttribute('sql.rowsCount', results.length)
+        //                 addDebugInfo({ _tag: 'sql', label: label ?? '', query: sqlString })
+        //                 return results
+        //               } finally {
+        //                 span.end()
+        //               }
+        //             },
+        //           ),
+        //         { label: queryLabel },
+        //         otelContext,
+        //       )
+        //       const query = new LiveStoreSQLQuery<TResult>({
+        //         label,
+        //         queryString$,
+        //         results$,
+        //         componentKey: componentKey ?? globalComponentKey,
+        //         store: this,
+        //         otelContext,
+        //       })
+        //       this.activeQueries.add(query)
+        //       // TODO get rid of temporary query workaround
+        //       if (this.temporaryQueries !== undefined) {
+        //         this.temporaryQueries.add(query)
+        //       }
+        //       // NOTE we are not ending the span here but in the query `destroy` method
+        //       return query
+        //     },
+        //   )
+        // queryJS = <TResult>(
+        //   genResults: (get: GetAtomResult) => TResult,
+        //   {
+        //     componentKey = globalComponentKey,
+        //     label = `js${uniqueId()}`,
+        //     otelContext = otel.context.active(),
+        //   }: { componentKey?: ComponentKey; label?: string; otelContext?: otel.Context },
+        // ): LiveStoreJSQuery<TResult> =>
+        //   this.otel.tracer.startActiveSpan(`queryJS:${label}`, { attributes: { label } }, otelContext, (span) => {
+        //     const otelContext = otel.trace.setSpan(otel.context.active(), span)
+        //     const queryLabel = `${label}:results` + (this.temporaryQueries ? ':temp' : '')
+        //     const results$ = this.graph.makeThunk(
+        //       (get, addDebugInfo) => {
+        //         addDebugInfo({ _tag: 'js', label, query: genResults.toString() })
+        //         return genResults(makeGetAtomResult(get))
+        //       },
+        //       { label: queryLabel, meta: { liveStoreThunkType: 'jsResults' } },
+        //       otelContext,
+        //     )
+        //     // const query = new LiveStoreJSQuery<TResult>({
+        //     //   label,
+        //     //   results$,
+        //     //   componentKey,
+        //     //   store: this,
+        //     //   otelContext,
+        //     // })
+        //     this.activeQueries.add(query)
+        //     // TODO get rid of temporary query workaround
+        //     if (this.temporaryQueries !== undefined) {
+        //       this.temporaryQueries.add(query)
+        //     }
+        //     // NOTE we are not ending the span here but in the query `destroy` method
+        //     return query
+        //   })
+        // queryGraphQL = <TResult extends Record<string, any>, TVariableValues extends Record<string, any>>(
+        //   document: DocumentNode<TResult, TVariableValues>,
+        //   genVariableValues: TVariableValues | ((get: GetAtomResult) => TVariableValues),
+        //   {
+        //     componentKey,
+        //     label,
+        //     otelContext = otel.context.active(),
+        //   }: {
+        //     componentKey: ComponentKey
+        //     label?: string
+        //     otelContext?: otel.Context
+        //   },
+        // ): LiveStoreGraphQLQuery<TResult, TVariableValues, TGraphQLContext> =>
+        //   this.otel.tracer.startActiveSpan(
+        //     `queryGraphQL:`, // NOTE span name will be overridden further down
+        //     {},
+        //     otelContext,
+        //     (span) => {
+        //       const otelContext = otel.trace.setSpan(otel.context.active(), span)
+        //       if (this.graphQLContext === undefined) {
+        //         return shouldNeverHappen("Can't run a GraphQL query on a store without GraphQL context")
+        //       }
+        //       const labelWithDefault = label ?? graphql.getOperationAST(document)?.name?.value ?? 'graphql'
+        //       span.updateName(`queryGraphQL:${labelWithDefault}`)
+        //       const variableValues$ = this.graph.makeThunk(
+        //         (get) => {
+        //           if (typeof genVariableValues === 'function') {
+        //             return genVariableValues(makeGetAtomResult(get))
+        //           } else {
+        //             return genVariableValues
+        //           }
+        //         },
+        //         { label: `${labelWithDefault}:variableValues`, meta: { liveStoreThunkType: 'graphqlVariableValues' } },
+        //         // otelContext,
+        //       )
+        //       const resultsLabel = `${labelWithDefault}:results` + (this.temporaryQueries ? ':temp' : '')
+        //       const results$ = this.graph.makeThunk<TResult>(
+        //         (get, addDebugInfo) => {
+        //           const variableValues = get(variableValues$)
+        //           const { result, queriedTables } = this.queryGraphQLOnce(document, variableValues, otelContext)
+        //           // Add dependencies on any tables that were used
+        //           for (const tableName of queriedTables) {
+        //             const tableRef = this.tableRefs[tableName]
+        //             assertNever(tableRef !== undefined, `No table ref found for ${tableName}`)
+        //             get(tableRef!)
+        //           }
+        //           addDebugInfo({ _tag: 'graphql', label: resultsLabel, query: graphql.print(document) })
+        //           return result
+        //         },
+        //         { label: resultsLabel, meta: { liveStoreThunkType: 'graphqlResults' } },
+        //         // otelContext,
+        //       )
+        //       const query = new LiveStoreGraphQLQuery({
+        //         document,
+        //         context: this.graphQLContext,
+        //         results$,
+        //         componentKey,
+        //         label: labelWithDefault,
+        //         store: this,
+        //         otelContext,
+        //       })
+        //       this.activeQueries.add(query)
+        //       // TODO get rid of temporary query workaround
+        //       if (this.temporaryQueries !== undefined) {
+        //         this.temporaryQueries.add(query)
+        //       }
+        //       // NOTE we are not ending the span here but in the query `destroy` method
+        //       return query
+        //     },
+        //   )
+        // queryGraphQLOnce = <TResult extends Record<string, any>, TVariableValues extends Record<string, any>>(
+        //   document: DocumentNode<TResult, TVariableValues>,
+        //   variableValues: TVariableValues,
+        //   otelContext: otel.Context = this.otel.queriesSpanContext,
+        // ): { result: TResult; queriedTables: string[] } => {
+        //   const schema =
+        //     this.graphQLSchema ?? shouldNeverHappen("Can't run a GraphQL query on a store without GraphQL schema")
+        //   const context =
+        //     this.graphQLContext ?? shouldNeverHappen("Can't run a GraphQL query on a store without GraphQL context")
+        //   const tracer = this.otel.tracer
+        //   const operationName = graphql.getOperationAST(document)?.name?.value
+        //   return tracer.startActiveSpan(`executeGraphQLQuery: ${operationName}`, {}, otelContext, (span) => {
+        //     try {
+        //       span.setAttribute('graphql.variables', JSON.stringify(variableValues))
+        //       span.setAttribute('graphql.query', graphql.print(document))
+        //       context.queriedTables.clear()
+        //       context.otelContext = otel.trace.setSpan(otel.context.active(), span)
+        //       const res = graphql.executeSync({
+        //         document,
+        //         contextValue: context,
+        //         schema: schema,
+        //         variableValues,
+        //       })
+        //       // TODO track number of nested SQL queries via Otel + debug info
+        //       if (res.errors) {
+        //         span.setStatus({ code: otel.SpanStatusCode.ERROR, message: 'GraphQL error' })
+        //         span.setAttribute('graphql.error', res.errors.join('\n'))
+        //         span.setAttribute('graphql.error-detail', JSON.stringify(res.errors))
+        //         console.error(`graphql error (${operationName})`, res.errors)
+        //       }
+        //       return { result: res.data as unknown as TResult, queriedTables: Array.from(context.queriedTables.values()) }
+        //     } finally {
+        //       span.end()
+        //     }
+        //   })
+        // }
         /**
          * Subscribe to the results of a query
          * Returns a function to cancel the subscription.
          */
-        this.subscribe = (query, onNewValue, onSubsubscribe, options) => this.otel.tracer.startActiveSpan(`LiveStore.subscribe`, { attributes: { label: options?.label } }, query.otelContext, (span) => {
+        this.subscribe = (query, onNewValue, onSubsubscribe, options) => this.otel.tracer.startActiveSpan(`LiveStore.subscribe`, { attributes: { label: options?.label } }, options?.otelContext ?? this.otel.queriesSpanContext, (span) => {
             const otelContext = otel.trace.setSpan(otel.context.active(), span);
-            const effect = this.graph.makeEffect((get) => {
-                const result = get(query.results$);
-                onNewValue(result);
-            }, { label: `subscribe:${options?.label}` }, otelContext);
-            const subscriptionKey = uuid();
+            const effect = this.graph.makeEffect((get) => onNewValue(get(query.results$)), {
+                label: `subscribe:${options?.label}`,
+            });
+            effect.doEffect(otelContext);
+            // const subscriptionKey = uuid()
             const unsubscribe = () => {
                 try {
                     this.graph.destroy(effect);
-                    query.activeSubscriptions.delete(subscriptionKey);
+                    this.activeQueries.delete(query);
+                    // query.activeSubscriptions.delete(subscriptionKey)
                     onSubsubscribe?.();
                 }
                 finally {
                     span.end();
                 }
             };
-            query.activeSubscriptions.set(subscriptionKey, unsubscribe);
+            this.activeQueries.add(query);
+            // query.activeSubscriptions.set(subscriptionKey, unsubscribe)
             return unsubscribe;
         });
-        /**
-         * Any queries created in the callback will be destroyed when the callback is complete.
-         * Useful for temporarily creating reactive queries, which is an idempotent operation
-         * that can be safely called inside a React useMemo hook.
-         */
-        this.inTempQueryContext = (callback) => {
-            this.temporaryQueries = new Set();
-            // TODO: consider errors / try/finally here?
-            const result = callback();
-            for (const query of this.temporaryQueries) {
-                this.destroyQuery(query);
-            }
-            this.temporaryQueries = undefined;
-            return result;
-        };
         /**
          * Destroys the entire store, including all queries and subscriptions.
          *
          * Currently only used when shutting down the app for debugging purposes (e.g. to close Otel spans).
          */
         this.destroy = () => {
-            for (const query of this.activeQueries) {
-                this.destroyQuery(query);
-            }
             Object.values(this.tableRefs).forEach((tableRef) => this.graph.destroy(tableRef));
-            const applyEventsSpan = otel.trace.getSpan(this.otel.applyEventsSpanContext);
-            applyEventsSpan.end();
-            const queriesSpan = otel.trace.getSpan(this.otel.queriesSpanContext);
-            queriesSpan.end();
+            otel.trace.getSpan(this.otel.applyEventsSpanContext).end();
+            otel.trace.getSpan(this.otel.queriesSpanContext).end();
             // TODO destroy active subscriptions
         };
-        this.destroyQuery = (query) => {
-            if (query._tag === 'sql') {
-                // results are downstream of query string, so will automatically be destroyed together
-                this.graph.destroy(query.queryString$);
-            }
-            else {
-                this.graph.destroy(query.results$);
-            }
-            this.activeQueries.delete(query);
-            query.destroy();
-        };
-        /**
-         * Clean up queries and downstream subscriptions associated with a component.
-         * This is critical to avoid memory leaks.
-         */
-        this.unmountComponent = (componentKey) => {
-            for (const query of this.activeQueries) {
-                if (query.componentKey === componentKey) {
-                    this.destroyQuery(query);
-                }
-            }
-        };
         /* Apply a single write event to the store, and refresh all queries in response */
         this.applyEvent = (eventType, args = {}, options) => {
             const skipRefresh = options?.skipRefresh ?? false;
@@ -258,16 +305,23 @@ export class Store {
                         assertNever(tableRef !== undefined, `No table ref found for ${tableName}`);
                         tablesToUpdate.push([tableRef, null]);
                     }
+                    const debugRefreshReason = {
+                        _tag: 'applyEvent',
+                        event: { type: eventType, args },
+                        writeTables: [...writeTables],
+                    };
                     // Update all table refs together in a batch, to only trigger one reactive update
-                    this.graph.setRefs(tablesToUpdate, {
-                        otelHint: 'applyEvents',
-                        skipRefresh,
-                        debugRefreshReason: {
-                            _tag: 'applyEvent',
-                            event: { type: eventType, args },
-                            writeTables: [...writeTables],
-                        },
-                    }, otelContext);
+                    this.graph.setRefs(tablesToUpdate, { debugRefreshReason, otelContext });
+                    if (skipRefresh === false) {
+                        // TODO update the graph
+                        // this.graph.refresh(
+                        //   {
+                        //     otelHint: 'applyEvents',
+                        //     debugRefreshReason,
+                        //   },
+                        //   otelContext,
+                        // )
+                    }
                 }
                 catch (e) {
                     span.setStatus({ code: otel.SpanStatusCode.ERROR, message: e.toString() });
@@ -329,16 +383,17 @@ export class Store {
                         assertNever(tableRef !== undefined, `No table ref found for ${tableName}`);
                         tablesToUpdate.push([tableRef, null]);
                     }
+                    const debugRefreshReason = {
+                        _tag: 'applyEvents',
+                        events: [...events].map((e) => ({ type: e.eventType, args: e.args })),
+                        writeTables: [...writeTables],
+                    };
                     // Update all table refs together in a batch, to only trigger one reactive update
-                    this.graph.setRefs(tablesToUpdate, {
-                        otelHint: 'applyEvents',
-                        skipRefresh,
-                        debugRefreshReason: {
-                            _tag: 'applyEvents',
-                            events: [...events].map((e) => ({ type: e.eventType, args: e.args })),
-                            writeTables: [...writeTables],
-                        },
-                    }, otelContext);
+                    this.graph.setRefs(tablesToUpdate, { debugRefreshReason, otelContext });
+                    if (skipRefresh === false) {
+                        // TODO update the graph
+                        // this.graph.refresh({ debugRefreshReason, otelHint: 'applyEvents' }, otelContext)
+                    }
                 }
                 catch (e) {
                     span.setStatus({ code: otel.SpanStatusCode.ERROR, message: e.toString() });
@@ -356,8 +411,9 @@ export class Store {
         this.manualRefresh = (options) => {
             const { label } = options ?? {};
             this.otel.tracer.startActiveSpan('LiveStore:manualRefresh', { attributes: { 'livestore.manualRefreshLabel': label } }, this.otel.applyEventsSpanContext, (span) => {
-                const otelContext = otel.trace.setSpan(otel.context.active(), span);
-                this.graph.refresh({ otelHint: 'manualRefresh', debugRefreshReason: { _tag: 'manualRefresh' } }, otelContext);
+                // const otelContext = otel.trace.setSpan(otel.context.active(), span)
+                // TODO update the graph
+                // this.graph.refresh({ otelHint: 'manualRefresh', debugRefreshReason: { _tag: 'manualRefresh' } }, otelContext)
                 span.end();
             });
         };
@@ -404,13 +460,13 @@ export class Store {
                 // Synchronously apply the event to the in-memory database
                 // const { durationMs } = this.inMemoryDB.applyEvent(eventWithId, actionDefinition, otelContext)
                 const { statement, bindValues } = eventToSql(eventWithId, actionDefinition);
-                const { durationMs } = this.inMemoryDB.execute(statement.sql, bindValues, statement.writeTables, {
+                const { durationMs } = this.inMemoryDB.execute(statement.sql, prepareBindValues(bindValues, statement.sql), statement.writeTables, {
                     otelContext,
                 });
                 // Asynchronously apply the event to a persistent storage (we're not awaiting this promise here)
                 if (this.storage !== undefined) {
                     // this.storage.applyEvent(eventWithId, actionDefinition, span)
-                    this.storage.execute(statement.sql, bindValues, span);
+                    this.storage.execute(statement.sql, prepareBindValues(bindValues, statement.sql), span);
                 }
                 // Uncomment to print a list of queries currently registered on the store
                 // console.log(JSON.parse(JSON.stringify([...this.queries].map((q) => `${labelForKey(q.componentKey)}/${q.label}`))))
@@ -427,20 +483,21 @@ export class Store {
          * This should only be used for framework-internal purposes;
          * all app writes should go through applyEvent.
          */
-        this.execute = async (query, params = {}, writeTables) => {
-            this.inMemoryDB.execute(query, params, writeTables);
+        this.execute = (query, params = {}, writeTables) => {
+            this.inMemoryDB.execute(query, prepareBindValues(params, query), writeTables);
             if (this.storage !== undefined) {
                 const parentSpan = otel.trace.getSpan(otel.context.active());
-                this.storage.execute(query, params, parentSpan);
+                this.storage.execute(query, prepareBindValues(params, query), parentSpan);
             }
         };
         this.inMemoryDB = db;
-        this.graph = new ReactiveGraph({
-            // TODO move this into React module
-            // Do all our updates inside a single React setState batch to avoid multiple UI re-renders
-            effectsWrapper: (run) => ReactDOM.unstable_batchedUpdates(() => run()),
-            otelTracer,
-        });
+        this._proxyDb = dbProxy;
+        // this.graph = new ReactiveGraph({
+        //   // TODO move this into React module
+        //   // Do all our updates inside a single React setState batch to avoid multiple UI re-renders
+        //   effectsWrapper: (run) => ReactDOM.unstable_batchedUpdates(() => run()),
+        //   otelTracer,
+        // })
         this.schema = schema;
         // TODO generalize the `tableRefs` concept to allow finer-grained refs
         this.tableRefs = {};
@@ -450,6 +507,8 @@ export class Store {
         const otelApplyEventsSpanContext = otel.trace.setSpan(otel.context.active(), applyEventsSpan);
         const queriesSpan = otelTracer.startSpan('LiveStore:queries', {}, otelRootSpanContext);
         const otelQueriesSpanContext = otel.trace.setSpan(otel.context.active(), queriesSpan);
+        this.graph = dbGraph;
+        this.graph.context = { store: this, otelTracer, rootOtelContext: otelQueriesSpanContext };
         this.otel = {
             tracer: otelTracer,
             applyEventsSpanContext: otelApplyEventsSpanContext,
@@ -485,40 +544,29 @@ Store.createStore = (storeOptions, parentSpan) => {
     });
 };
 /** Create a new LiveStore Store */
-export const createStore = async ({ schema, loadStorage, graphQLOptions, otelTracer = makeNoopTracer(), otelRootSpanContext = otel.context.active(), boot, }) => {
+export const createStore = async ({ schema, loadStorage, graphQLOptions, otelTracer = makeNoopTracer(), otelRootSpanContext = otel.context.active(), boot, sqlite3, }) => {
     return otelTracer.startActiveSpan('createStore', {}, otelRootSpanContext, async (span) => {
         try {
             const otelContext = otel.trace.setSpan(otel.context.active(), span);
-            const loadStorageAndPersistedData = async () => {
-                const storage = await otelTracer.startActiveSpan('storage:load', {}, otelContext, async (span) => {
-                    try {
-                        const init = await loadStorage();
-                        const parentSpan = otel.trace.getSpan(otel.context.active()) ?? makeNoopSpan();
-                        return init({ otelTracer, parentSpan });
-                    }
-                    finally {
-                        span.end();
-                    }
-                });
-                const persistedData = await otelTracer.startActiveSpan('storage:getPersistedData', {}, otelContext, async (span) => {
-                    try {
-                        return await storage.getPersistedData(span);
-                    }
-                    finally {
-                        span.end();
-                    }
-                });
-                return { storage, persistedData };
-            };
-            const loadSqlite3 = () => initSqlite3Wasm({
-                // Required to load the wasm binary asynchronously. Of course, you can host it wherever you want
-                // You can omit locateFile completely when running in node
-                // locateFile: () => `/sql-wasm.wasm`,
-                print: (message) => console.log(`[livestore sqlite] ${message}`),
-                printErr: (message) => console.error(`[livestore sqlite] ${message}`),
+            const storage = await otelTracer.startActiveSpan('storage:load', {}, otelContext, async (span) => {
+                try {
+                    const init = await loadStorage();
+                    const parentSpan = otel.trace.getSpan(otel.context.active()) ?? makeNoopSpan();
+                    return init({ otelTracer, parentSpan });
+                }
+                finally {
+                    span.end();
+                }
             });
-            const [{ storage, persistedData }, sqlite3] = await Promise.all([loadStorageAndPersistedData(), loadSqlite3()]);
-            const db = InMemoryDatabase.load(persistedData, otelTracer, otelRootSpanContext, sqlite3);
+            const persistedData = await otelTracer.startActiveSpan('storage:getPersistedData', {}, otelContext, async (span) => {
+                try {
+                    return await storage.getPersistedData(span);
+                }
+                finally {
+                    span.end();
+                }
+            });
+            const db = InMemoryDatabase.load({ data: persistedData, otelTracer, otelRootSpanContext, sqlite3 });
             // Proxy to `db` that also mirrors `execute` calls to `storage`
             const dbProxy = new Proxy(db, {
                 get: (db, prop, receiver) => {
@@ -529,6 +577,15 @@ export const createStore = async ({ schema, loadStorage, graphQLOptions, otelTra
                         };
                         return execute;
                     }
+                    else if (prop === 'select') {
+                        // NOTE we're even proxying `select` calls here as some apps (e.g. Overtone) currently rely on this
+                        // TODO remove this once we've migrated all apps to use `execute` instead of `select`
+                        const select = (query, options = {}) => {
+                            storage.execute(query, options.bindValues);
+                            return db.select(query, options);
+                        };
+                        return select;
+                    }
                     else {
                         return Reflect.get(db, prop, receiver);
                     }
@@ -553,7 +610,7 @@ export const createStore = async ({ schema, loadStorage, graphQLOptions, otelTra
             // TODO: we can't apply the schema at this point, we've already loaded persisted data!
             // Think about what to do about this case.
             // await applySchema(db, schema)
-            return Store.createStore({ db, schema, storage, graphQLOptions, otelTracer, otelRootSpanContext }, span);
+            return Store.createStore({ db, dbProxy, schema, storage, graphQLOptions, otelTracer, otelRootSpanContext }, span);
         }
         finally {
             span.end();