@livestore/livestore 0.0.46-dev.4 → 0.0.47-dev.0

package/src/react/useRow.ts

@@ -1,5 +1,4 @@
 import { DbSchema } from '@livestore/common/schema'
-import * as otel from '@opentelemetry/api'
 import type { SqliteDsl } from 'effect-db-schema'
 import { mapValues } from 'lodash-es'
 import React from 'react'
@@ -11,7 +10,7 @@ import type { RowResult } from '../row-query.js'
 import { rowQuery } from '../row-query.js'
 import { useStore } from './LiveStoreContext.js'
 import { useQueryRef } from './useQuery.js'
-import { useCleanup } from './utils/useCleanup.js'
+import { useMakeTemporaryQuery } from './useTemporaryQuery.js'
 
 export type UseRowResult<TTableDef extends DbSchema.TableDef> = [
   row: RowResult<TTableDef>,
@@ -73,52 +72,24 @@ export const useRow: {
 
   const { store } = useStore()
 
-  const reactId = React.useId()
-
-  const { query$, otelContext } = React.useMemo(() => {
-    const cachedItem = rcCache.get(table, id ?? 'singleton')
-    if (cachedItem !== undefined) {
-      cachedItem.reactIds.add(reactId)
-      cachedItem.span.addEvent('new-subscriber', { reactId })
-
-      return {
-        query$: cachedItem.query$ as LiveQuery<RowResult<TTableDef>, QueryInfo>,
-        otelContext: cachedItem.otelContext,
-      }
-    }
-
-    const span = store.otel.tracer.startSpan(
-      `LiveStore:useState:${table.sqliteDef.name}${id === undefined ? '' : `:${id}`}`,
-      { attributes: { id } },
-      store.otel.queriesSpanContext,
-    )
-
-    const otelContext = otel.trace.setSpan(otel.context.active(), span)
-
-    const query$ = DbSchema.tableIsSingleton(table)
-      ? (rowQuery(table, { otelContext, dbGraph }) as LiveQuery<RowResult<TTableDef>, QueryInfo>)
-      : (rowQuery(table as TTableDef & { options: { isSingleton: false } }, id!, {
-          otelContext,
-          defaultValues: defaultValues!,
-          dbGraph,
-        }) as any as LiveQuery<RowResult<TTableDef>, QueryInfo>)
-
-    rcCache.set(table, id ?? 'singleton', query$, reactId, otelContext, span)
-
-    return { query$, otelContext }
-  }, [table, id, reactId, store, defaultValues, dbGraph])
-
-  useCleanup(
-    React.useCallback(() => {
-      const cachedItem = rcCache.get(table, id ?? 'singleton')!
-
-      cachedItem.reactIds.delete(reactId)
-      if (cachedItem.reactIds.size === 0) {
-        rcCache.delete(cachedItem.query$)
-        cachedItem.query$.destroy()
-        cachedItem.span.end()
-      }
-    }, [table, id, reactId]),
+  // console.debug('useRow', table.sqliteDef.name, id)
+
+  const { query$, otelContext } = useMakeTemporaryQuery(
+    (otelContext) =>
+      DbSchema.tableIsSingleton(table)
+        ? (rowQuery(table, { otelContext, dbGraph }) as LiveQuery<RowResult<TTableDef>, QueryInfo>)
+        : (rowQuery(table as TTableDef & { options: { isSingleton: false } }, id!, {
+            otelContext,
+            defaultValues: defaultValues!,
+            dbGraph,
+          }) as any as LiveQuery<RowResult<TTableDef>, QueryInfo>),
+    [id!, table.sqliteDef.name],
+    {
+      otel: {
+        spanName: `LiveStore:useRow:${table.sqliteDef.name}${id === undefined ? '' : `:${id}`}`,
+        attributes: { id },
+      },
+    },
   )
 
   const query$Ref = useQueryRef(query$, otelContext) as React.MutableRefObject<RowResult<TTableDef>>
@@ -179,62 +150,3 @@ export type StateSetters<TTableDef extends DbSchema.TableDef> = TTableDef['isSin
     } & {
       setMany: Dispatch<SetStateAction<Partial<RowResult<TTableDef>>>>
     }
-
-/** Reference counted cache for `query$` and otel context */
-class RCCache {
-  private readonly cache = new Map<
-    DbSchema.TableDef,
-    Map<
-      string,
-      {
-        reactIds: Set<string>
-        span: otel.Span
-        otelContext: otel.Context
-        query$: LiveQuery<any, any>
-      }
-    >
-  >()
-  private reverseCache = new Map<LiveQuery<any, any>, [DbSchema.TableDef, string]>()
-
-  get = (table: DbSchema.TableDef, id: string) => {
-    const queries = this.cache.get(table)
-    if (queries === undefined) return undefined
-    return queries.get(id)
-  }
-
-  set = (
-    table: DbSchema.TableDef,
-    id: string,
-    query$: LiveQuery<any, any>,
-    reactId: string,
-    otelContext: otel.Context,
-    span: otel.Span,
-  ) => {
-    let queries = this.cache.get(table)
-    if (queries === undefined) {
-      queries = new Map()
-      this.cache.set(table, queries)
-    }
-    queries.set(id, { query$, otelContext, span, reactIds: new Set([reactId]) })
-    this.reverseCache.set(query$, [table, id])
-  }
-
-  delete = (query$: LiveQuery<any, any>) => {
-    const item = this.reverseCache.get(query$)
-    if (item === undefined) return
-
-    const [table, id] = item
-    const queries = this.cache.get(table)
-    if (queries === undefined) return
-
-    queries.delete(id)
-
-    if (queries.size === 0) {
-      this.cache.delete(table)
-    }
-
-    this.reverseCache.delete(query$)
-  }
-}
-
-const rcCache = new RCCache()

package/src/react/useTemporaryQuery.test.tsx

@@ -1,5 +1,4 @@
 import { renderHook } from '@testing-library/react'
-import React from 'react'
 import { describe, expect, it } from 'vitest'
 
 import { makeTodoMvc, parseTodos } from '../__tests__/react/fixture.js'
@@ -9,43 +8,45 @@ import * as LiveStoreReact from './index.js'
 
 describe('useTemporaryQuery', () => {
   it('simple', async () => {
-    let renderCount = 0
+    const { wrapper, store, cud, makeRenderCount } = await makeTodoMvc()
 
-    const { wrapper, store, cud } = await makeTodoMvc()
+    const renderCount = makeRenderCount()
 
     store.mutate(
       cud.todos.insert({ id: 't1', text: 'buy milk', completed: false }),
       cud.todos.insert({ id: 't2', text: 'buy bread', completed: false }),
     )
 
-    const queryMap = new Map<string, LiveStore.LiveQuery<any, any>>()
+    const queryMap = new Map<string, LiveStore.LiveQuery<any>>()
 
-    const { rerender, result } = renderHook(
+    const { rerender, result, unmount } = renderHook(
       (id: string) => {
-        renderCount++
-
-        return LiveStoreReact.useTemporaryQuery(
-          React.useCallback(() => {
-            const query$ = querySQL(`select * from todos where id = '${id}'`, { map: parseTodos })
-            queryMap.set(id, query$)
-            return query$
-          }, [id]),
-        )
+        renderCount.inc()
+
+        return LiveStoreReact.useTemporaryQuery(() => {
+          const query$ = querySQL(`select * from todos where id = '${id}'`, { map: parseTodos })
+          queryMap.set(id, query$)
+          return query$
+        }, id)
       },
       { wrapper, initialProps: 't1' },
     )
 
     expect(result.current.length).toBe(1)
     expect(result.current[0]!.text).toBe('buy milk')
-    expect(renderCount).toBe(1)
+    expect(renderCount.val).toBe(1)
     expect(queryMap.get('t1')!.runs).toBe(1)
 
     rerender('t2')
 
     expect(result.current.length).toBe(1)
     expect(result.current[0]!.text).toBe('buy bread')
-    expect(renderCount).toBe(2)
+    expect(renderCount.val).toBe(2)
     expect(queryMap.get('t1')!.runs).toBe(1)
     expect(queryMap.get('t2')!.runs).toBe(1)
+
+    unmount()
+
+    expect(queryMap.get('t2')!.runs).toBe(1)
   })
 })

package/src/react/useTemporaryQuery.ts

@@ -1,53 +1,121 @@
+import * as otel from '@opentelemetry/api'
 import React from 'react'
 
+import type { QueryInfo } from '../query-info.js'
 import type { LiveQuery } from '../reactiveQueries/base-class.js'
+import { useStore } from './LiveStoreContext.js'
 import { useQueryRef } from './useQuery.js'
-import { useCleanup } from './utils/useCleanup.js'
 
-/**
- * This is needed because the `React.useMemo` call below, can sometimes be called multiple times 🤷.
- * The map entry is being removed again in the `React.useEffect` call below.
- */
-const queryCache = new Map<() => LiveQuery<any>, { reactIds: Set<string>; query$: LiveQuery<any> }>()
+// NOTE Given `useMemo` will be called multiple times (e.g. when using React Strict mode or Fast Refresh),
+// we are using this cache to avoid starting multiple queries/spans for the same component.
+// This is somewhat against some recommended React best practices, but it should be fine in our case below.
+// Please definitely open an issue if you see or run into any problems with this approach!
+const cache = new Map<
+  string,
+  {
+    rc: number
+    query$: LiveQuery<any, any>
+    span: otel.Span
+    otelContext: otel.Context
+  }
+>()
+
+export type DepKey = string | number | ReadonlyArray<string | number>
 
 /**
  * Creates a query, subscribes and destroys it when the component unmounts.
  *
- * Make sure `makeQuery` is a memoized function.
+ * The `key` is used to determine whether the a new query should be created or if the existing one should be reused.
  */
-export const useTemporaryQuery = <TResult>(makeQuery: () => LiveQuery<TResult>): TResult =>
-  useTemporaryQueryRef(makeQuery).current
+export const useTemporaryQuery = <TResult>(makeQuery: () => LiveQuery<TResult>, key: DepKey): TResult =>
+  useTemporaryQueryRef(makeQuery, key).current
+
+export const useTemporaryQueryRef = <TResult>(
+  makeQuery: () => LiveQuery<TResult>,
+  key: DepKey,
+): React.MutableRefObject<TResult> => {
+  const { query$ } = useMakeTemporaryQuery(makeQuery, key)
+
+  return useQueryRef(query$)
+}
+
+export const useMakeTemporaryQuery = <TResult, TQueryInfo extends QueryInfo>(
+  makeQuery: (otelContext: otel.Context) => LiveQuery<TResult, TQueryInfo>,
+  key: DepKey,
+  options?: {
+    otel?: {
+      spanName?: string
+      attributes?: otel.Attributes
+    }
+  },
+): { query$: LiveQuery<TResult, TQueryInfo>; otelContext: otel.Context } => {
+  const { store } = useStore()
+  const fullKey = React.useMemo(
+    // 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
+    () => (Array.isArray(key) ? key.join('-') : key) + '-' + store.graph.id + '-' + makeQuery.toString(),
+    [key, makeQuery, store.graph.id],
+  )
+  const fullKeyRef = React.useRef<string>()
+
+  const { query$, otelContext } = React.useMemo(() => {
+    if (fullKeyRef.current !== undefined && fullKeyRef.current !== fullKey) {
+      // console.debug('fullKey changed, destroying previous', fullKeyRef.current.split('-')[0]!, fullKey.split('-')[0]!)
 
-export const useTemporaryQueryRef = <TResult>(makeQuery: () => LiveQuery<TResult>): React.MutableRefObject<TResult> => {
-  const reactId = React.useId()
+      const cachedItem = cache.get(fullKeyRef.current)
+      if (cachedItem !== undefined) {
+        cachedItem.rc--
 
-  const query$ = React.useMemo(() => {
-    const cachedItem = queryCache.get(makeQuery)
+        if (cachedItem.rc === 0) {
+          cachedItem.query$.destroy()
+          cachedItem.span.end()
+          cache.delete(fullKeyRef.current)
+        }
+      }
+    }
+
+    const cachedItem = cache.get(fullKey)
     if (cachedItem !== undefined) {
-      cachedItem.reactIds.add(reactId)
+      cachedItem.rc++
 
-      return cachedItem.query$
+      return cachedItem
     }
 
-    const query$ = makeQuery()
+    const spanName = options?.otel?.spanName ?? `LiveStore:useTemporaryQuery:${key}`
+
+    const span = store.otel.tracer.startSpan(
+      spanName,
+      { attributes: options?.otel?.attributes },
+      store.otel.queriesSpanContext,
+    )
+
+    const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
-    queryCache.set(makeQuery, { reactIds: new Set([reactId]), query$ })
+    const query$ = makeQuery(otelContext)
 
-    return query$
-  }, [reactId, makeQuery])
+    cache.set(fullKey, { rc: 1, query$, span, otelContext })
 
-  useCleanup(
-    React.useCallback(() => {
-      const cachedItem = queryCache.get(makeQuery)!
+    return { query$, otelContext }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fullKey])
 
-      cachedItem.reactIds.delete(reactId)
+  fullKeyRef.current = fullKey
 
-      if (cachedItem.reactIds.size === 0) {
+  React.useEffect(() => {
+    return () => {
+      const cachedItem = cache.get(fullKey)
+      // NOTE in case the fullKey changed then the query was already destroyed in the useMemo above
+      if (cachedItem === undefined) return
+
+      cachedItem.rc--
+
+      if (cachedItem.rc === 0) {
         cachedItem.query$.destroy()
-        queryCache.delete(makeQuery)
+        cachedItem.span.end()
+        cache.delete(fullKey)
       }
-    }, [makeQuery, reactId]),
-  )
+    }
+  }, [fullKey])
 
-  return useQueryRef(query$)
+  return { query$, otelContext }
 }

package/src/reactive.test.ts

@@ -245,7 +245,7 @@ describe('a trivial graph', () => {
       expect(e.isDirty).toBe(true)
 
       expect(() => c.computeResult()).toThrowErrorMatchingInlineSnapshot(
-        `[Error: This should never happen LiveStore Error: Attempted to compute destroyed atom]`,
+        `[Error: This should never happen LiveStore Error: Attempted to compute destroyed ref (node-58): b]`,
       )
     })
   })

package/src/reactive.ts

@@ -88,6 +88,12 @@ export type Node<T, TContext, TDebugRefreshReason extends DebugRefreshReason> =
   | Atom<T, TContext, TDebugRefreshReason>
   | Effect
 
+export const isThunk = <T, TContext, TDebugRefreshReason extends DebugRefreshReason>(
+  obj: unknown,
+): obj is Thunk<T, TContext, TDebugRefreshReason> => {
+  return typeof obj === 'object' && obj !== null && '_tag' in obj && (obj as any)._tag === 'thunk'
+}
+
 export type DebugThunkInfo<T extends string = string> = {
   _tag: T
   durationMs: number
@@ -133,9 +139,31 @@ const unknownRefreshReason = () => {
   return { _tag: 'unknown' as const }
 }
 
-export type SerializedAtom = Readonly<
+export type EncodedOption<A> = { _tag: 'Some'; value?: A } | { _tag: 'None' }
+const encodedOptionSome = <A>(value: A): EncodedOption<A> => ({ _tag: 'Some', value })
+const encodedOptionNone = <A>(): EncodedOption<A> => ({ _tag: 'None' })
+
+export type SerializedAtom = SerializedRef | SerializedThunk
+
+export type SerializedRef = Readonly<
+  PrettifyFlat<
+    Pick<Ref<unknown, unknown, any>, '_tag' | 'id' | 'label' | 'meta' | 'isDirty' | 'isDestroyed' | 'refreshes'> & {
+      /** Is `None` if `getSnapshot` was called with `includeResults: false` which is the default */
+      previousResult: EncodedOption<string>
+      sub: ReadonlyArray<string>
+      super: ReadonlyArray<string>
+    }
+  >
+>
+
+export type SerializedThunk = Readonly<
   PrettifyFlat<
-    Pick<Atom<unknown, unknown, any>, '_tag' | 'id' | 'label' | 'meta' | 'isDirty'> & {
+    Pick<
+      Thunk<unknown, unknown, any>,
+      '_tag' | 'id' | 'label' | 'meta' | 'isDirty' | 'isDestroyed' | 'recomputations'
+    > & {
+      /** Is `None` if `getSnapshot` was called with `includeResults: false` which is the default */
+      previousResult: EncodedOption<string>
       sub: ReadonlyArray<string>
       super: ReadonlyArray<string>
     }
@@ -144,13 +172,13 @@ export type SerializedAtom = Readonly<
 
 export type SerializedEffect = Readonly<
   PrettifyFlat<
-    Pick<Effect, '_tag' | 'id' | 'label'> & {
+    Pick<Effect, '_tag' | 'id' | 'label' | 'invocations' | 'isDestroyed'> & {
       sub: ReadonlyArray<string>
     }
   >
 >
 
-type ReactiveGraphSnapshot = {
+export type ReactiveGraphSnapshot = {
   readonly atoms: ReadonlyArray<SerializedAtom>
   readonly effects: ReadonlyArray<SerializedEffect>
   /** IDs of deferred effects */
@@ -267,7 +295,7 @@ export class ReactiveGraph<
           const resultChanged = thunk.equal(thunk.previousResult as T, result) === false
 
           const debugInfoForAtom = {
-            atom: serializeAtom(thunk),
+            atom: serializeAtom(thunk, false),
             resultChanged,
             debugInfo: debugInfo ?? (unknownRefreshReason() as TDebugThunkInfo),
           } satisfies AtomDebugInfo<TDebugThunkInfo>
@@ -290,7 +318,7 @@ export class ReactiveGraph<
               refreshedAtoms,
               durationMs,
               completedTimestamp: Date.now(),
-              graphSnapshot: this.getSnapshot(),
+              graphSnapshot: this.getSnapshot({ includeResults: false }),
             })
           }
 
@@ -455,13 +483,11 @@ export class ReactiveGraph<
         refreshedAtoms,
         durationMs,
         completedTimestamp: Date.now(),
-        graphSnapshot: this.getSnapshot(),
+        graphSnapshot: this.getSnapshot({ includeResults: false }),
       }
       this.debugRefreshInfos.push(refreshDebugInfo)
 
-      for (const cb of this.refreshCallbacks) {
-        cb()
-      }
+      this.runRefreshCallbacks()
     })
   }
 
@@ -481,12 +507,20 @@ export class ReactiveGraph<
     }
   }
 
+  runRefreshCallbacks = () => {
+    for (const cb of this.refreshCallbacks) {
+      cb()
+    }
+  }
+
   addEdge(
     superComp: Thunk<any, TContext, TDebugRefreshReason> | Effect,
     subComp: Atom<any, TContext, TDebugRefreshReason>,
   ) {
     superComp.sub.add(subComp)
     subComp.super.add(superComp)
+
+    this.runRefreshCallbacks()
   }
 
   removeEdge(
@@ -502,13 +536,16 @@ export class ReactiveGraph<
     }
 
     subComp.super.delete(superComp)
+
+    this.runRefreshCallbacks()
   }
 
   // NOTE This function is performance-optimized (i.e. not using `Array.from`)
-  getSnapshot = (): ReactiveGraphSnapshot => {
+  getSnapshot = (opts?: { includeResults: boolean }): ReactiveGraphSnapshot => {
+    const { includeResults = false } = opts ?? {}
     const atoms: SerializedAtom[] = []
     for (const atom of this.atoms) {
-      atoms.push(serializeAtom(atom))
+      atoms.push(serializeAtom(atom, includeResults))
     }
 
     const effects: SerializedEffect[] = []
@@ -535,7 +572,7 @@ export class ReactiveGraph<
 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`)
+    shouldNeverHappen(`LiveStore Error: Attempted to compute destroyed ${atom._tag} (${atom.id}): ${atom.label ?? ''}`)
   }
 
   if (atom.isDirty) {
@@ -566,7 +603,7 @@ export const throwContextNotSetError = (graph: ReactiveGraph<any, any, any>): ne
 }
 
 // NOTE This function is performance-optimized (i.e. not using `pick` and `Array.from`)
-const serializeAtom = (atom: Atom<any, unknown, any>): SerializedAtom => {
+const serializeAtom = (atom: Atom<any, unknown, any>, includeResult: boolean): SerializedAtom => {
   const sub: string[] = []
   for (const a of atom.sub) {
     sub.push(a.id)
@@ -577,14 +614,36 @@ const serializeAtom = (atom: Atom<any, unknown, any>): SerializedAtom => {
     super_.push(a.id)
   }
 
+  const previousResult: EncodedOption<string> = includeResult
+    ? encodedOptionSome(JSON.stringify(atom.previousResult))
+    : encodedOptionNone()
+
+  if (atom._tag === 'ref') {
+    return {
+      _tag: atom._tag,
+      id: atom.id,
+      label: atom.label,
+      meta: atom.meta,
+      isDirty: atom.isDirty,
+      sub,
+      super: super_,
+      isDestroyed: atom.isDestroyed,
+      refreshes: atom.refreshes,
+      previousResult,
+    }
+  }
+
   return {
-    _tag: atom._tag,
+    _tag: 'thunk',
     id: atom.id,
     label: atom.label,
     meta: atom.meta,
     isDirty: atom.isDirty,
     sub,
     super: super_,
+    isDestroyed: atom.isDestroyed,
+    recomputations: atom.recomputations,
+    previousResult,
   }
 }
 
@@ -600,5 +659,7 @@ const serializeEffect = (effect: Effect): SerializedEffect => {
     id: effect.id,
     label: effect.label,
     sub,
+    invocations: effect.invocations,
+    isDestroyed: effect.isDestroyed,
   }
 }

package/src/reactiveQueries/base-class.ts

@@ -22,7 +22,8 @@ export type DbContext = {
 
 export type UnsubscribeQuery = () => void
 
-export type GetResult<TQuery extends LiveQueryAny> = TQuery extends LiveQuery<infer TResult> ? TResult : unknown
+export type GetResult<TQuery extends LiveQueryAny> =
+  TQuery extends LiveQuery<infer TResult, infer _1> ? TResult : unknown
 
 let queryIdCounter = 0
 

package/src/reactiveQueries/graphql.ts

@@ -6,7 +6,7 @@ import * as graphql from 'graphql'
 
 import { globalDbGraph } from '../global-state.js'
 import type { QueryInfoNone } from '../query-info.js'
-import type { Thunk } from '../reactive.js'
+import { isThunk, type Thunk } from '../reactive.js'
 import type { BaseGraphQLContext, RefreshReason, Store } from '../store.js'
 import { getDurationMsFromSpan } from '../utils/otel.js'
 import type { DbContext, DbGraph, GetAtomResult, LiveQuery } from './base-class.js'
@@ -39,7 +39,7 @@ export class LiveStoreGraphQLQuery<
   /** A reactive thunk representing the query results */
   results$: Thunk<TResultMapped, DbContext, RefreshReason>
 
-  variableValues$: Thunk<TVariableValues, DbContext, RefreshReason>
+  variableValues$: Thunk<TVariableValues, DbContext, RefreshReason> | undefined
 
   label: string
 
@@ -89,23 +89,26 @@ export class LiveStoreGraphQLQuery<
             : shouldNeverHappen(`Invalid map function ${map}`)
 
     // TODO don't even create a thunk if variables are static
-    const variableValues$ = this.dbGraph.makeThunk(
-      (get, _setDebugInfo, { rootOtelContext }, otelContext) => {
-        if (typeof genVariableValues === 'function') {
-          return genVariableValues(makeGetAtomResult(get, otelContext ?? rootOtelContext))
-        } else {
-          return genVariableValues
-        }
-      },
-      { label: `${labelWithDefault}:variableValues`, meta: { liveStoreThunkType: 'graphqlVariableValues' } },
-    )
+    let variableValues$OrvariableValues
 
-    this.variableValues$ = variableValues$
+    if (typeof genVariableValues === 'function') {
+      variableValues$OrvariableValues = this.dbGraph.makeThunk(
+        (get, _setDebugInfo, { rootOtelContext }, otelContext) => {
+          return genVariableValues(makeGetAtomResult(get, otelContext ?? rootOtelContext))
+        },
+        { label: `${labelWithDefault}:variableValues`, meta: { liveStoreThunkType: 'graphqlVariableValues' } },
+      )
+      this.variableValues$ = variableValues$OrvariableValues
+    } else {
+      variableValues$OrvariableValues = genVariableValues
+    }
 
     const resultsLabel = `${labelWithDefault}:results`
     this.results$ = this.dbGraph.makeThunk<TResultMapped>(
       (get, setDebugInfo, { store, otelTracer, rootOtelContext }, otelContext) => {
-        const variableValues = get(variableValues$)
+        const variableValues = isThunk(variableValues$OrvariableValues)
+          ? (get(variableValues$OrvariableValues) as TVariableValues)
+          : (variableValues$OrvariableValues as TVariableValues)
         const { result, queriedTables, durationMs } = this.queryOnce({
           document,
           variableValues,
@@ -188,7 +191,11 @@ export class LiveStoreGraphQLQuery<
         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)
+        console.error(`graphql error (${operationName}) - ${res.errors.length} errors`)
+        for (const error of res.errors) {
+          console.error(error)
+        }
+        debugger
       }
 
       span.end()
@@ -208,7 +215,10 @@ export class LiveStoreGraphQLQuery<
   }
 
   destroy = () => {
-    this.dbGraph.destroyNode(this.variableValues$)
+    if (this.variableValues$ !== undefined) {
+      this.dbGraph.destroyNode(this.variableValues$)
+    }
+
     this.dbGraph.destroyNode(this.results$)
   }
 }