@livestore/livestore 0.0.13 → 0.0.14

package/src/store.ts

@@ -1,12 +1,8 @@
-import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
 import { assertNever, makeNoopSpan, makeNoopTracer, shouldNeverHappen } from '@livestore/utils'
 import { identity } from '@livestore/utils/effect'
 import * as otel from '@opentelemetry/api'
 import type { GraphQLSchema } from 'graphql'
-import * as graphql from 'graphql'
-import { uniqueId } from 'lodash-es'
-import * as ReactDOM from 'react-dom'
-import initSqlite3Wasm from 'sqlite-esm'
+import type * as Sqlite from 'sqlite-esm'
 import { v4 as uuid } from 'uuid'
 
 import type { ComponentKey } from './componentKey.js'
@@ -15,16 +11,17 @@ import type { LiveStoreEvent } from './events.js'
 import { InMemoryDatabase } from './inMemoryDatabase.js'
 import { migrateDb } from './migrations.js'
 import { getDurationMsFromSpan } from './otel.js'
-import type { GetAtom, Ref } from './reactive.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 type { ReactiveGraph, Ref } from './reactive.js'
+import type { ILiveStoreQuery } from './reactiveQueries/base-class.js'
+import { type DbContext, dbGraph } from './reactiveQueries/graph.js'
+import type { LiveStoreGraphQLQuery } from './reactiveQueries/graphql.js'
+import type { LiveStoreJSQuery } from './reactiveQueries/js.js'
+import type { LiveStoreSQLQuery } from './reactiveQueries/sql.js'
 import type { ActionDefinition, GetActionArgs, Schema, SQLWriteStatement } from './schema.js'
 import { componentStateTables } from './schema.js'
 import type { Storage, StorageInit } from './storage/index.js'
-import type { Bindable, ParamsObject } from './util.js'
-import { isPromise, sql } from './util.js'
+import type { ParamsObject } from './util.js'
+import { isPromise, prepareBindValues, sql } from './util.js'
 
 export type LiveStoreQuery<TResult extends Record<string, any> = any> =
   | LiveStoreSQLQuery<TResult>
@@ -37,8 +34,6 @@ export type BaseGraphQLContext = {
   otelContext?: otel.Context
 }
 
-export const RESET_DB_LOCAL_STORAGE_KEY = 'livestore-reset'
-
 export type QueryResult<TQuery> = TQuery extends LiveStoreSQLQuery<infer R>
   ? ReadonlyArray<Readonly<R>>
   : TQuery extends LiveStoreJSQuery<infer S>
@@ -47,7 +42,7 @@ export type QueryResult<TQuery> = TQuery extends LiveStoreSQLQuery<infer R>
   ? Readonly<Result>
   : never
 
-const globalComponentKey: ComponentKey = { _tag: 'singleton', componentName: '__global', id: 'singleton' }
+export const globalComponentKey: ComponentKey = { _tag: 'singleton', componentName: '__global', id: 'singleton' }
 
 export type GraphQLOptions<TContext> = {
   schema: GraphQLSchema
@@ -56,6 +51,8 @@ export type GraphQLOptions<TContext> = {
 
 export type StoreOptions<TGraphQLContext extends BaseGraphQLContext> = {
   db: InMemoryDatabase
+  /** A `Proxy`d version of `db` except that it also mirrors `execute` calls to the storage */
+  dbProxy: InMemoryDatabase
   schema: Schema
   storage?: Storage
   graphQLOptions?: GraphQLOptions<TGraphQLContext>
@@ -100,9 +97,11 @@ export type StoreOtel = {
   queriesSpanContext: otel.Context
 }
 
-export class Store<TGraphQLContext extends BaseGraphQLContext> {
-  graph: ReactiveGraph<RefreshReason, QueryDebugInfo>
+export class Store<TGraphQLContext extends BaseGraphQLContext = BaseGraphQLContext> {
+  graph: ReactiveGraph<RefreshReason, QueryDebugInfo, DbContext>
   inMemoryDB: InMemoryDatabase
+  // TODO refactor
+  _proxyDb: InMemoryDatabase
   schema: Schema
   graphQLSchema?: GraphQLSchema
   graphQLContext?: TGraphQLContext
@@ -118,6 +117,7 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
 
   private constructor({
     db,
+    dbProxy,
     schema,
     storage,
     graphQLOptions,
@@ -125,12 +125,13 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
     otelRootSpanContext,
   }: StoreOptions<TGraphQLContext>) {
     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 = {}
@@ -143,6 +144,9 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
     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,
@@ -187,372 +191,340 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
    *
    * NOTE The query is actually running (even if no one has subscribed to it yet) and will be kept up to date.
    */
-  querySQL = <TResult>(
-    genQueryString: (get: GetAtom) => 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) => {
-            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<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(sqlString, { queriedTables, bindValues, otelContext })
-
-                  span.setAttribute('sql.rowsCount', results.length)
-                  addDebugInfo({ _tag: 'sql', label: label ?? '', query: sqlString })
-
-                  return results as unknown as TResult[]
-                } 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: GetAtom) => 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(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: (get: GetAtom) => 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(
-          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()
-      }
-    })
-  }
+  // 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.
    */
-  subscribe = <TQuery extends LiveStoreQuery>(
-    query: TQuery,
-    onNewValue: (value: QueryResult<TQuery>) => void,
+  subscribe = <TResult>(
+    query: ILiveStoreQuery<TResult>,
+    onNewValue: (value: TResult) => void,
     onSubsubscribe?: () => void,
-    options?: { label?: string } | undefined,
+    options?: { label?: string; otelContext?: otel.Context } | undefined,
   ): (() => void) =>
     this.otel.tracer.startActiveSpan(
       `LiveStore.subscribe`,
       { attributes: { label: options?.label } },
-      query.otelContext,
+      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$) as QueryResult<TQuery>
-            onNewValue(result)
-          },
-          { label: `subscribe:${options?.label}` },
-          otelContext,
-        )
+        const effect = this.graph.makeEffect((get) => onNewValue(get(query.results$)), {
+          label: `subscribe:${options?.label}`,
+        })
+
+        effect.doEffect(otelContext)
 
-        const subscriptionKey = uuid()
+        // const subscriptionKey = uuid()
 
         const unsubscribe = () => {
           try {
             this.graph.destroy(effect)
-            query.activeSubscriptions.delete(subscriptionKey)
+            this.activeQueries.delete(query as LiveStoreQuery)
+            // query.activeSubscriptions.delete(subscriptionKey)
             onSubsubscribe?.()
           } finally {
             span.end()
           }
         }
 
-        query.activeSubscriptions.set(subscriptionKey, unsubscribe)
+        this.activeQueries.add(query as LiveStoreQuery)
+
+        // 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.
-   */
-  inTempQueryContext = <TResult>(callback: () => TResult): TResult => {
-    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).
    */
   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
   }
 
-  private destroyQuery = (query: LiveStoreQuery) => {
-    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.
-   */
-  unmountComponent = (componentKey: 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 */
   applyEvent = <TEventType extends string & keyof LiveStoreActionDefinitionsTypes>(
     eventType: TEventType,
@@ -581,20 +553,25 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
             tablesToUpdate.push([tableRef!, null])
           }
 
+          const debugRefreshReason = {
+            _tag: 'applyEvent' as const,
+            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: any) {
           span.setStatus({ code: otel.SpanStatusCode.ERROR, message: e.toString() })
 
@@ -677,20 +654,18 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
             tablesToUpdate.push([tableRef!, null])
           }
 
+          const debugRefreshReason = {
+            _tag: 'applyEvents' as const,
+            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: any) {
           span.setStatus({ code: otel.SpanStatusCode.ERROR, message: e.toString() })
         } finally {
@@ -713,8 +688,9 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
       { 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()
       },
     )
@@ -778,14 +754,19 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
         // 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, {
-          otelContext,
-        })
+        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
@@ -808,12 +789,12 @@ export class Store<TGraphQLContext extends BaseGraphQLContext> {
    * This should only be used for framework-internal purposes;
    * all app writes should go through applyEvent.
    */
-  execute = async (query: string, params: ParamsObject = {}, writeTables?: string[]) => {
-    this.inMemoryDB.execute(query, params, writeTables)
+  execute = (query: string, params: ParamsObject = {}, writeTables?: string[]) => {
+    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)
     }
   }
 }
@@ -826,6 +807,7 @@ export const createStore = async <TGraphQLContext extends BaseGraphQLContext>({
   otelTracer = makeNoopTracer(),
   otelRootSpanContext = otel.context.active(),
   boot,
+  sqlite3,
 }: {
   schema: Schema
   loadStorage: () => StorageInit | Promise<StorageInit>
@@ -833,50 +815,36 @@ export const createStore = async <TGraphQLContext extends BaseGraphQLContext>({
   otelTracer?: otel.Tracer
   otelRootSpanContext?: otel.Context
   boot?: (db: InMemoryDatabase, parentSpan: otel.Span) => unknown | Promise<unknown>
+  sqlite3: Sqlite.Sqlite3Static
 }): Promise<Store<TGraphQLContext>> => {
   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) => {
+      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 {
-            const init = await loadStorage()
-            const parentSpan = otel.trace.getSpan(otel.context.active()) ?? makeNoopSpan()
-            return init({ otelTracer, parentSpan })
+            return await storage.getPersistedData(span)
           } 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, persistedData }, sqlite3] = await Promise.all([loadStorageAndPersistedData(), loadSqlite3()])
+        },
+      )
 
-      const db = InMemoryDatabase.load(persistedData, otelTracer, otelRootSpanContext, sqlite3)
+      const db = InMemoryDatabase.load({ data: persistedData, otelTracer, otelRootSpanContext, sqlite3 })
 
       // Proxy to `db` that also mirrors `execute` calls to `storage`
       const dbProxy = new Proxy(db, {
@@ -887,6 +855,14 @@ export const createStore = async <TGraphQLContext extends BaseGraphQLContext>({
               return db.execute(query, bindValues, writeTables, options)
             }
             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: InMemoryDatabase['select'] = (query, options = {}) => {
+              storage.execute(query, options.bindValues as any)
+              return db.select(query, options)
+            }
+            return select
           } else {
             return Reflect.get(db, prop, receiver)
           }
@@ -914,7 +890,7 @@ export const createStore = async <TGraphQLContext extends BaseGraphQLContext>({
       // Think about what to do about this case.
       // await applySchema(db, schema)
       return Store.createStore<TGraphQLContext>(
-        { db, schema, storage, graphQLOptions, otelTracer, otelRootSpanContext },
+        { db, dbProxy, schema, storage, graphQLOptions, otelTracer, otelRootSpanContext },
         span,
       )
     } finally {