@livestore/livestore 0.2.0 → 0.3.0-dev.11

package/src/live-queries/graphql.ts

@@ -5,13 +5,12 @@ import { Schema, TreeFormatter } from '@livestore/utils/effect'
 import * as otel from '@opentelemetry/api'
 import * as graphql from 'graphql'
 
-import { globalReactivityGraph } from '../global-state.js'
 import { isThunk, type Thunk } from '../reactive.js'
 import type { Store } from '../store/store.js'
 import type { BaseGraphQLContext, RefreshReason } from '../store/store-types.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 { defCounterRef, depsToString, LiveStoreQueryBase, makeGetAtomResult, withRCMap } from './base-class.js'
 
 export type MapResult<To, From> = ((res: From, get: GetAtomResult) => To) | Schema.Schema<To, From>
 
@@ -22,17 +21,37 @@ export const queryGraphQL = <
 >(
   document: DocumentNode<TResult, TVariableValues>,
   genVariableValues: TVariableValues | ((get: GetAtomResult) => TVariableValues),
-  {
-    label,
-    reactivityGraph,
-    map,
-  }: {
+  options: {
     label?: string
-    reactivityGraph?: ReactivityGraph
+    // reactivityGraph?: ReactivityGraph
     map?: MapResult<TResultMapped, TResult>
+    deps?: DepKey
   } = {},
-): LiveQuery<TResultMapped, QueryInfo.None> =>
-  new LiveStoreGraphQLQuery({ document, genVariableValues, label, reactivityGraph, map })
+): LiveQueryDef<TResultMapped, QueryInfo.None> => {
+  const documentName = graphql.getOperationAST(document)?.name?.value
+  const hash = options.deps
+    ? depsToString(options.deps)
+    : (documentName ?? shouldNeverHappen('No document name found and no deps provided'))
+  const label = options.label ?? documentName ?? 'graphql'
+  const map = options.map
+
+  return {
+    _tag: 'def',
+    id: ++defCounterRef.current,
+    make: withRCMap(hash, (ctx, _otelContext) => {
+      return new LiveStoreGraphQLQuery({
+        document,
+        genVariableValues,
+        label,
+        map,
+        reactivityGraph: ctx.reactivityGraph.deref()!,
+      })
+    }),
+    label,
+    hash,
+    queryInfo: { _tag: 'None' },
+  }
+}
 
 export class LiveStoreGraphQLQuery<
   TResult extends Record<string, any>,
@@ -46,13 +65,13 @@ export class LiveStoreGraphQLQuery<
   document: DocumentNode<TResult, TVariableValues>
 
   /** A reactive thunk representing the query results */
-  results$: Thunk<TResultMapped, QueryContext, RefreshReason>
+  results$: Thunk<TResultMapped, ReactivityGraphContext, RefreshReason>
 
-  variableValues$: Thunk<TVariableValues, QueryContext, RefreshReason> | undefined
+  variableValues$: Thunk<TVariableValues, ReactivityGraphContext, RefreshReason> | undefined
 
   label: string
 
-  protected reactivityGraph: ReactivityGraph
+  reactivityGraph: ReactivityGraph
 
   queryInfo: QueryInfo.None = { _tag: 'None' }
 
@@ -68,7 +87,7 @@ export class LiveStoreGraphQLQuery<
     document: DocumentNode<TResult, TVariableValues>
     genVariableValues: TVariableValues | ((get: GetAtomResult) => TVariableValues)
     label?: string
-    reactivityGraph?: ReactivityGraph
+    reactivityGraph: ReactivityGraph
     map?: MapResult<TResultMapped, TResult>
   }) {
     super()
@@ -78,7 +97,7 @@ export class LiveStoreGraphQLQuery<
     this.label = labelWithDefault
     this.document = document
 
-    this.reactivityGraph = reactivityGraph ?? globalReactivityGraph
+    this.reactivityGraph = reactivityGraph
 
     this.mapResult =
       map === undefined
@@ -102,8 +121,10 @@ export class LiveStoreGraphQLQuery<
 
     if (typeof genVariableValues === 'function') {
       variableValues$OrvariableValues = this.reactivityGraph.makeThunk(
-        (get, _setDebugInfo, { rootOtelContext }, otelContext) => {
-          return genVariableValues(makeGetAtomResult(get, otelContext ?? rootOtelContext))
+        (get, _setDebugInfo, ctx, otelContext) => {
+          return genVariableValues(
+            makeGetAtomResult(get, ctx, otelContext ?? ctx.rootOtelContext, this.dependencyQueriesRef),
+          )
         },
         { label: `${labelWithDefault}:variableValues`, meta: { liveStoreThunkType: 'graphql.variables' } },
       )
@@ -114,9 +135,10 @@ export class LiveStoreGraphQLQuery<
 
     const resultsLabel = `${labelWithDefault}:results`
     this.results$ = this.reactivityGraph.makeThunk<TResultMapped>(
-      (get, setDebugInfo, { store, otelTracer, rootOtelContext }, otelContext) => {
+      (get, setDebugInfo, ctx, otelContext, debugRefreshReason) => {
+        const { store, otelTracer, rootOtelContext } = ctx
         const variableValues = isThunk(variableValues$OrvariableValues)
-          ? (get(variableValues$OrvariableValues) as TVariableValues)
+          ? (get(variableValues$OrvariableValues, otelContext, debugRefreshReason) as TVariableValues)
           : (variableValues$OrvariableValues as TVariableValues)
         const { result, queriedTables, durationMs } = this.queryOnce({
           document,
@@ -124,7 +146,7 @@ export class LiveStoreGraphQLQuery<
           otelContext: otelContext ?? rootOtelContext,
           otelTracer,
           store: store as Store<TContext>,
-          get: makeGetAtomResult(get, otelContext ?? rootOtelContext),
+          get: makeGetAtomResult(get, ctx, otelContext ?? rootOtelContext, this.dependencyQueriesRef),
         })
 
         // Add dependencies on any tables that were used
@@ -215,5 +237,9 @@ export class LiveStoreGraphQLQuery<
     }
 
     this.reactivityGraph.destroyNode(this.results$)
+
+    for (const query of this.dependencyQueriesRef) {
+      query.deref()
+    }
   }
 }

package/src/live-queries/make-ref.ts

@@ -0,0 +1,47 @@
+import { nanoid } from '@livestore/utils/nanoid'
+
+import type * as RG from '../reactive.js'
+import type { RefreshReason } from '../store/store-types.js'
+import type { ILiveQueryRef, ILiveQueryRefDef, ReactivityGraph, ReactivityGraphContext } from './base-class.js'
+import { withRCMap } from './base-class.js'
+
+export const makeRef = <T>(
+  defaultValue: T,
+  options?: {
+    label?: string
+  },
+): ILiveQueryRefDef<T> => {
+  const id = nanoid()
+  return {
+    _tag: 'live-ref-def',
+    defaultValue,
+    make: withRCMap(id, (ctx) => new LiveQueryRef(defaultValue, ctx.reactivityGraph.deref()!, options)),
+  }
+}
+
+export class LiveQueryRef<T> implements ILiveQueryRef<T> {
+  _tag = 'live-ref' as const
+  readonly ref: RG.Ref<T, ReactivityGraphContext, RefreshReason>
+
+  constructor(
+    private defaultValue: T,
+    readonly reactivityGraph: ReactivityGraph,
+    private options?: {
+      label?: string
+    },
+  ) {
+    this.ref = reactivityGraph.makeRef(defaultValue, { label: options?.label })
+  }
+
+  set = (value: T) => {
+    this.reactivityGraph.setRef(this.ref, value)
+  }
+
+  get = () => {
+    return this.ref.computeResult()
+  }
+
+  destroy = () => {
+    this.reactivityGraph.destroyNode(this.ref)
+  }
+}

package/src/reactive.ts

@@ -32,7 +32,11 @@ import type * as otel from '@opentelemetry/api'
 export const NOT_REFRESHED_YET = Symbol.for('NOT_REFRESHED_YET')
 export type NOT_REFRESHED_YET = typeof NOT_REFRESHED_YET
 
-export type GetAtom = <T>(atom: Atom<T, any, any>, otelContext?: otel.Context) => T
+export type GetAtom = <T>(
+  atom: Atom<T, any, any>,
+  otelContext?: otel.Context | undefined,
+  debugRefreshReason?: TODO | undefined,
+) => T
 
 export type Ref<T, TContext, TDebugRefreshReason extends DebugRefreshReason> = {
   _tag: 'ref'
@@ -42,7 +46,7 @@ export type Ref<T, TContext, TDebugRefreshReason extends DebugRefreshReason> = {
   previousResult: T
   computeResult: () => T
   sub: Set<Atom<any, TContext, TDebugRefreshReason>> // always empty
-  super: Set<Thunk<any, TContext, TDebugRefreshReason> | Effect>
+  super: Set<Thunk<any, TContext, TDebugRefreshReason> | Effect<TDebugRefreshReason>>
   label?: string
   /** Container for meta information (e.g. the LiveStore Store) */
   meta?: any
@@ -58,7 +62,7 @@ export type Thunk<TResult, TContext, TDebugRefreshReason extends DebugRefreshRea
   computeResult: (otelContext?: otel.Context, debugRefreshReason?: TDebugRefreshReason) => TResult
   previousResult: TResult | NOT_REFRESHED_YET
   sub: Set<Atom<any, TContext, TDebugRefreshReason>>
-  super: Set<Thunk<any, TContext, TDebugRefreshReason> | Effect>
+  super: Set<Thunk<any, TContext, TDebugRefreshReason> | Effect<TDebugRefreshReason>>
   label?: string
   /** Container for meta information (e.g. the LiveStore Store) */
   meta?: any
@@ -72,11 +76,11 @@ export type Atom<T, TContext, TDebugRefreshReason extends DebugRefreshReason> =
   | Ref<T, TContext, TDebugRefreshReason>
   | Thunk<T, TContext, TDebugRefreshReason>
 
-export type Effect = {
+export type Effect<TDebugRefreshReason extends DebugRefreshReason> = {
   _tag: 'effect'
   id: string
   isDestroyed: boolean
-  doEffect: (otelContext?: otel.Context) => void
+  doEffect: (otelContext?: otel.Context | undefined, debugRefreshReason?: TDebugRefreshReason | undefined) => void
   sub: Set<Atom<any, TODO, TODO>>
   label?: string
   invocations: number
@@ -84,7 +88,7 @@ export type Effect = {
 
 export type Node<T, TContext, TDebugRefreshReason extends DebugRefreshReason> =
   | Atom<T, TContext, TDebugRefreshReason>
-  | Effect
+  | Effect<TDebugRefreshReason>
 
 export const isThunk = <T, TContext, TDebugRefreshReason extends DebugRefreshReason>(
   obj: unknown,
@@ -166,7 +170,7 @@ export type SerializedThunk = Readonly<
 
 export type SerializedEffect = Readonly<
   PrettifyFlat<
-    Pick<Effect, '_tag' | 'id' | 'label' | 'invocations' | 'isDestroyed'> & {
+    Pick<Effect<any>, '_tag' | 'id' | 'label' | 'invocations' | 'isDestroyed'> & {
       sub: ReadonlyArray<string>
     }
   >
@@ -187,6 +191,13 @@ const uniqueRefreshInfoId = () => `refresh-info-${++refreshInfoIdCounter}`
 let globalGraphIdCounter = 0
 const uniqueGraphId = () => `graph-${++globalGraphIdCounter}`
 
+/** Used for testing */
+export const __resetIds = () => {
+  nodeIdCounter = 0
+  refreshInfoIdCounter = 0
+  globalGraphIdCounter = 0
+}
+
 export class ReactiveGraph<
   TDebugRefreshReason extends DebugRefreshReason,
   TDebugThunkInfo extends DebugThunkInfo,
@@ -195,7 +206,7 @@ export class ReactiveGraph<
   id = uniqueGraphId()
 
   readonly atoms: Set<Atom<any, TContext, TDebugRefreshReason>> = new Set()
-  readonly effects: Set<Effect> = new Set()
+  readonly effects: Set<Effect<TDebugRefreshReason>> = new Set()
 
   context: TContext | undefined
 
@@ -205,7 +216,7 @@ export class ReactiveGraph<
     | { refreshedAtoms: AtomDebugInfo<TDebugThunkInfo>[]; startMs: DOMHighResTimeStamp }
     | undefined
 
-  private deferredEffects: Map<Effect, Set<TDebugRefreshReason>> = new Map()
+  private deferredEffects: Map<Effect<TDebugRefreshReason>, Set<TDebugRefreshReason>> = new Map()
 
   private refreshCallbacks: Set<() => void> = new Set()
 
@@ -239,6 +250,7 @@ export class ReactiveGraph<
       setDebugInfo: (debugInfo: TDebugThunkInfo) => void,
       ctx: TContext,
       otelContext: otel.Context | undefined,
+      debugRefreshReason: TDebugRefreshReason | undefined,
     ) => T,
     options?:
       | {
@@ -266,7 +278,7 @@ export class ReactiveGraph<
 
           const getAtom = (atom: Atom<T, TContext, TDebugRefreshReason>, otelContext: otel.Context) => {
             this.addEdge(thunk, atom)
-            return compute(atom, otelContext)
+            return compute(atom, otelContext, debugRefreshReason)
           }
 
           let debugInfo: TDebugThunkInfo | undefined = undefined
@@ -279,6 +291,7 @@ export class ReactiveGraph<
             setDebugInfo,
             this.context ?? throwContextNotSetError(this),
             otelContext,
+            debugRefreshReason,
           )
 
           const resultChanged = thunk.equal(thunk.previousResult as T, result) === false
@@ -365,14 +378,18 @@ export class ReactiveGraph<
   }
 
   makeEffect(
-    doEffect: (get: GetAtom, otelContext?: otel.Context) => void,
+    doEffect: (
+      get: GetAtom,
+      otelContext: otel.Context | undefined,
+      debugRefreshReason: DebugRefreshReason | undefined,
+    ) => void,
     options?: { label?: string } | undefined,
-  ): Effect {
-    const effect: Effect = {
+  ): Effect<TDebugRefreshReason> {
+    const effect: Effect<TDebugRefreshReason> = {
       _tag: 'effect',
       id: uniqueNodeId(),
       isDestroyed: false,
-      doEffect: (otelContext) => {
+      doEffect: (otelContext, debugRefreshReason) => {
         effect.invocations++
 
         // NOTE we're not tracking any debug refresh info for effects as they're tracked by the thunks they depend on
@@ -380,12 +397,16 @@ export class ReactiveGraph<
         // Reset previous subcomputations as we're about to re-add them as part of the `doEffect` call below
         effect.sub = new Set()
 
-        const getAtom = (atom: Atom<any, TContext, TDebugRefreshReason>, otelContext: otel.Context) => {
+        const getAtom = (
+          atom: Atom<any, TContext, TDebugRefreshReason>,
+          otelContext: otel.Context,
+          debugRefreshReason: DebugRefreshReason | undefined,
+        ) => {
           this.addEdge(effect, atom)
-          return compute(atom, otelContext)
+          return compute(atom, otelContext, debugRefreshReason)
         }
 
-        doEffect(getAtom as GetAtom, otelContext)
+        doEffect(getAtom as GetAtom, otelContext, debugRefreshReason)
       },
       sub: new Set(),
       label: options?.label,
@@ -421,7 +442,7 @@ export class ReactiveGraph<
         }
       | undefined,
   ) {
-    const effectsToRefresh = new Set<Effect>()
+    const effectsToRefresh = new Set<Effect<TDebugRefreshReason>>()
     for (const [ref, val] of refs) {
       ref.previousResult = val
       ref.refreshes++
@@ -448,7 +469,7 @@ export class ReactiveGraph<
   }
 
   private runEffects = (
-    effectsToRefresh: Set<Effect>,
+    effectsToRefresh: Set<Effect<TDebugRefreshReason>>,
     options: {
       debugRefreshReason: TDebugRefreshReason
       otelContext?: otel.Context
@@ -459,7 +480,7 @@ export class ReactiveGraph<
       this.currentDebugRefresh = { refreshedAtoms: [], startMs: performance.now() }
 
       for (const effect of effectsToRefresh) {
-        effect.doEffect(options?.otelContext)
+        effect.doEffect(options?.otelContext, options.debugRefreshReason)
       }
 
       const refreshedAtoms = this.currentDebugRefresh.refreshedAtoms
@@ -504,7 +525,7 @@ export class ReactiveGraph<
   }
 
   addEdge(
-    superComp: Thunk<any, TContext, TDebugRefreshReason> | Effect,
+    superComp: Thunk<any, TContext, TDebugRefreshReason> | Effect<TDebugRefreshReason>,
     subComp: Atom<any, TContext, TDebugRefreshReason>,
   ) {
     superComp.sub.add(subComp)
@@ -516,11 +537,11 @@ export class ReactiveGraph<
   }
 
   removeEdge(
-    superComp: Thunk<any, TContext, TDebugRefreshReason> | Effect,
+    superComp: Thunk<any, TContext, TDebugRefreshReason> | Effect<TDebugRefreshReason>,
     subComp: Atom<any, TContext, TDebugRefreshReason>,
   ) {
     superComp.sub.delete(subComp)
-    const effectsToRefresh = new Set<Effect>()
+    const effectsToRefresh = new Set<Effect<TDebugRefreshReason>>()
     markSuperCompDirtyRec(subComp, effectsToRefresh)
 
     for (const effect of effectsToRefresh) {
@@ -563,7 +584,11 @@ export class ReactiveGraph<
   }
 }
 
-const compute = <T>(atom: Atom<T, unknown, any>, otelContext: otel.Context): T => {
+const compute = <T>(
+  atom: Atom<T, unknown, any>,
+  otelContext: otel.Context,
+  debugRefreshReason: DebugRefreshReason | undefined,
+): T => {
   // const __getResult = atom._tag === 'thunk' ? atom.__getResult.toString() : ''
   if (atom.isDestroyed) {
     shouldNeverHappen(`LiveStore Error: Attempted to compute destroyed ${atom._tag} (${atom.id}): ${atom.label ?? ''}`)
@@ -571,7 +596,7 @@ const compute = <T>(atom: Atom<T, unknown, any>, otelContext: otel.Context): T =
 
   if (atom.isDirty) {
     // console.log('atom is dirty', atom.id, atom.label ?? '', atom._tag, __getResult)
-    const result = atom.computeResult(otelContext)
+    const result = atom.computeResult(otelContext, debugRefreshReason)
     atom.isDirty = false
     atom.previousResult = result
     return result
@@ -581,7 +606,7 @@ const compute = <T>(atom: Atom<T, unknown, any>, otelContext: otel.Context): T =
   }
 }
 
-const markSuperCompDirtyRec = <T>(atom: Atom<T, unknown, any>, effectsToRefresh: Set<Effect>) => {
+const markSuperCompDirtyRec = <T>(atom: Atom<T, unknown, any>, effectsToRefresh: Set<Effect<any>>) => {
   for (const superComp of atom.super) {
     if (superComp._tag === 'thunk') {
       superComp.isDirty = true
@@ -644,7 +669,7 @@ const serializeAtom = (atom: Atom<any, unknown, any>, includeResult: boolean): S
 }
 
 // NOTE This function is performance-optimized (i.e. not using `pick` and `Array.from`)
-const serializeEffect = (effect: Effect): SerializedEffect => {
+const serializeEffect = (effect: Effect<any>): SerializedEffect => {
   const sub: string[] = []
   for (const a of effect.sub) {
     sub.push(a.id)

package/src/row-query-utils.ts

@@ -4,28 +4,33 @@ import { DbSchema } from '@livestore/common/schema'
 import { shouldNeverHappen } from '@livestore/utils'
 import type * as otel from '@opentelemetry/api'
 
-import type { LiveQuery, LiveQueryAny, QueryContext } from './live-queries/base-class.js'
+import type { GetResult, LiveQueryDef, ReactivityGraphContext } from './live-queries/base-class.js'
 import { computed } from './live-queries/computed.js'
 
 export const rowQueryLabel = (table: DbSchema.TableDefBase, id: string | SessionIdSymbol | undefined) =>
   `row:${table.sqliteDef.name}${id === undefined ? '' : id === SessionIdSymbol ? `:sessionId` : `:${id}`}`
 
 export const deriveColQuery: {
-  <TQuery extends LiveQuery<any, QueryInfo.None>, TCol extends keyof TQuery['__result!'] & string>(
-    query$: TQuery,
+  <TQueryDef extends LiveQueryDef<any, QueryInfo.None>, TCol extends keyof GetResult<TQueryDef> & string>(
+    queryDef: TQueryDef,
     colName: TCol,
-  ): LiveQuery<TQuery['__result!'][TCol], QueryInfo.None>
-  <TQuery extends LiveQuery<any, QueryInfo.Row>, TCol extends keyof TQuery['__result!'] & string>(
-    query$: TQuery,
+  ): LiveQueryDef<GetResult<TQueryDef>[TCol], QueryInfo.None>
+  <TQueryDef extends LiveQueryDef<any, QueryInfo.Row>, TCol extends keyof GetResult<TQueryDef> & string>(
+    queryDef: TQueryDef,
     colName: TCol,
-  ): LiveQuery<TQuery['__result!'][TCol], QueryInfo.Col>
-} = (query$: LiveQueryAny, colName: string) => {
-  return computed((get) => get(query$)[colName], {
-    label: `deriveColQuery:${query$.label}:${colName}`,
+  ): LiveQueryDef<GetResult<TQueryDef>[TCol], QueryInfo.Col>
+} = (queryDef: LiveQueryDef<any, QueryInfo.Row | QueryInfo.Col>, colName: string) => {
+  return computed((get) => get(queryDef)[colName], {
+    label: `deriveColQuery:${queryDef.label}:${colName}`,
     queryInfo:
-      query$.queryInfo._tag === 'Row'
-        ? { _tag: 'Col', table: query$.queryInfo.table, column: colName, id: query$.queryInfo.id }
+      queryDef.queryInfo._tag === 'Row'
+        ? { _tag: 'Col', table: queryDef.queryInfo.table, column: colName, id: queryDef.queryInfo.id }
         : undefined,
+    deps: [
+      queryDef.queryInfo.table.sqliteDef.name,
+      queryDef.queryInfo.id === SessionIdSymbol ? 'sessionId' : queryDef.queryInfo.id,
+      queryDef.queryInfo._tag === 'Col' ? queryDef.queryInfo.column : undefined,
+    ],
   }) as any
 }
 
@@ -41,15 +46,17 @@ export const makeExecBeforeFirstRun =
     table: DbSchema.TableDefBase
     otelContext: otel.Context | undefined
   }) =>
-  ({ store }: QueryContext) => {
+  ({ store }: ReactivityGraphContext) => {
     const otelContext = otelContext_ ?? store.otel.queriesSpanContext
 
     if (table.options.isSingleton === false) {
       const idStr = id === SessionIdSymbol ? store.sessionId : id!
       const rowExists =
-        store.syncDbWrapper.select(`SELECT 1 FROM '${table.sqliteDef.name}' WHERE id = ?`, {
-          bindValues: [idStr] as any as PreparedBindValues,
-        }).length === 1
+        store.sqliteDbWrapper.select(
+          `SELECT 1 FROM '${table.sqliteDef.name}' WHERE id = ?`,
+          [idStr] as any as PreparedBindValues,
+          { otelContext },
+        ).length === 1
 
       if (rowExists) return
 
@@ -59,7 +66,11 @@ export const makeExecBeforeFirstRun =
         )
       }
 
-      // NOTE It's important that we only mutate and don't refresh here, as this function is called during a render
-      store.mutateWithoutRefresh(table.insert({ id, ...insertValues }), { otelContext, coordinatorMode: 'default' })
+      // It's important that we only mutate and don't refresh here, as this function might be called during a render
+      // and otherwise we might end up in a "reactive loop"
+      store.mutate(
+        { otelContext, skipRefresh: true, label: `rowQuery:${table.sqliteDef.name}:${idStr}` },
+        table.insert({ id, ...insertValues }),
+      )
     }
   }