@livestore/livestore 0.0.34 → 0.0.36

package/src/reactiveQueries/graphql.ts

@@ -3,19 +3,19 @@ import { assertNever, shouldNeverHappen } from '@livestore/utils'
 import * as otel from '@opentelemetry/api'
 import * as graphql from 'graphql'
 
-import { dbGraph } from '../global-state.js'
+import { globalDbGraph } from '../global-state.js'
 import type { Thunk } from '../reactive.js'
 import type { BaseGraphQLContext, RefreshReason, Store } from '../store.js'
 import { getDurationMsFromSpan } from '../utils/otel.js'
-import type { DbContext, GetAtomResult } from './base-class.js'
+import type { DbContext, DbGraph, GetAtomResult } from './base-class.js'
 import { LiveStoreQueryBase, makeGetAtomResult } from './base-class.js'
 import { LiveStoreJSQuery } from './js.js'
 
 export const queryGraphQL = <TResult extends Record<string, any>, TVariableValues extends Record<string, any>>(
   document: DocumentNode<TResult, TVariableValues>,
   genVariableValues: TVariableValues | ((get: GetAtomResult) => TVariableValues),
-  { label }: { label?: string } = {},
-) => new LiveStoreGraphQLQuery({ document, genVariableValues, label })
+  { label, dbGraph }: { label?: string; dbGraph?: DbGraph } = {},
+) => new LiveStoreGraphQLQuery({ document, genVariableValues, label, dbGraph })
 
 export class LiveStoreGraphQLQuery<
   TResult extends Record<string, any>,
@@ -34,14 +34,18 @@ export class LiveStoreGraphQLQuery<
 
   label: string
 
+  protected dbGraph: DbGraph
+
   constructor({
     document,
     label,
     genVariableValues,
+    dbGraph,
   }: {
     document: DocumentNode<TResult, TVariableValues>
     genVariableValues: TVariableValues | ((get: GetAtomResult) => TVariableValues)
     label?: string
+    dbGraph?: DbGraph
   }) {
     super()
 
@@ -50,8 +54,10 @@ export class LiveStoreGraphQLQuery<
     this.label = labelWithDefault
     this.document = document
 
+    this.dbGraph = dbGraph ?? globalDbGraph
+
     // TODO don't even create a thunk if variables are static
-    const variableValues$ = dbGraph.makeThunk(
+    const variableValues$ = this.dbGraph.makeThunk(
       (get, _setDebugInfo, { rootOtelContext }, otelContext) => {
         if (typeof genVariableValues === 'function') {
           return genVariableValues(makeGetAtomResult(get, otelContext ?? rootOtelContext))
@@ -65,7 +71,7 @@ export class LiveStoreGraphQLQuery<
     this.variableValues$ = variableValues$
 
     const resultsLabel = `${labelWithDefault}:results`
-    this.results$ = dbGraph.makeThunk<TResult>(
+    this.results$ = this.dbGraph.makeThunk<TResult>(
       (get, setDebugInfo, { store, otelTracer, rootOtelContext }, otelContext) => {
         const variableValues = get(variableValues$)
         const { result, queriedTables, durationMs } = this.queryOnce({
@@ -104,6 +110,7 @@ export class LiveStoreGraphQLQuery<
       },
       label: `${this.label}:js`,
       onDestroy: () => this.destroy(),
+      dbGraph: this.dbGraph,
     })
 
   queryOnce = ({
@@ -163,7 +170,7 @@ export class LiveStoreGraphQLQuery<
   }
 
   destroy = () => {
-    dbGraph.destroy(this.variableValues$)
-    dbGraph.destroy(this.results$)
+    this.dbGraph.destroyNode(this.variableValues$)
+    this.dbGraph.destroyNode(this.results$)
   }
 }

package/src/reactiveQueries/js.ts

@@ -1,13 +1,14 @@
 import * as otel from '@opentelemetry/api'
 
-import { dbGraph } from '../global-state.js'
+import { globalDbGraph } from '../global-state.js'
 import type { Thunk } from '../reactive.js'
 import type { RefreshReason } from '../store.js'
 import { getDurationMsFromSpan } from '../utils/otel.js'
-import { type DbContext, type GetAtomResult, LiveStoreQueryBase, makeGetAtomResult } from './base-class.js'
+import type { DbContext, DbGraph, GetAtomResult } from './base-class.js'
+import { LiveStoreQueryBase, makeGetAtomResult } from './base-class.js'
 
-export const queryJS = <TResult>(fn: (get: GetAtomResult) => TResult, options: { label: string }) =>
-  new LiveStoreJSQuery<TResult>({ fn, label: options.label })
+export const queryJS = <TResult>(fn: (get: GetAtomResult) => TResult, options: { label: string; dbGraph?: DbGraph }) =>
+  new LiveStoreJSQuery<TResult>({ fn, label: options.label, dbGraph: options.dbGraph })
 
 export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase<TResult> {
   _tag: 'js' = 'js'
@@ -17,6 +18,8 @@ export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase<TResult> {
 
   label: string
 
+  protected dbGraph: DbGraph
+
   /**
    * Currently only used for "nested destruction" of piped queries
    *
@@ -29,20 +32,24 @@ export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase<TResult> {
     fn,
     label,
     onDestroy,
+    dbGraph,
   }: {
     label: string
     fn: (get: GetAtomResult) => TResult
     /** Currently only used for "nested destruction" of piped queries */
     onDestroy?: () => void
+    dbGraph?: DbGraph
   }) {
     super()
 
     this.onDestroy = onDestroy
     this.label = label
 
+    this.dbGraph = dbGraph ?? globalDbGraph
+
     const queryLabel = `${label}:results`
 
-    this.results$ = dbGraph.makeThunk(
+    this.results$ = this.dbGraph.makeThunk(
       (get, setDebugInfo, { otelTracer, rootOtelContext }, otelContext) =>
         otelTracer.startActiveSpan(`js:${label}`, {}, otelContext ?? rootOtelContext, (span) => {
           const otelContext = otel.trace.setSpan(otel.context.active(), span)
@@ -68,10 +75,11 @@ export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase<TResult> {
       },
       label: `${this.label}:js`,
       onDestroy: () => this.destroy(),
+      dbGraph: this.dbGraph,
     })
 
   destroy = () => {
-    dbGraph.destroy(this.results$)
+    this.dbGraph.destroyNode(this.results$)
     this.onDestroy?.()
   }
 }

package/src/reactiveQueries/sql.ts

@@ -1,13 +1,13 @@
 import { shouldNeverHappen } from '@livestore/utils'
 import * as otel from '@opentelemetry/api'
 
-import { dbGraph } from '../global-state.js'
+import { globalDbGraph } from '../global-state.js'
 import type { Thunk } from '../reactive.js'
 import type { RefreshReason } from '../store.js'
 import { getDurationMsFromSpan } from '../utils/otel.js'
 import type { Bindable } from '../utils/util.js'
 import { prepareBindValues } from '../utils/util.js'
-import type { DbContext, GetAtomResult } from './base-class.js'
+import type { DbContext, DbGraph, GetAtomResult } from './base-class.js'
 import { LiveStoreQueryBase, makeGetAtomResult } from './base-class.js'
 import { LiveStoreJSQuery } from './js.js'
 
@@ -22,6 +22,7 @@ export const querySQL = <Row>(
     queriedTables?: Set<string>
     bindValues?: Bindable
     label?: string
+    dbGraph?: DbGraph
   },
 ) =>
   new LiveStoreSQLQuery<Row>({
@@ -29,6 +30,7 @@ export const querySQL = <Row>(
     genQueryString: query,
     queriedTables: options?.queriedTables,
     bindValues: options?.bindValues,
+    dbGraph: options?.dbGraph,
   })
 
 /* An object encapsulating a reactive SQL query */
@@ -43,24 +45,29 @@ export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase<ReadonlyArray<Row
 
   label: string
 
+  protected dbGraph: DbGraph
+
   constructor({
     genQueryString,
     queriedTables,
     bindValues,
     label: label_,
+    dbGraph,
   }: {
     label?: string
     genQueryString: string | ((get: GetAtomResult) => string)
     queriedTables?: Set<string>
     bindValues?: Bindable
+    dbGraph?: DbGraph
   }) {
     super()
 
     const label = label_ ?? genQueryString.toString()
     this.label = `sql(${label})`
+    this.dbGraph = dbGraph ?? globalDbGraph
 
     // TODO don't even create a thunk if query string is static
-    const queryString$ = dbGraph.makeThunk(
+    const queryString$ = this.dbGraph.makeThunk(
       (get, setDebugInfo, { rootOtelContext }, otelContext) => {
         if (typeof genQueryString === 'function') {
           const startMs = performance.now()
@@ -81,7 +88,7 @@ export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase<ReadonlyArray<Row
 
     const queriedTablesRef = { current: queriedTables }
 
-    const results$ = dbGraph.makeThunk<ReadonlyArray<Row>>(
+    const results$ = this.dbGraph.makeThunk<ReadonlyArray<Row>>(
       (get, setDebugInfo, { store, otelTracer, rootOtelContext }, otelContext) =>
         otelTracer.startActiveSpan(
           'sql:...', // NOTE span name will be overridden further down
@@ -140,6 +147,7 @@ export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase<ReadonlyArray<Row
       },
       label: `${this.label}:js`,
       onDestroy: () => this.destroy(),
+      dbGraph: this.dbGraph,
     })
 
   /** Returns a reactive query  */
@@ -156,10 +164,11 @@ export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase<ReadonlyArray<Row
       },
       label: `${this.label}:first`,
       onDestroy: () => this.destroy(),
+      dbGraph: this.dbGraph,
     })
 
   destroy = () => {
-    dbGraph.destroy(this.queryString$)
-    dbGraph.destroy(this.results$)
+    this.dbGraph.destroyNode(this.queryString$)
+    this.dbGraph.destroyNode(this.results$)
   }
 }

package/src/row-query.ts

@@ -5,11 +5,13 @@ import { SqliteAst, SqliteDsl } from 'effect-db-schema'
 
 import type { InMemoryDatabase } from './inMemoryDatabase.js'
 import { migrateTable } from './migrations.js'
+import type { Ref } from './reactive.js'
+import type { DbContext, DbGraph } from './reactiveQueries/base-class.js'
 import type { LiveStoreJSQuery } from './reactiveQueries/js.js'
 import { LiveStoreSQLQuery } from './reactiveQueries/sql.js'
 import { SCHEMA_META_TABLE } from './schema/index.js'
 import type { TableDef } from './schema/table-def.js'
-import type { Store } from './store.js'
+import type { RefreshReason, Store } from './store.js'
 import { prepareBindValues, sql } from './utils/util.js'
 
 export type RowQueryArgs<TTableDef extends TableDef> = TTableDef['options']['isSingleton'] extends true
@@ -19,6 +21,7 @@ export type RowQueryArgs<TTableDef extends TableDef> = TTableDef['options']['isS
       otelContext?: otel.Context
       defaultValues: Partial<RowResult<TTableDef>>
       skipInsertDefaultRow?: boolean
+      dbGraph?: DbGraph
     }
   : {
       table: TTableDef
@@ -27,13 +30,14 @@ export type RowQueryArgs<TTableDef extends TableDef> = TTableDef['options']['isS
       id: string
       defaultValues: Partial<RowResult<TTableDef>>
       skipInsertDefaultRow?: boolean
+      dbGraph?: DbGraph
     }
 
 // TODO also allow other where clauses and multiple rows
 export const rowQuery = <TTableDef extends TableDef>(
   args: RowQueryArgs<TTableDef>,
 ): LiveStoreJSQuery<RowResult<TTableDef>> => {
-  const { table, store, defaultValues, skipInsertDefaultRow } = args
+  const { table, store, defaultValues, skipInsertDefaultRow, dbGraph } = args
   const otelContext = args.otelContext ?? store.otel.queriesSpanContext
   const id: string | undefined = (args as any).id
 
@@ -64,11 +68,19 @@ export const rowQuery = <TTableDef extends TableDef>(
       })
     }
 
-    store.tableRefs[componentTableName] = store.graph.makeRef(null, {
-      equal: () => false,
-      label: componentTableName,
-      meta: { liveStoreRefType: 'table' },
-    })
+    const label = `tableRef:${componentTableName}`
+
+    const existingTableRefFromGraph = Array.from(store.graph.atoms.values()).find(
+      (_) => _._tag === 'ref' && _.label === label,
+    ) as Ref<null, DbContext, RefreshReason> | undefined
+
+    store.tableRefs[componentTableName] =
+      existingTableRefFromGraph ??
+      store.graph.makeRef(null, {
+        equal: () => false,
+        label,
+        meta: { liveStoreRefType: 'table' },
+      })
   }
 
   if (skipInsertDefaultRow !== true) {
@@ -89,6 +101,7 @@ export const rowQuery = <TTableDef extends TableDef>(
     label: `localState:query:${stateSchema.name}${id === undefined ? '' : `:${id}`}`,
     genQueryString: queryStr,
     queriedTables: new Set([componentTableName]),
+    dbGraph,
   }).pipe<TComponentState>((results) => {
     if (results.length === 0) return shouldNeverHappen(`No results for query ${queryStr}`)
 

package/src/store.ts

@@ -6,12 +6,12 @@ import type * as Sqlite from 'sqlite-esm'
 import { v4 as uuid } from 'uuid'
 
 import type { LiveStoreEvent } from './events.js'
-import { dbGraph, dynamicallyRegisteredTables } from './global-state.js'
+import { dynamicallyRegisteredTables, globalDbGraph } from './global-state.js'
 import { InMemoryDatabase } from './inMemoryDatabase.js'
 import { migrateDb } from './migrations.js'
 import type { StackInfo } from './react/utils/stack-info.js'
 import type { DebugRefreshReasonBase, ReactiveGraph, Ref } from './reactive.js'
-import type { DbContext, ILiveStoreQuery } from './reactiveQueries/base-class.js'
+import type { DbContext, DbGraph, ILiveStoreQuery } from './reactiveQueries/base-class.js'
 import type { LiveStoreGraphQLQuery } from './reactiveQueries/graphql.js'
 import type { LiveStoreJSQuery } from './reactiveQueries/js.js'
 import type { LiveStoreSQLQuery } from './reactiveQueries/sql.js'
@@ -54,6 +54,7 @@ export type StoreOptions<TGraphQLContext extends BaseGraphQLContext> = {
   graphQLOptions?: GraphQLOptions<TGraphQLContext>
   otelTracer: otel.Tracer
   otelRootSpanContext: otel.Context
+  dbGraph?: DbGraph
 }
 
 export type RefreshReason =
@@ -99,7 +100,11 @@ export type StoreOtel = {
   queriesSpanContext: otel.Context
 }
 
+let storeCount = 0
+const uniqueStoreId = () => `store-${++storeCount}`
+
 export class Store<TGraphQLContext extends BaseGraphQLContext = BaseGraphQLContext> {
+  id = uniqueStoreId()
   graph: ReactiveGraph<RefreshReason, QueryDebugInfo, DbContext>
   inMemoryDB: InMemoryDatabase
   // TODO refactor
@@ -124,6 +129,7 @@ export class Store<TGraphQLContext extends BaseGraphQLContext = BaseGraphQLConte
     schema,
     storage,
     graphQLOptions,
+    dbGraph,
     otelTracer,
     otelRootSpanContext,
   }: StoreOptions<TGraphQLContext>) {
@@ -141,8 +147,7 @@ export class Store<TGraphQLContext extends BaseGraphQLContext = BaseGraphQLConte
     const queriesSpan = otelTracer.startSpan('LiveStore:queries', {}, otelRootSpanContext)
     const otelQueriesSpanContext = otel.trace.setSpan(otel.context.active(), queriesSpan)
 
-    // TODO allow passing in a custom graph
-    this.graph = dbGraph
+    this.graph = dbGraph ?? globalDbGraph
     this.graph.context = { store: this, otelTracer, rootOtelContext: otelQueriesSpanContext }
 
     this.otel = {
@@ -157,12 +162,19 @@ export class Store<TGraphQLContext extends BaseGraphQLContext = BaseGraphQLConte
       // TODO activate dynamic tables
       ...Array.from(dynamicallyRegisteredTables.values()).map((_) => _.schema.name),
     ])
+    const existingTableRefs = new Map(
+      Array.from(this.graph.atoms.values())
+        .filter((_): _ is Ref<any, any, any> => _._tag === 'ref' && _.label?.startsWith('tableRef:') === true)
+        .map((_) => [_.label!.slice('tableRef:'.length), _] as const),
+    )
     for (const tableName of allTableNames) {
-      this.tableRefs[tableName] = this.graph.makeRef(null, {
-        equal: () => false,
-        label: tableName,
-        meta: { liveStoreRefType: 'table' },
-      })
+      this.tableRefs[tableName] =
+        existingTableRefs.get(tableName) ??
+        this.graph.makeRef(null, {
+          equal: () => false,
+          label: `tableRef:${tableName}`,
+          meta: { liveStoreRefType: 'table' },
+        })
     }
 
     if (graphQLOptions) {
@@ -214,7 +226,7 @@ export class Store<TGraphQLContext extends BaseGraphQLContext = BaseGraphQLConte
 
         const unsubscribe = () => {
           try {
-            this.graph.destroy(effect)
+            this.graph.destroyNode(effect)
             this.activeQueries.remove(query as LiveStoreQuery)
             onUnsubsubscribe?.()
           } finally {
@@ -232,12 +244,14 @@ export class Store<TGraphQLContext extends BaseGraphQLContext = BaseGraphQLConte
    * Currently only used when shutting down the app for debugging purposes (e.g. to close Otel spans).
    */
   destroy = () => {
-    Object.values(this.tableRefs).forEach((tableRef) => this.graph.destroy(tableRef))
+    for (const tableRef of Object.values(this.tableRefs)) {
+      for (const superComp of tableRef.super) {
+        this.graph.removeEdge(superComp, tableRef)
+      }
+    }
 
     otel.trace.getSpan(this.otel.applyEventsSpanContext)!.end()
     otel.trace.getSpan(this.otel.queriesSpanContext)!.end()
-
-    // TODO destroy active subscriptions
   }
 
   /* Apply a single write event to the store, and refresh all queries in response */
@@ -533,16 +547,18 @@ export const createStore = async <TGraphQLContext extends BaseGraphQLContext>({
   graphQLOptions,
   otelTracer = makeNoopTracer(),
   otelRootSpanContext = otel.context.active(),
-  boot,
   sqlite3,
+  boot,
+  dbGraph,
 }: {
   schema: LiveStoreSchema
   loadStorage: () => StorageInit | Promise<StorageInit>
   graphQLOptions?: GraphQLOptions<TGraphQLContext>
   otelTracer?: otel.Tracer
   otelRootSpanContext?: otel.Context
-  boot?: (db: InMemoryDatabase, parentSpan: otel.Span) => unknown | Promise<unknown>
   sqlite3: Sqlite.Sqlite3Static
+  boot?: (db: InMemoryDatabase, parentSpan: otel.Span) => unknown | Promise<unknown>
+  dbGraph?: DbGraph
 }): Promise<Store<TGraphQLContext>> => {
   return otelTracer.startActiveSpan('createStore', {}, otelRootSpanContext, async (span) => {
     try {
@@ -573,12 +589,17 @@ export const createStore = async <TGraphQLContext extends BaseGraphQLContext>({
 
       const db = InMemoryDatabase.load({ data: persistedData, otelTracer, otelRootSpanContext, sqlite3 })
 
+      const txnKeywords = ['begin transaction;', 'commit;', 'rollback;']
+      const isTxnQuery = (query: string) => txnKeywords.some((_) => query.toLowerCase().startsWith(_))
+
       // Proxy to `db` that also mirrors `execute` calls to `storage`
       const dbProxy = new Proxy(db, {
         get: (db, prop, receiver) => {
           if (prop === 'execute') {
             const execute: InMemoryDatabase['execute'] = (query, bindValues, writeTables, options) => {
-              storage.execute(query, bindValues, span)
+              if (isTxnQuery(query) === false) {
+                storage.execute(query, bindValues, span)
+              }
               return db.execute(query, bindValues, writeTables, options)
             }
             return execute
@@ -617,7 +638,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, dbProxy, schema, storage, graphQLOptions, otelTracer, otelRootSpanContext },
+        { db, dbProxy, schema, storage, graphQLOptions, otelTracer, otelRootSpanContext, dbGraph },
         span,
       )
     } finally {