@livestore/livestore 0.0.32 → 0.0.35

package/src/__tests__/react/useRow.test.tsx

@@ -11,13 +11,13 @@ describe('useRow', () => {
   it('should update the data based on component key', async () => {
     let renderCount = 0
 
-    const { wrapper, AppComponentSchema, store } = await makeTodoMvc()
+    const { wrapper, AppComponentSchema, store, dbGraph } = await makeTodoMvc({ useGlobalDbGraph: false })
 
     const { result, rerender } = renderHook(
       (userId: string) => {
         renderCount++
 
-        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId)
+        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { dbGraph })
         return { state, setState }
       },
       { wrapper, initialProps: 'u1' },
@@ -41,13 +41,13 @@ describe('useRow', () => {
   it('should update the data reactively - via setState', async () => {
     let renderCount = 0
 
-    const { wrapper, AppComponentSchema } = await makeTodoMvc()
+    const { wrapper, AppComponentSchema, dbGraph } = await makeTodoMvc({ useGlobalDbGraph: false })
 
     const { result } = renderHook(
       (userId: string) => {
         renderCount++
 
-        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId)
+        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { dbGraph })
         return { state, setState }
       },
       { wrapper, initialProps: 'u1' },
@@ -67,13 +67,13 @@ describe('useRow', () => {
   it('should update the data reactively - via raw store update', async () => {
     let renderCount = 0
 
-    const { wrapper, AppComponentSchema, store } = await makeTodoMvc()
+    const { wrapper, AppComponentSchema, store, dbGraph } = await makeTodoMvc({ useGlobalDbGraph: false })
 
     const { result } = renderHook(
       (userId: string) => {
         renderCount++
 
-        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId)
+        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { dbGraph })
         return { state, setState }
       },
       { wrapper, initialProps: 'u1' },
@@ -95,9 +95,9 @@ describe('useRow', () => {
   })
 
   it('should work for a larger app', async () => {
-    const allTodos$ = LiveStore.querySQL<Todo>(`select * from todos`, { label: 'allTodos' })
+    const { wrapper, store, dbGraph } = await makeTodoMvc({ useGlobalDbGraph: false })
 
-    const { wrapper, store } = await makeTodoMvc()
+    const allTodos$ = LiveStore.querySQL<Todo>(`select * from todos`, { label: 'allTodos', dbGraph })
 
     const AppRouterSchema = LiveStore.DbSchema.table(
       'AppRouter',
@@ -112,7 +112,7 @@ describe('useRow', () => {
     const AppRouter: React.FC = () => {
       appRouterRenderCount++
 
-      const [state, setState] = LiveStoreReact.useRow(AppRouterSchema)
+      const [state, setState] = LiveStoreReact.useRow(AppRouterSchema, { dbGraph })
 
       globalSetState = setState
 
@@ -141,7 +141,7 @@ describe('useRow', () => {
 
     const TaskDetails: React.FC<{ id: string }> = ({ id }) => {
       const todo = LiveStoreReact.useTemporaryQuery(() =>
-        LiveStore.querySQL<Todo>(`select * from todos where id = '${id}' limit 1`).getFirstRow(),
+        LiveStore.querySQL<Todo>(`select * from todos where id = '${id}' limit 1`, { dbGraph }).getFirstRow(),
       )
       return <div role="content">{JSON.stringify(todo)}</div>
     }

package/src/__tests__/reactive.test.ts

@@ -221,7 +221,7 @@ describe('a trivial graph', () => {
         expect(numberOfEffect2Runs).toBe(1)
         expect(numberOfRunsForC.runs).toBe(1)
 
-        graph.destroy(effect1)
+        graph.destroyNode(effect1)
 
         graph.runDeferredEffects()
 
@@ -231,6 +231,24 @@ describe('a trivial graph', () => {
       })
     })
   })
+
+  describe('destroying nodes', () => {
+    it('marks super node as dirty when a sub node is destroyed', () => {
+      const { graph, b, c, d, e } = makeGraph()
+
+      e.computeResult()
+
+      graph.destroyNode(b)
+
+      expect(c.isDirty).toBe(true)
+      expect(d.isDirty).toBe(false)
+      expect(e.isDirty).toBe(true)
+
+      expect(() => c.computeResult()).toThrowErrorMatchingInlineSnapshot(
+        `[Error: This should never happen LiveStore Error: Attempted to compute destroyed atom]`,
+      )
+    })
+  })
 })
 
 describe('a dynamic graph', () => {
@@ -402,7 +420,7 @@ describe('error handling', () => {
     const a = graph.makeRef(1)
     const b = graph.makeThunk((get) => get(a) + 1)
     expect(() => b.computeResult()).toThrowErrorMatchingInlineSnapshot(
-      `[Error: LiveStore Error: \`context\` not set on ReactiveGraph]`,
+      `[Error: LiveStore Error: \`context\` not set on ReactiveGraph (graph-19)]`,
     )
   })
 })

package/src/global-state.ts

@@ -11,16 +11,9 @@
  *
  */
 
-import ReactDOM from 'react-dom'
-
-import { ReactiveGraph } from './reactive.js'
-import type { DbContext } from './reactiveQueries/base-class.js'
+import { makeDbGraph } from './reactiveQueries/base-class.js'
 import type { TableDef } from './schema/table-def.js'
-import type { QueryDebugInfo, RefreshReason } from './store.js'
 
-export const dbGraph = new ReactiveGraph<RefreshReason, QueryDebugInfo, DbContext>({
-  // TODO also find a better way to only use this effects wrapper when used in a React app
-  effectsWrapper: (run) => ReactDOM.unstable_batchedUpdates(() => run()),
-})
+export const globalDbGraph = makeDbGraph()
 
 export const dynamicallyRegisteredTables: Map<string, TableDef> = new Map()

package/src/index.ts

@@ -7,13 +7,13 @@ export { InMemoryDatabase, type DebugInfo, emptyDebugInfo } from './inMemoryData
 
 export type { Storage, StorageType, StorageInit } from './storage/index.js'
 
-export type { GetAtom, AtomDebugInfo, RefreshDebugInfo, SerializedAtom, Atom } from './reactive.js'
+export type { GetAtom, AtomDebugInfo, RefreshDebugInfo, SerializedAtom, Atom, Node, Ref, Effect } from './reactive.js'
 export { LiveStoreJSQuery, queryJS } from './reactiveQueries/js.js'
 export { LiveStoreSQLQuery, querySQL } from './reactiveQueries/sql.js'
 export { LiveStoreGraphQLQuery, queryGraphQL } from './reactiveQueries/graphql.js'
-export { type GetAtomResult } from './reactiveQueries/base-class.js'
+export { type GetAtomResult, type DbGraph, makeDbGraph } from './reactiveQueries/base-class.js'
 
-export { dbGraph } from './global-state.js'
+export { globalDbGraph } from './global-state.js'
 
 export { type RowResult, type RowResultEncoded, type RowQueryArgs, rowQuery } from './row-query.js'
 

package/src/react/LiveStoreProvider.tsx

@@ -1,3 +1,4 @@
+import { shouldNeverHappen } from '@livestore/utils'
 import type * as otel from '@opentelemetry/api'
 import type { ReactElement, ReactNode } from 'react'
 import React from 'react'
@@ -8,7 +9,7 @@ import type { LiveStoreContext as StoreContext_, LiveStoreCreateStoreOptions } f
 import type { InMemoryDatabase } from '../inMemoryDatabase.js'
 import type { LiveStoreSchema } from '../schema/index.js'
 import type { StorageInit } from '../storage/index.js'
-import type { BaseGraphQLContext, GraphQLOptions } from '../store.js'
+import type { BaseGraphQLContext, GraphQLOptions, Store } from '../store.js'
 import { createStore } from '../store.js'
 import { LiveStoreContext } from './LiveStoreContext.js'
 
@@ -68,10 +69,15 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
   const [ctxValue, setCtxValue] = React.useState<StoreContext_ | undefined>()
 
   React.useEffect(() => {
+    let store: Store | undefined
+
+    // resetting the store context while we're creating a new store
+    setCtxValue(undefined)
+
     void (async () => {
       try {
         const sqlite3 = await sqlite3Promise
-        const store = await createStore({
+        store = await createStore({
           schema,
           loadStorage,
           graphQLOptions,
@@ -82,11 +88,14 @@ const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
         })
         setCtxValue({ store })
       } catch (e) {
-        console.error(`Error creating LiveStore store:`, e)
-        throw e
+        shouldNeverHappen(`Error creating LiveStore store: ${e}`)
       }
     })()
 
+    return () => {
+      store?.destroy()
+    }
+
     // TODO: do we need to return any cleanup function here?
   }, [schema, loadStorage, graphQLOptions, otelTracer, otelRootSpanContext, boot])
 

package/src/react/useQuery.ts

@@ -22,6 +22,8 @@ export const useQueryRef = <TResult>(
 ): React.MutableRefObject<TResult> => {
   const { store } = useStore()
 
+  React.useDebugValue(`LiveStore:useQuery:${query.id}:${query.label}`)
+
   const stackInfo = React.useMemo(() => {
     Error.stackTraceLimit = 10
     // eslint-disable-next-line unicorn/error-message

package/src/react/useRow.ts

@@ -4,6 +4,7 @@ import type { SqliteDsl } from 'effect-db-schema'
 import { mapValues } from 'lodash-es'
 import React from 'react'
 
+import type { DbGraph } from '../index.js'
 import type { LiveStoreJSQuery } from '../reactiveQueries/js.js'
 import type { RowQueryArgs, RowResult } from '../row-query.js'
 import { rowQuery } from '../row-query.js'
@@ -17,10 +18,14 @@ export type UseRowResult<TTableDef extends TableDef> = [
   query$: LiveStoreJSQuery<RowResult<TTableDef>>,
 ]
 
-export type UseRowOptions<TTableDef extends TableDef> = {
+export type UseRowOptionsDefaulValues<TTableDef extends TableDef> = {
   defaultValues?: Partial<RowResult<TTableDef>>
 }
 
+export type UseRowOptionsBase = {
+  dbGraph?: DbGraph
+}
+
 /**
  * Similar to `React.useState` but returns a tuple of `[row, setRow, query$]` for a given table where ...
  *
@@ -33,20 +38,24 @@ export type UseRowOptions<TTableDef extends TableDef> = {
 export const useRow: {
   <TTableDef extends TableDef<DefaultSqliteTableDef, boolean, TableOptions & { isSingleton: true }>>(
     table: TTableDef,
+    options?: UseRowOptionsBase,
   ): UseRowResult<TTableDef>
   <TTableDef extends TableDef<DefaultSqliteTableDef, boolean, TableOptions & { isSingleton: false }>>(
     table: TTableDef,
     // TODO adjust so it works with arbitrary primary keys or unique constraints
     id: string,
-    options?: UseRowOptions<TTableDef>,
+    options?: UseRowOptionsBase & UseRowOptionsDefaulValues<TTableDef>,
   ): UseRowResult<TTableDef>
 } = <TTableDef extends TableDef>(
   table: TTableDef,
-  id?: string,
-  options?: UseRowOptions<TTableDef>,
+  idOrOptions?: string | UseRowOptionsBase,
+  options_?: UseRowOptionsBase & UseRowOptionsDefaulValues<TTableDef>,
 ): UseRowResult<TTableDef> => {
   const sqliteTableDef = table.schema
-  const { defaultValues } = options ?? {}
+  const id = typeof idOrOptions === 'string' ? idOrOptions : undefined
+  const options: (UseRowOptionsBase & UseRowOptionsDefaulValues<TTableDef>) | undefined =
+    typeof idOrOptions === 'string' ? options_ : idOrOptions
+  const { defaultValues, dbGraph } = options ?? {}
   type TComponentState = SqliteDsl.FromColumns.RowDecoded<TTableDef['schema']['columns']>
 
   const { store } = useStore()
@@ -74,13 +83,13 @@ export const useRow: {
     const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
     const query$ = table.options.isSingleton
-      ? rowQuery({ table, store, otelContext, defaultValues } as RowQueryArgs<TTableDef>)
-      : rowQuery({ table, store, id, otelContext, defaultValues } as RowQueryArgs<TTableDef>)
+      ? rowQuery({ table, store, otelContext, defaultValues, dbGraph } as RowQueryArgs<TTableDef>)
+      : rowQuery({ table, store, id, otelContext, defaultValues, dbGraph } as RowQueryArgs<TTableDef>)
 
     rcCache.set(table, id ?? 'singleton', query$, reactId, otelContext, span)
 
     return { query$, otelContext }
-  }, [table, id, reactId, store, defaultValues])
+  }, [table, id, reactId, store, defaultValues, dbGraph])
 
   React.useEffect(
     () => () => {

package/src/reactive.ts

@@ -24,9 +24,9 @@
 /* eslint-disable prefer-arrow/prefer-arrow-functions */
 
 import type { PrettifyFlat } from '@livestore/utils'
-import { pick } from '@livestore/utils'
+import { pick, shouldNeverHappen } from '@livestore/utils'
 import type * as otel from '@opentelemetry/api'
-import { isEqual, uniqueId } from 'lodash-es'
+import { isEqual } from 'lodash-es'
 
 import { BoundArray } from './utils/bounded-collections.js'
 // import { getDurationMsFromSpan } from './otel.js'
@@ -40,24 +40,27 @@ export type Ref<T, TContext, TDebugRefreshReason extends DebugRefreshReason> = {
   _tag: 'ref'
   id: string
   isDirty: false
+  isDestroyed: boolean
   previousResult: T
   computeResult: () => T
   sub: Set<Atom<any, TContext, TDebugRefreshReason>> // always empty
-  super: Set<Atom<any, TContext, TDebugRefreshReason> | Effect>
+  super: Set<Thunk<any, TContext, TDebugRefreshReason> | Effect>
   label?: string
   /** Container for meta information (e.g. the LiveStore Store) */
   meta?: any
   equal: (a: T, b: T) => boolean
+  refreshes: number
 }
 
 export type Thunk<TResult, TContext, TDebugRefreshReason extends DebugRefreshReason> = {
   _tag: 'thunk'
   id: string
   isDirty: boolean
+  isDestroyed: boolean
   computeResult: (otelContext?: otel.Context, debugRefreshReason?: TDebugRefreshReason) => TResult
   previousResult: TResult | NOT_REFRESHED_YET
   sub: Set<Atom<any, TContext, TDebugRefreshReason>>
-  super: Set<Atom<any, TContext, TDebugRefreshReason> | Effect>
+  super: Set<Thunk<any, TContext, TDebugRefreshReason> | Effect>
   label?: string
   /** Container for meta information (e.g. the LiveStore Store) */
   meta?: any
@@ -74,11 +77,17 @@ export type Atom<T, TContext, TDebugRefreshReason extends DebugRefreshReason> =
 export type Effect = {
   _tag: 'effect'
   id: string
+  isDestroyed: boolean
   doEffect: (otelContext?: otel.Context) => void
   sub: Set<Atom<any, TODO, TODO>>
   label?: string
+  invocations: number
 }
 
+export type Node<T, TContext, TDebugRefreshReason extends DebugRefreshReason> =
+  | Atom<T, TContext, TDebugRefreshReason>
+  | Effect
+
 export type DebugThunkInfo<T extends string = string> = {
   _tag: T
   durationMs: number
@@ -133,14 +142,25 @@ export type SerializedAtom = Readonly<
   >
 >
 
+export type SerializedEffect = Readonly<
+  PrettifyFlat<
+    Pick<Effect, '_tag' | 'id' | 'label'> & {
+      sub: ReadonlyArray<string>
+    }
+  >
+>
+
 type ReactiveGraphSnapshot = {
   readonly atoms: ReadonlyArray<SerializedAtom>
+  readonly effects: ReadonlyArray<SerializedEffect>
   /** IDs of deferred effects */
   readonly deferredEffects: ReadonlyArray<string>
 }
 
-const uniqueNodeId = () => uniqueId('node-')
-const uniqueRefreshInfoId = () => uniqueId('refresh-info-')
+let nodeIdCounter = 0
+const uniqueNodeId = () => `node-${++nodeIdCounter}`
+let refreshInfoIdCounter = 0
+const uniqueRefreshInfoId = () => `refresh-info-${++refreshInfoIdCounter}`
 
 const serializeAtom = (atom: Atom<any, unknown, any>): SerializedAtom => ({
   ...pick(atom, ['_tag', 'id', 'label', 'meta', 'isDirty']),
@@ -148,12 +168,23 @@ const serializeAtom = (atom: Atom<any, unknown, any>): SerializedAtom => ({
   super: Array.from(atom.super).map((a) => a.id),
 })
 
+const serializeEffect = (effect: Effect): SerializedEffect => ({
+  ...pick(effect, ['_tag', 'id', 'label']),
+  sub: Array.from(effect.sub).map((a) => a.id),
+})
+
+let globalGraphIdCounter = 0
+const uniqueGraphId = () => `graph-${++globalGraphIdCounter}`
+
 export class ReactiveGraph<
   TDebugRefreshReason extends DebugRefreshReason,
   TDebugThunkInfo extends DebugThunkInfo,
   TContext = {},
 > {
+  id = uniqueGraphId()
+
   readonly atoms: Set<Atom<any, TContext, TDebugRefreshReason>> = new Set()
+  readonly effects: Set<Effect> = new Set()
   effectsWrapper: (runEffects: () => void) => void
 
   context: TContext | undefined
@@ -166,6 +197,8 @@ export class ReactiveGraph<
 
   private deferredEffects: Map<Effect, Set<TDebugRefreshReason>> = new Map()
 
+  private refreshCallbacks: Set<() => void> = new Set()
+
   constructor(options: ReactiveGraphOptions) {
     this.effectsWrapper = options?.effectsWrapper ?? ((runEffects: () => void) => runEffects())
   }
@@ -178,6 +211,7 @@ export class ReactiveGraph<
       _tag: 'ref',
       id: uniqueNodeId(),
       isDirty: false,
+      isDestroyed: false,
       previousResult: val,
       computeResult: () => ref.previousResult,
       sub: new Set(),
@@ -185,6 +219,7 @@ export class ReactiveGraph<
       label: options?.label,
       meta: options?.meta,
       equal: options?.equal ?? isEqual,
+      refreshes: 0,
     }
 
     this.atoms.add(ref)
@@ -212,6 +247,7 @@ export class ReactiveGraph<
       id: uniqueNodeId(),
       previousResult: NOT_REFRESHED_YET,
       isDirty: true,
+      isDestroyed: false,
       computeResult: (otelContext, debugRefreshReason) => {
         if (thunk.isDirty) {
           const neededCurrentRefresh = this.currentDebugRefresh === undefined
@@ -235,7 +271,7 @@ export class ReactiveGraph<
           const result = getResult(
             getAtom as GetAtom,
             setDebugInfo,
-            this.context ?? throwContextNotSetError(),
+            this.context ?? throwContextNotSetError(this),
             otelContext,
           )
 
@@ -288,24 +324,38 @@ export class ReactiveGraph<
     return thunk
   }
 
-  destroy(node: Atom<any, TContext, TDebugRefreshReason> | Effect) {
+  destroyNode(node: Node<any, TContext, TDebugRefreshReason>) {
+    // console.debug(`destroying node (${node._tag})`, node.id, node.label)
+
     // Recursively destroy any supercomputations
     if (node._tag === 'ref' || node._tag === 'thunk') {
       for (const superComp of node.super) {
-        this.destroy(superComp)
+        this.destroyNode(superComp)
       }
     }
 
     // Destroy this node
-    for (const subComp of node.sub) {
-      this.removeEdge(node, subComp)
+    if (node._tag !== 'ref') {
+      for (const subComp of node.sub) {
+        this.removeEdge(node, subComp)
+      }
     }
 
     if (node._tag === 'effect') {
       this.deferredEffects.delete(node)
+      this.effects.delete(node)
     } else {
       this.atoms.delete(node)
     }
+
+    node.isDestroyed = true
+  }
+
+  destroy() {
+    // NOTE we don't need to sort the atoms first, as `destroyNode` will recursively destroy all supercomputations
+    for (const node of this.atoms) {
+      this.destroyNode(node)
+    }
   }
 
   makeEffect(
@@ -315,7 +365,10 @@ export class ReactiveGraph<
     const effect: Effect = {
       _tag: 'effect',
       id: uniqueNodeId(),
+      isDestroyed: false,
       doEffect: (otelContext) => {
+        effect.invocations++
+
         // NOTE we're not tracking any debug refresh info for effects as they're tracked by the thunks they depend on
 
         // Reset previous subcomputations as we're about to re-add them as part of the `doEffect` call below
@@ -330,8 +383,11 @@ export class ReactiveGraph<
       },
       sub: new Set(),
       label: options?.label,
+      invocations: 0,
     }
 
+    this.effects.add(effect)
+
     return effect
   }
 
@@ -362,6 +418,7 @@ export class ReactiveGraph<
     const effectsToRefresh = new Set<Effect>()
     for (const [ref, val] of refs) {
       ref.previousResult = val
+      ref.refreshes++
 
       markSuperCompDirtyRec(ref, effectsToRefresh)
     }
@@ -412,6 +469,10 @@ export class ReactiveGraph<
         graphSnapshot: this.getSnapshot(),
       }
       this.debugRefreshInfos.push(refreshDebugInfo)
+
+      for (const cb of this.refreshCallbacks) {
+        cb()
+      }
     })
   }
 
@@ -432,7 +493,7 @@ export class ReactiveGraph<
   }
 
   addEdge(
-    superComp: Atom<any, TContext, TDebugRefreshReason> | Effect,
+    superComp: Thunk<any, TContext, TDebugRefreshReason> | Effect,
     subComp: Atom<any, TContext, TDebugRefreshReason>,
   ) {
     superComp.sub.add(subComp)
@@ -440,21 +501,40 @@ export class ReactiveGraph<
   }
 
   removeEdge(
-    superComp: Atom<any, TContext, TDebugRefreshReason> | Effect,
+    superComp: Thunk<any, TContext, TDebugRefreshReason> | Effect,
     subComp: Atom<any, TContext, TDebugRefreshReason>,
   ) {
     superComp.sub.delete(subComp)
+    const effectsToRefresh = new Set<Effect>()
+    markSuperCompDirtyRec(subComp, effectsToRefresh)
+
+    for (const effect of effectsToRefresh) {
+      this.deferredEffects.set(effect, new Set())
+    }
+
     subComp.super.delete(superComp)
   }
 
   getSnapshot = (): ReactiveGraphSnapshot => ({
     atoms: Array.from(this.atoms).map(serializeAtom),
+    effects: Array.from(this.effects).map(serializeEffect),
     deferredEffects: Array.from(this.deferredEffects.keys()).map((_) => _.id),
   })
+
+  subscribeToRefresh = (cb: () => void) => {
+    this.refreshCallbacks.add(cb)
+    return () => {
+      this.refreshCallbacks.delete(cb)
+    }
+  }
 }
 
 const compute = <T>(atom: Atom<T, unknown, any>, otelContext: otel.Context): T => {
   // const __getResult = atom._tag === 'thunk' ? atom.__getResult.toString() : ''
+  if (atom.isDestroyed) {
+    shouldNeverHappen(`LiveStore Error: Attempted to compute destroyed atom`)
+  }
+
   if (atom.isDirty) {
     // console.log('atom is dirty', atom.id, atom.label ?? '', atom._tag, __getResult)
     const result = atom.computeResult(otelContext)
@@ -469,7 +549,7 @@ const compute = <T>(atom: Atom<T, unknown, any>, otelContext: otel.Context): T =
 
 const markSuperCompDirtyRec = <T>(atom: Atom<T, unknown, any>, effectsToRefresh: Set<Effect>) => {
   for (const superComp of atom.super) {
-    if (superComp._tag === 'thunk' || superComp._tag === 'ref') {
+    if (superComp._tag === 'thunk') {
       superComp.isDirty = true
       markSuperCompDirtyRec(superComp, effectsToRefresh)
     } else {
@@ -478,6 +558,6 @@ const markSuperCompDirtyRec = <T>(atom: Atom<T, unknown, any>, effectsToRefresh:
   }
 }
 
-export const throwContextNotSetError = (): never => {
-  throw new Error(`LiveStore Error: \`context\` not set on ReactiveGraph`)
+export const throwContextNotSetError = (graph: ReactiveGraph<any, any, any>): never => {
+  throw new Error(`LiveStore Error: \`context\` not set on ReactiveGraph (${graph.id})`)
 }

package/src/reactiveQueries/base-class.ts

@@ -1,11 +1,19 @@
 import type * as otel from '@opentelemetry/api'
+import ReactDOM from 'react-dom'
 
-import { dbGraph } from '../global-state.js'
 import type { StackInfo } from '../react/utils/stack-info.js'
-import { type Atom, type GetAtom, throwContextNotSetError, type Thunk } from '../reactive.js'
-import type { RefreshReason, Store } from '../store.js'
+import { type Atom, type GetAtom, ReactiveGraph, throwContextNotSetError, type Thunk } from '../reactive.js'
+import type { QueryDebugInfo, RefreshReason, Store } from '../store.js'
 import type { LiveStoreJSQuery } from './js.js'
 
+export type DbGraph = ReactiveGraph<RefreshReason, QueryDebugInfo, DbContext>
+
+export const makeDbGraph = (): DbGraph =>
+  new ReactiveGraph<RefreshReason, QueryDebugInfo, DbContext>({
+    // TODO also find a better way to only use this effects wrapper when used in a React app
+    effectsWrapper: (run) => ReactDOM.unstable_batchedUpdates(() => run()),
+  })
+
 export type DbContext = {
   store: Store
   otelTracer: otel.Tracer
@@ -41,6 +49,8 @@ export abstract class LiveStoreQueryBase<TResult> implements ILiveStoreQuery<TRe
 
   activeSubscriptions: Set<StackInfo> = new Set()
 
+  protected abstract dbGraph: DbGraph
+
   get runs() {
     return this.results$.recomputations
   }
@@ -61,7 +71,8 @@ export abstract class LiveStoreQueryBase<TResult> implements ILiveStoreQuery<TRe
     onUnsubsubscribe?: () => void,
     options?: { label?: string; otelContext?: otel.Context } | undefined,
   ): (() => void) =>
-    dbGraph.context?.store.subscribe(this, onNewValue, onUnsubsubscribe, options) ?? throwContextNotSetError()
+    this.dbGraph.context?.store.subscribe(this, onNewValue, onUnsubsubscribe, options) ??
+    throwContextNotSetError(this.dbGraph)
 }
 
 export type GetAtomResult = <T>(atom: Atom<T, any, RefreshReason> | LiveStoreJSQuery<T>) => T