@livestore/livestore 0.0.0-snapshot-d9d66b354a9f4cfae987725d38971992ff14e4ad → 0.0.0-snapshot-1d99fea7d2ce2c7a5d9ed0a3752f8a7bda6bc3db

package/src/live-queries/computed.ts

@@ -1,27 +1,47 @@
 import type { QueryInfo } from '@livestore/common'
 import * as otel from '@opentelemetry/api'
 
-import { globalReactivityGraph } from '../global-state.js'
 import type { Thunk } from '../reactive.js'
 import type { RefreshReason } from '../store/store-types.js'
+import { isValidFunctionString } from '../utils/function-string.js'
 import { getDurationMsFromSpan } from '../utils/otel.js'
-import type { GetAtomResult, LiveQuery, QueryContext, ReactivityGraph } from './base-class.js'
-import { LiveStoreQueryBase, makeGetAtomResult } from './base-class.js'
+import type { DepKey, GetAtomResult, LiveQueryDef, ReactivityGraph, ReactivityGraphContext } from './base-class.js'
+import { depsToString, LiveStoreQueryBase, makeGetAtomResult, withRCMap } from './base-class.js'
 
 export const computed = <TResult, TQueryInfo extends QueryInfo = QueryInfo.None>(
   fn: (get: GetAtomResult) => TResult,
   options?: {
-    label: string
-    reactivityGraph?: ReactivityGraph
+    label?: string
     queryInfo?: TQueryInfo
+    deps?: DepKey
   },
-): LiveQuery<TResult, TQueryInfo> =>
-  new LiveStoreComputedQuery<TResult, TQueryInfo>({
-    fn,
+): LiveQueryDef<TResult, TQueryInfo> => {
+  const hash = options?.deps ? depsToString(options.deps) : fn.toString()
+  if (isValidFunctionString(hash)._tag === 'invalid') {
+    throw new Error(`On Expo/React Native, computed queries must provide a \`deps\` option`)
+  }
+
+  const queryInfo = options?.queryInfo ?? ({ _tag: 'None' } as TQueryInfo)
+
+  return {
+    _tag: 'def',
+    make: withRCMap(hash, (ctx, _otelContext) => {
+      // TODO onDestroy
+      return new LiveStoreComputedQuery<TResult, TQueryInfo>({
+        fn,
+        label: options?.label ?? fn.toString(),
+        queryInfo: options?.queryInfo,
+        reactivityGraph: ctx.reactivityGraph.deref()!,
+      })
+    }),
     label: options?.label ?? fn.toString(),
-    reactivityGraph: options?.reactivityGraph,
-    queryInfo: options?.queryInfo,
-  })
+    // NOTE We're using the `makeQuery` function body string to make sure the key is unique across the app
+    // TODO we should figure out whether this could cause some problems and/or if there's a better way to do this
+    // NOTE `fn.toString()` doesn't work in Expo as it always produces `[native code]`
+    hash,
+    queryInfo,
+  }
+}
 
 export class LiveStoreComputedQuery<TResult, TQueryInfo extends QueryInfo = QueryInfo.None> extends LiveStoreQueryBase<
   TResult,
@@ -30,11 +50,11 @@ export class LiveStoreComputedQuery<TResult, TQueryInfo extends QueryInfo = Quer
   _tag: 'computed' = 'computed'
 
   /** A reactive thunk representing the query results */
-  results$: Thunk<TResult, QueryContext, RefreshReason>
+  results$: Thunk<TResult, ReactivityGraphContext, RefreshReason>
 
   label: string
 
-  protected reactivityGraph: ReactivityGraph
+  reactivityGraph: ReactivityGraph
 
   queryInfo: TQueryInfo
 
@@ -46,23 +66,22 @@ export class LiveStoreComputedQuery<TResult, TQueryInfo extends QueryInfo = Quer
   }: {
     label: string
     fn: (get: GetAtomResult) => TResult
-    reactivityGraph?: ReactivityGraph
+    reactivityGraph: ReactivityGraph
     queryInfo?: TQueryInfo
   }) {
     super()
 
     this.label = label
-
-    this.reactivityGraph = reactivityGraph ?? globalReactivityGraph
+    this.reactivityGraph = reactivityGraph
     this.queryInfo = queryInfo ?? ({ _tag: 'None' } as TQueryInfo)
 
     const queryLabel = `${label}:results`
 
     this.results$ = this.reactivityGraph.makeThunk(
-      (get, setDebugInfo, { otelTracer, rootOtelContext }, otelContext) =>
-        otelTracer.startActiveSpan(`js:${label}`, {}, otelContext ?? rootOtelContext, (span) => {
+      (get, setDebugInfo, ctx, otelContext) =>
+        ctx.otelTracer.startActiveSpan(`js:${label}`, {}, otelContext ?? ctx.rootOtelContext, (span) => {
           const otelContext = otel.trace.setSpan(otel.context.active(), span)
-          const res = fn(makeGetAtomResult(get, otelContext))
+          const res = fn(makeGetAtomResult(get, ctx, otelContext, this.dependencyQueriesRef))
 
           span.end()
 
@@ -79,6 +98,12 @@ export class LiveStoreComputedQuery<TResult, TQueryInfo extends QueryInfo = Quer
   }
 
   destroy = () => {
+    this.isDestroyed = true
+
     this.reactivityGraph.destroyNode(this.results$)
+
+    for (const query of this.dependencyQueriesRef) {
+      query.deref()
+    }
   }
 }

package/src/live-queries/{db.test.ts → db-query.test.ts}

@@ -1,9 +1,11 @@
 import { Effect, Schema } from '@livestore/utils/effect'
+import { Vitest } from '@livestore/utils/node-vitest'
 import * as otel from '@opentelemetry/api'
 import { BasicTracerProvider, InMemorySpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'
-import { describe, expect, it } from 'vitest'
+import { expect } from 'vitest'
 
 import { computed, queryDb, rawSqlMutation, sql } from '../index.js'
+import * as RG from '../reactive.js'
 import { makeTodoMvc, tables } from '../utils/tests/fixture.js'
 import { getSimplifiedRootSpan } from '../utils/tests/otel.js'
 
@@ -14,12 +16,15 @@ TODO write tests for:
 - optional and explicit `queriedTables` argument
 */
 
-describe('otel', () => {
+Vitest.describe('otel', () => {
   let cachedProvider: BasicTracerProvider | undefined
 
   const makeQuery = Effect.gen(function* () {
     const exporter = new InMemorySpanExporter()
 
+    RG.__resetIds()
+
+    // const provider = cachedProvider ?? new BasicTracerProvider({ spanProcessors: [new SimpleSpanProcessor(exporter)] })
     const provider = cachedProvider ?? new BasicTracerProvider()
     cachedProvider = provider
     provider.addSpanProcessor(new SimpleSpanProcessor(exporter))
@@ -27,10 +32,10 @@ describe('otel', () => {
 
     const otelTracer = otel.trace.getTracer('test')
 
-    const span = otelTracer.startSpan('test')
+    const span = otelTracer.startSpan('test-root')
     const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
-    const { store } = yield* makeTodoMvc({ otelTracer, otelContext })
+    const store = yield* makeTodoMvc({ otelTracer, otelContext })
 
     return {
       store,
@@ -41,8 +46,8 @@ describe('otel', () => {
     }
   })
 
-  it('otel', async () => {
-    const { exporter } = await Effect.gen(function* () {
+  Vitest.scopedLive('otel', () =>
+    Effect.gen(function* () {
       const { store, exporter, span } = yield* makeQuery
 
       const query$ = queryDb({
@@ -50,11 +55,11 @@ describe('otel', () => {
         schema: Schema.Array(tables.todos.schema),
         queriedTables: new Set(['todos']),
       })
-      expect(query$.run()).toMatchInlineSnapshot('[]')
+      expect(store.query(query$)).toMatchInlineSnapshot('[]')
 
       store.mutate(rawSqlMutation({ sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)` }))
 
-      expect(query$.run()).toMatchInlineSnapshot(`
+      expect(store.query(query$)).toMatchInlineSnapshot(`
       [
         {
           "completed": false,
@@ -64,17 +69,17 @@ describe('otel', () => {
       ]
     `)
 
-      query$.destroy()
       span.end()
 
       return { exporter }
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise)
-
-    expect(getSimplifiedRootSpan(exporter)).toMatchSnapshot()
-  })
-
-  it('with thunks', async () => {
-    const { exporter } = await Effect.gen(function* () {
+    }).pipe(
+      Effect.scoped,
+      Effect.tap(({ exporter }) => expect(getSimplifiedRootSpan(exporter)).toMatchSnapshot()),
+    ),
+  )
+
+  Vitest.scopedLive('with thunks', () =>
+    Effect.gen(function* () {
       const { store, exporter, span } = yield* makeQuery
 
       const defaultTodo = { id: '', text: '', completed: false }
@@ -88,7 +93,9 @@ describe('otel', () => {
         { label: 'all todos' },
       )
 
-      expect(query$.run()).toMatchInlineSnapshot(`
+      expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+
+      expect(store.query(query$)).toMatchInlineSnapshot(`
       {
         "completed": false,
         "id": "",
@@ -96,9 +103,13 @@ describe('otel', () => {
       }
     `)
 
+      expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+
       store.mutate(rawSqlMutation({ sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)` }))
 
-      expect(query$.run()).toMatchInlineSnapshot(`
+      expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+
+      expect(store.query(query$)).toMatchInlineSnapshot(`
       {
         "completed": false,
         "id": "t1",
@@ -106,17 +117,19 @@ describe('otel', () => {
       }
     `)
 
-      query$.destroy()
+      expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+
       span.end()
 
       return { exporter }
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise)
-
-    expect(getSimplifiedRootSpan(exporter)).toMatchSnapshot()
-  })
-
-  it('with thunks with query builder and without labels', async () => {
-    const { exporter } = await Effect.gen(function* () {
+    }).pipe(
+      Effect.scoped,
+      Effect.tap(({ exporter }) => expect(getSimplifiedRootSpan(exporter)).toMatchSnapshot()),
+    ),
+  )
+
+  Vitest.scopedLive('with thunks with query builder and without labels', () =>
+    Effect.gen(function* () {
       const { store, exporter, span } = yield* makeQuery
 
       const defaultTodo = { id: '', text: '', completed: false }
@@ -124,7 +137,7 @@ describe('otel', () => {
       const filter = computed(() => ({ completed: false }))
       const query$ = queryDb((get) => tables.todos.query.where(get(filter)).first({ fallback: () => defaultTodo }))
 
-      expect(query$.run()).toMatchInlineSnapshot(`
+      expect(store.query(query$)).toMatchInlineSnapshot(`
       {
         "completed": false,
         "id": "",
@@ -134,7 +147,7 @@ describe('otel', () => {
 
       store.mutate(rawSqlMutation({ sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)` }))
 
-      expect(query$.run()).toMatchInlineSnapshot(`
+      expect(store.query(query$)).toMatchInlineSnapshot(`
       {
         "completed": false,
         "id": "t1",
@@ -142,12 +155,12 @@ describe('otel', () => {
       }
     `)
 
-      query$.destroy()
       span.end()
 
       return { exporter }
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise)
-
-    expect(getSimplifiedRootSpan(exporter)).toMatchSnapshot()
-  })
+    }).pipe(
+      Effect.scoped,
+      Effect.tap(({ exporter }) => expect(getSimplifiedRootSpan(exporter)).toMatchSnapshot()),
+    ),
+  )
 })

package/src/live-queries/{db.ts → db-query.ts}

@@ -5,19 +5,20 @@ import {
   prepareBindValues,
   QueryBuilderAstSymbol,
   replaceSessionIdSymbol,
+  UnexpectedError,
 } from '@livestore/common'
 import { deepEqual, shouldNeverHappen } from '@livestore/utils'
 import { Predicate, Schema, TreeFormatter } from '@livestore/utils/effect'
 import * as otel from '@opentelemetry/api'
 
-import { globalReactivityGraph } from '../global-state.js'
 import type { Thunk } from '../reactive.js'
 import { isThunk, NOT_REFRESHED_YET } from '../reactive.js'
 import { makeExecBeforeFirstRun, rowQueryLabel } from '../row-query-utils.js'
 import type { RefreshReason } from '../store/store-types.js'
+import { isValidFunctionString } from '../utils/function-string.js'
 import { getDurationMsFromSpan } from '../utils/otel.js'
-import type { GetAtomResult, LiveQuery, QueryContext, ReactivityGraph } from './base-class.js'
-import { LiveStoreQueryBase, makeGetAtomResult } from './base-class.js'
+import type { DepKey, GetAtomResult, LiveQueryDef, ReactivityGraph, ReactivityGraphContext } from './base-class.js'
+import { depsToString, LiveStoreQueryBase, makeGetAtomResult, withRCMap } from './base-class.js'
 
 export type QueryInputRaw<TDecoded, TEncoded, TQueryInfo extends QueryInfo> = {
   query: string
@@ -30,9 +31,12 @@ export type QueryInputRaw<TDecoded, TEncoded, TQueryInfo extends QueryInfo> = {
    */
   queriedTables?: Set<string>
   queryInfo?: TQueryInfo
-  execBeforeFirstRun?: (ctx: QueryContext) => void
+  execBeforeFirstRun?: (ctx: ReactivityGraphContext) => void
 }
 
+export const isQueryInputRaw = (value: unknown): value is QueryInputRaw<any, any, any> =>
+  Predicate.hasProperty(value, 'query') && Predicate.hasProperty(value, 'schema')
+
 export type QueryInput<TDecoded, TEncoded, TQueryInfo extends QueryInfo> =
   | QueryInputRaw<TDecoded, TEncoded, TQueryInfo>
   | QueryBuilder<TDecoded, any, any, TQueryInfo>
@@ -51,10 +55,10 @@ export const queryDb: {
        * Used for debugging / devtools
        */
       label?: string
-      reactivityGraph?: ReactivityGraph
-      otelContext?: otel.Context
+      deps?: DepKey
+      queryInfo?: TQueryInfo
     },
-  ): LiveQuery<TResult, TQueryInfo>
+  ): LiveQueryDef<TResult, TQueryInfo>
   // NOTE in this "thunk case", we can't directly derive label/queryInfo from the queryInput,
   // so the caller needs to provide them explicitly otherwise queryInfo will be set to `None`,
   // and label will be set during the query execution
@@ -68,20 +72,46 @@ export const queryDb: {
        * Used for debugging / devtools
        */
       label?: string
-      reactivityGraph?: ReactivityGraph
+      deps?: DepKey
       queryInfo?: TQueryInfo
-      otelContext?: otel.Context
     },
-  ): LiveQuery<TResult, TQueryInfo>
-} = (queryInput, options) =>
-  new LiveStoreDbQuery({
-    queryInput,
-    label: options?.label,
-    reactivityGraph: options?.reactivityGraph,
-    map: options?.map,
-    queryInfo: Predicate.hasProperty(options, 'queryInfo') ? (options.queryInfo as QueryInfo) : undefined,
-    otelContext: options?.otelContext,
-  })
+  ): LiveQueryDef<TResult, TQueryInfo>
+} = (queryInput, options) => {
+  const queryString = isQueryBuilder(queryInput)
+    ? queryInput.toString()
+    : isQueryInputRaw(queryInput)
+      ? queryInput.query
+      : typeof queryInput === 'function'
+        ? queryInput.toString()
+        : shouldNeverHappen(`Invalid query input: ${queryInput}`)
+
+  const hash = options?.deps ? queryString + '-' + depsToString(options.deps) : queryString
+  if (isValidFunctionString(hash)._tag === 'invalid') {
+    throw new Error(`On Expo/React Native, db queries must provide a \`deps\` option`)
+  }
+
+  const label = options?.label ?? queryString
+
+  return {
+    _tag: 'def',
+    make: withRCMap(hash, (ctx, otelContext) => {
+      // TODO onDestroy
+      return new LiveStoreDbQuery({
+        reactivityGraph: ctx.reactivityGraph.deref()!,
+        queryInput,
+        label,
+        map: options?.map,
+        // We're not falling back to `None` here as the queryInfo will be set dynamically
+        queryInfo: options?.queryInfo,
+        otelContext,
+      })
+    }),
+    label,
+    hash,
+    queryInfo:
+      options?.queryInfo ?? (isQueryBuilder(queryInput) ? queryInfoFromQueryBuilder(queryInput) : { _tag: 'None' }),
+  }
+}
 
 /* An object encapsulating a reactive SQL query */
 export class LiveStoreDbQuery<
@@ -92,16 +122,16 @@ export class LiveStoreDbQuery<
   _tag: 'db' = 'db'
 
   /** A reactive thunk representing the query text */
-  queryInput$: Thunk<QueryInput<TResultSchema, ReadonlyArray<any>, TQueryInfo>, QueryContext, RefreshReason> | undefined
+  queryInput$: Thunk<QueryInputRaw<any, any, QueryInfo>, ReactivityGraphContext, RefreshReason> | undefined
 
   /** A reactive thunk representing the query results */
-  results$: Thunk<TResult, QueryContext, RefreshReason>
+  results$: Thunk<TResult, ReactivityGraphContext, RefreshReason>
 
   label: string
 
   queryInfo: TQueryInfo
 
-  protected reactivityGraph
+  readonly reactivityGraph
 
   private mapResult: (rows: TResultSchema) => TResult
 
@@ -116,17 +146,18 @@ export class LiveStoreDbQuery<
     label?: string
     queryInput:
       | QueryInput<TResultSchema, ReadonlyArray<any>, TQueryInfo>
-      | ((get: GetAtomResult, ctx: QueryContext) => QueryInput<TResultSchema, ReadonlyArray<any>, TQueryInfo>)
-    reactivityGraph?: ReactivityGraph
+      | ((get: GetAtomResult, ctx: ReactivityGraphContext) => QueryInput<TResultSchema, ReadonlyArray<any>, TQueryInfo>)
+    reactivityGraph: ReactivityGraph
     map?: (rows: TResultSchema) => TResult
     queryInfo?: TQueryInfo
+    /** Only used for the initial query execution */
     otelContext?: otel.Context
   }) {
     super()
 
     let label = inputLabel ?? 'db(unknown)'
     let queryInfo = inputQueryInfo ?? ({ _tag: 'None' } as TQueryInfo)
-    this.reactivityGraph = reactivityGraph ?? globalReactivityGraph
+    this.reactivityGraph = reactivityGraph
 
     this.mapResult = map === undefined ? (rows: any) => rows as TResult : map
 
@@ -135,37 +166,43 @@ export class LiveStoreDbQuery<
         typeof queryInput === 'function' ? undefined : isQueryBuilder(queryInput) ? undefined : queryInput.schema,
     }
 
-    const execBeforeFirstRunRef: { current: ((ctx: QueryContext, otelContext: otel.Context) => void) | undefined } = {
+    const execBeforeFirstRunRef: {
+      current: ((ctx: ReactivityGraphContext, otelContext: otel.Context) => void) | undefined
+    } = {
       current: undefined,
     }
 
     type TQueryInputRaw = QueryInputRaw<any, any, QueryInfo>
 
-    let queryInputRaw$OrQueryInputRaw: TQueryInputRaw | Thunk<TQueryInputRaw, QueryContext, RefreshReason>
+    let queryInputRaw$OrQueryInputRaw: TQueryInputRaw | Thunk<TQueryInputRaw, ReactivityGraphContext, RefreshReason>
 
     const fromQueryBuilder = (qb: QueryBuilder.Any, otelContext: otel.Context | undefined) => {
-      const qbRes = qb.asSql()
-      const schema = getResultSchema(qb) as Schema.Schema<TResultSchema, ReadonlyArray<any>>
-      const ast = qb[QueryBuilderAstSymbol]
-
-      return {
-        queryInputRaw: {
-          query: qbRes.query,
-          schema,
-          bindValues: qbRes.bindValues,
-          queriedTables: new Set([ast.tableDef.sqliteDef.name]),
-          queryInfo: ast._tag === 'RowQuery' ? { _tag: 'Row', table: ast.tableDef, id: ast.id } : { _tag: 'None' },
-        } satisfies TQueryInputRaw,
-        label: ast._tag === 'RowQuery' ? rowQueryLabel(ast.tableDef, ast.id) : qb.toString(),
-        execBeforeFirstRun:
-          ast._tag === 'RowQuery'
-            ? makeExecBeforeFirstRun({
-                table: ast.tableDef,
-                insertValues: ast.insertValues,
-                id: ast.id,
-                otelContext,
-              })
-            : undefined,
+      try {
+        const qbRes = qb.asSql()
+        const schema = getResultSchema(qb) as Schema.Schema<TResultSchema, ReadonlyArray<any>>
+        const ast = qb[QueryBuilderAstSymbol]
+
+        return {
+          queryInputRaw: {
+            query: qbRes.query,
+            schema,
+            bindValues: qbRes.bindValues,
+            queriedTables: new Set([ast.tableDef.sqliteDef.name]),
+            queryInfo: queryInfoFromQueryBuilder(qb),
+          } satisfies TQueryInputRaw,
+          label: ast._tag === 'RowQuery' ? rowQueryLabel(ast.tableDef, ast.id) : qb.toString(),
+          execBeforeFirstRun:
+            ast._tag === 'RowQuery'
+              ? makeExecBeforeFirstRun({
+                  table: ast.tableDef,
+                  insertValues: ast.insertValues,
+                  id: ast.id,
+                  otelContext,
+                })
+              : undefined,
+        }
+      } catch (cause) {
+        throw new UnexpectedError({ cause, note: `Error building query for ${qb.toString()}`, payload: { qb } })
       }
     }
 
@@ -173,7 +210,10 @@ export class LiveStoreDbQuery<
       queryInputRaw$OrQueryInputRaw = this.reactivityGraph.makeThunk(
         (get, setDebugInfo, ctx, otelContext) => {
           const startMs = performance.now()
-          const queryInputResult = queryInput(makeGetAtomResult(get, otelContext ?? ctx.rootOtelContext), ctx)
+          const queryInputResult = queryInput(
+            makeGetAtomResult(get, ctx, otelContext ?? ctx.rootOtelContext, this.dependencyQueriesRef),
+            ctx,
+          )
           const durationMs = performance.now() - startMs
 
           let queryInputRaw: TQueryInputRaw
@@ -205,6 +245,8 @@ export class LiveStoreDbQuery<
           equal: (a, b) => a.query === b.query && deepEqual(a.bindValues, b.bindValues),
         },
       )
+
+      this.queryInput$ = queryInputRaw$OrQueryInputRaw
     } else {
       let queryInputRaw: TQueryInputRaw
       if (isQueryBuilder(queryInput)) {
@@ -248,10 +290,16 @@ export class LiveStoreDbQuery<
         : undefined
 
     const results$ = this.reactivityGraph.makeThunk<TResult>(
-      (get, setDebugInfo, queryContext, otelContext) =>
+      (get, setDebugInfo, queryContext, otelContext, debugRefreshReason) =>
         queryContext.otelTracer.startActiveSpan(
           'db:...', // NOTE span name will be overridden further down
-          {},
+          {
+            attributes: {
+              'livestore.debugRefreshReason': Predicate.hasProperty(debugRefreshReason, 'label')
+                ? (debugRefreshReason.label as string)
+                : debugRefreshReason?._tag,
+            },
+          },
           otelContext ?? queryContext.rootOtelContext,
           (span) => {
             const otelContext = otel.trace.setSpan(otel.context.active(), span)
@@ -263,34 +311,37 @@ export class LiveStoreDbQuery<
             }
 
             const queryInputResult = isThunk(queryInputRaw$OrQueryInputRaw)
-              ? (get(queryInputRaw$OrQueryInputRaw, otelContext) as TQueryInputRaw)
+              ? (get(queryInputRaw$OrQueryInputRaw, otelContext, debugRefreshReason) as TQueryInputRaw)
               : (queryInputRaw$OrQueryInputRaw as TQueryInputRaw)
 
             const sqlString = queryInputResult.query
             const bindValues = queryInputResult.bindValues
 
             if (queriedTablesRef.current === undefined) {
-              queriedTablesRef.current = store.syncDbWrapper.getTablesUsed(sqlString)
+              queriedTablesRef.current = store.sqliteDbWrapper.getTablesUsed(sqlString)
             }
 
             if (bindValues !== undefined) {
-              replaceSessionIdSymbol(bindValues, store.clientSession.coordinator.sessionId)
+              replaceSessionIdSymbol(bindValues, store.clientSession.sessionId)
             }
 
             // Establish a reactive dependency on the tables used in the query
             for (const tableName of queriedTablesRef.current) {
               const tableRef = store.tableRefs[tableName] ?? shouldNeverHappen(`No table ref found for ${tableName}`)
-              get(tableRef, otelContext)
+              get(tableRef, otelContext, debugRefreshReason)
             }
 
             span.setAttribute('sql.query', sqlString)
             span.updateName(`db:${sqlString.slice(0, 50)}`)
 
-            const rawDbResults = store.syncDbWrapper.select<any>(sqlString, {
-              queriedTables: queriedTablesRef.current,
-              bindValues: bindValues ? prepareBindValues(bindValues, sqlString) : undefined,
-              otelContext,
-            })
+            const rawDbResults = store.sqliteDbWrapper.select<any>(
+              sqlString,
+              bindValues ? prepareBindValues(bindValues, sqlString) : undefined,
+              {
+                queriedTables: queriedTablesRef.current,
+                otelContext,
+              },
+            )
 
             span.setAttribute('sql.rowsCount', rawDbResults.length)
 
@@ -341,10 +392,21 @@ Result:`,
   }
 
   destroy = () => {
+    this.isDestroyed = true
+
     if (this.queryInput$ !== undefined) {
       this.reactivityGraph.destroyNode(this.queryInput$)
     }
 
     this.reactivityGraph.destroyNode(this.results$)
+
+    for (const query of this.dependencyQueriesRef) {
+      query.deref()
+    }
   }
 }
+
+const queryInfoFromQueryBuilder = (qb: QueryBuilder.Any): QueryInfo.Row | QueryInfo.None => {
+  const ast = qb[QueryBuilderAstSymbol]
+  return ast._tag === 'RowQuery' ? { _tag: 'Row', table: ast.tableDef, id: ast.id } : { _tag: 'None' }
+}