@livestore/livestore 0.0.19 → 0.0.22

package/src/reactiveQueries/base-class.ts

@@ -1,55 +1,72 @@
-import * as otel from '@opentelemetry/api'
+import type * as otel from '@opentelemetry/api'
 
-import type { ComponentKey } from '../componentKey.js'
-import type { Store } from '../store.js'
+import type { StackInfo } from '../react/utils/stack-info.js'
+import type { Atom, GetAtom, RefreshReasonWithGenericReasons, Thunk } from '../reactive.js'
+import type { RefreshReason } from '../store.js'
+import { type DbContext, dbGraph } from './graph.js'
+import type { LiveStoreJSQuery } from './js.js'
 
 export type UnsubscribeQuery = () => void
 
-export abstract class LiveStoreQueryBase<TResult> {
-  /** The key for the associated component */
-  componentKey: ComponentKey
-  /** Human-readable label for the query for debugging */
+let queryIdCounter = 0
+
+export interface ILiveStoreQuery<TResult> {
+  id: number
+
+  /** A reactive thunk representing the query results */
+  results$: Thunk<TResult, DbContext, RefreshReason>
+
   label: string
-  /** A pointer back to the store containing this query */
-  store: Store
-  /** Otel Span is started in LiveStore store but ended in this query */
-  otelContext: otel.Context
-
-  /** The string key is used to identify a subscription from "outside" */
-  activeSubscriptions: Map<string, UnsubscribeQuery> = new Map()
-
-  constructor({
-    componentKey,
-    label,
-    store,
-    otelContext,
-  }: {
-    componentKey: ComponentKey
-    label: string
-    store: Store
-    otelContext: otel.Context
-  }) {
-    this.componentKey = componentKey
-    this.label = label
-    this.store = store
-    this.otelContext = otelContext
+
+  run: (otelContext?: otel.Context, debugRefreshReason?: RefreshReasonWithGenericReasons<RefreshReason>) => TResult
+
+  destroy(): void
+
+  activeSubscriptions: Set<StackInfo>
+}
+
+export abstract class LiveStoreQueryBase<TResult> implements ILiveStoreQuery<TResult> {
+  id = queryIdCounter++
+
+  /** Human-readable label for the query for debugging */
+  abstract label: string
+
+  abstract results$: Thunk<TResult, DbContext, RefreshReason>
+
+  activeSubscriptions: Set<StackInfo> = new Set()
+
+  get runs() {
+    return this.results$.recomputations
   }
 
-  destroy = () => {
-    const span = otel.trace.getSpan(this.otelContext)!
-    span.end()
+  abstract destroy: () => void
+
+  run = (otelContext?: otel.Context, debugRefreshReason?: RefreshReasonWithGenericReasons<RefreshReason>): TResult =>
+    this.results$.computeResult(otelContext, debugRefreshReason)
 
-    // NOTE usually the `unsubscribe` function is called by `useLiveStoreComponent` but this code path
-    // is used for manual store destruction, so we need to manually unsubscribe here
-    for (const [_key, unsubscribe] of this.activeSubscriptions) {
-      // unsubscribe from the query
-      unsubscribe()
-    }
+  runAndDestroy = (
+    otelContext?: otel.Context,
+    debugRefreshReason?: RefreshReasonWithGenericReasons<RefreshReason>,
+  ): TResult => {
+    const result = this.run(otelContext, debugRefreshReason)
+    this.destroy()
+    return result
   }
 
   subscribe = (
     onNewValue: (value: TResult) => void,
-    onSubsubscribe?: () => void,
-    options?: { label?: string } | undefined,
-  ): (() => void) => this.store.subscribe(this as any, onNewValue as any, onSubsubscribe, options)
+    onUnsubsubscribe?: () => void,
+    options?: { label?: string; otelContext?: otel.Context } | undefined,
+  ): (() => void) => dbGraph.context!.store.subscribe(this, onNewValue, onUnsubsubscribe, options)
+}
+
+export type GetAtomResult = <T>(atom: Atom<T, any, RefreshReason> | LiveStoreJSQuery<T>) => T
+
+export const makeGetAtomResult = (get: GetAtom, otelContext: otel.Context) => {
+  const getAtom: GetAtomResult = (atom) => {
+    if (atom._tag === 'thunk' || atom._tag === 'ref') return get(atom, otelContext)
+    return get(atom.results$, otelContext)
+  }
+
+  return getAtom
 }

package/src/reactiveQueries/graph.ts

@@ -0,0 +1,15 @@
+import type * as otel from '@opentelemetry/api'
+import ReactDOM from 'react-dom'
+
+import { ReactiveGraph } from '../reactive.js'
+import type { QueryDebugInfo, RefreshReason, Store } from '../store.js'
+
+export type DbContext = {
+  store: Store
+  otelTracer: otel.Tracer
+  rootOtelContext: otel.Context
+}
+
+export const dbGraph = new ReactiveGraph<RefreshReason, QueryDebugInfo, DbContext>({
+  effectsWrapper: (run) => ReactDOM.unstable_batchedUpdates(() => run()),
+})

package/src/reactiveQueries/graphql.ts

@@ -1,54 +1,168 @@
 import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core'
-import type * as otel from '@opentelemetry/api'
+import { assertNever, shouldNeverHappen } from '@livestore/utils'
+import * as otel from '@opentelemetry/api'
+import * as graphql from 'graphql'
 
-import type { ComponentKey } from '../componentKey.js'
+import { getDurationMsFromSpan } from '../otel.js'
 import type { Thunk } from '../reactive.js'
-import type { BaseGraphQLContext, GetAtomResult, Store } from '../store.js'
-import { LiveStoreQueryBase } from './base-class.js'
-import type { LiveStoreJSQuery } from './js.js'
+import type { BaseGraphQLContext, RefreshReason, Store } from '../store.js'
+import { type GetAtomResult, LiveStoreQueryBase, makeGetAtomResult } from './base-class.js'
+import { type DbContext, dbGraph } from './graph.js'
+import { LiveStoreJSQuery } from './js.js'
+
+export const queryGraphQL = <TResult extends Record<string, any>, TVariableValues extends Record<string, any>>(
+  document: DocumentNode<TResult, TVariableValues>,
+  genVariableValues: TVariableValues | ((get: GetAtomResult) => TVariableValues),
+  { label }: { label?: string } = {},
+) => new LiveStoreGraphQLQuery({ document, genVariableValues, label })
 
 export class LiveStoreGraphQLQuery<
   TResult extends Record<string, any>,
-  VariableValues extends Record<string, any>,
+  TVariableValues extends Record<string, any>,
   TContext extends BaseGraphQLContext,
 > extends LiveStoreQueryBase<TResult> {
   _tag: 'graphql' = 'graphql'
 
   /** The abstract GraphQL query */
-  document: DocumentNode<TResult, VariableValues>
+  document: DocumentNode<TResult, TVariableValues>
 
   /** A reactive thunk representing the query results */
-  results$: Thunk<TResult>
+  results$: Thunk<TResult, DbContext, RefreshReason>
+
+  variableValues$: Thunk<TVariableValues, DbContext, RefreshReason>
+
+  label: string
 
   constructor({
     document,
-    results$,
-    ...baseProps
+    label,
+    genVariableValues,
   }: {
-    document: DocumentNode<TResult, VariableValues>
-    context: TContext
-    results$: Thunk<TResult>
-    componentKey: ComponentKey
-    label: string
-    store: Store<TContext>
-    otelContext: otel.Context
+    document: DocumentNode<TResult, TVariableValues>
+    genVariableValues: TVariableValues | ((get: GetAtomResult) => TVariableValues)
+    label?: string
   }) {
-    super(baseProps)
+    super()
 
+    const labelWithDefault = label ?? graphql.getOperationAST(document)?.name?.value ?? 'graphql'
+
+    this.label = labelWithDefault
     this.document = document
-    this.results$ = results$
-  }
 
-  pipe = <U>(f: (x: TResult, get: GetAtomResult) => U): LiveStoreJSQuery<U> =>
-    this.store.queryJS(
-      (get) => {
-        const results = get(this.results$)
-        return f(results, get)
+    // TODO don't even create a thunk if variables are static
+    const variableValues$ = dbGraph.makeThunk(
+      (get, _setDebugInfo, { rootOtelContext }, otelContext) => {
+        if (typeof genVariableValues === 'function') {
+          return genVariableValues(makeGetAtomResult(get, otelContext ?? rootOtelContext))
+        } else {
+          return genVariableValues
+        }
       },
-      {
-        componentKey: this.componentKey,
-        label: `${this.label}:js`,
-        otelContext: this.otelContext,
+      { label: `${labelWithDefault}:variableValues`, meta: { liveStoreThunkType: 'graphqlVariableValues' } },
+    )
+
+    this.variableValues$ = variableValues$
+
+    const resultsLabel = `${labelWithDefault}:results`
+    this.results$ = dbGraph.makeThunk<TResult>(
+      (get, setDebugInfo, { store, otelTracer, rootOtelContext }, otelContext) => {
+        const variableValues = get(variableValues$)
+        const { result, queriedTables, durationMs } = this.queryOnce({
+          document,
+          variableValues,
+          otelContext: otelContext ?? rootOtelContext,
+          otelTracer,
+          store: store as Store<TContext>,
+        })
+
+        // Add dependencies on any tables that were used
+        for (const tableName of queriedTables) {
+          const tableRef = store.tableRefs[tableName]
+          assertNever(tableRef !== undefined, `No table ref found for ${tableName}`)
+          get(tableRef!)
+        }
+
+        setDebugInfo({ _tag: 'graphql', label: resultsLabel, query: graphql.print(document), durationMs })
+
+        return result
       },
+      { label: resultsLabel, meta: { liveStoreThunkType: 'graphqlResults' } },
+      // otelContext,
     )
+  }
+
+  /**
+   * Returns a new reactive query that contains the result of
+   * running an arbitrary JS computation on the results of this SQL query.
+   */
+  pipe = <U>(fn: (result: TResult, get: GetAtomResult) => U): LiveStoreJSQuery<U> =>
+    new LiveStoreJSQuery({
+      fn: (get) => {
+        const results = get(this.results$)
+        return fn(results, get)
+      },
+      label: `${this.label}:js`,
+      onDestroy: () => this.destroy(),
+    })
+
+  queryOnce = ({
+    document,
+    otelContext,
+    otelTracer,
+    variableValues,
+    store,
+  }: {
+    document: graphql.DocumentNode
+    otelContext: otel.Context
+    otelTracer: otel.Tracer
+    variableValues: TVariableValues
+    store: Store<TContext>
+  }) => {
+    const schema =
+      store.graphQLSchema ?? shouldNeverHappen("Can't run a GraphQL query on a store without GraphQL schema")
+    const context =
+      store.graphQLContext ?? shouldNeverHappen("Can't run a GraphQL query on a store without GraphQL context")
+
+    const operationName = graphql.getOperationAST(document)?.name?.value
+
+    return otelTracer.startActiveSpan(`executeGraphQLQuery: ${operationName}`, {}, otelContext, (span) => {
+      span.setAttribute('graphql.variables', JSON.stringify(variableValues))
+      span.setAttribute('graphql.query', graphql.print(document))
+
+      context.queriedTables.clear()
+
+      context.otelContext = otel.trace.setSpan(otel.context.active(), span)
+
+      const res = graphql.executeSync({
+        document,
+        contextValue: context,
+        schema: schema,
+        variableValues,
+      })
+
+      // TODO track number of nested SQL queries via Otel + debug info
+
+      if (res.errors) {
+        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)
+      }
+
+      span.end()
+
+      const durationMs = getDurationMsFromSpan(span)
+
+      return {
+        result: res.data as unknown as TResult,
+        queriedTables: Array.from(context.queriedTables.values()),
+        durationMs,
+      }
+    })
+  }
+
+  destroy = () => {
+    dbGraph.destroy(this.variableValues$)
+    dbGraph.destroy(this.results$)
+  }
 }

package/src/reactiveQueries/js.ts

@@ -1,36 +1,73 @@
-import type * as otel from '@opentelemetry/api'
+import * as otel from '@opentelemetry/api'
 
-import type { ComponentKey } from '../componentKey.js'
-import type { GetAtom, Thunk } from '../reactive.js'
-import type { Store } from '../store.js'
-import { LiveStoreQueryBase } from './base-class.js'
+import { getDurationMsFromSpan } from '../otel.js'
+import type { Thunk } from '../reactive.js'
+import type { RefreshReason } from '../store.js'
+import { type GetAtomResult, LiveStoreQueryBase, makeGetAtomResult } from './base-class.js'
+import type { DbContext } from './graph.js'
+import { dbGraph } from './graph.js'
+
+export const queryJS = <TResult>(fn: (get: GetAtomResult) => TResult, options: { label: string }) =>
+  new LiveStoreJSQuery<TResult>({ fn, label: options.label })
 
 export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase<TResult> {
   _tag: 'js' = 'js'
+
   /** A reactive thunk representing the query results */
-  results$: Thunk<TResult>
+  results$: Thunk<TResult, DbContext, RefreshReason>
+
+  label: string
+
+  /** Currently only used for "nested destruction" of piped queries */
+  private onDestroy: (() => void) | undefined
 
   constructor({
-    results$,
-    ...baseProps
+    fn,
+    label,
+    onDestroy,
   }: {
-    results$: Thunk<TResult>
-    componentKey: ComponentKey
     label: string
-    store: Store
-    otelContext: otel.Context
+    fn: (get: GetAtomResult) => TResult
+    /** Currently only used for "nested destruction" of piped queries */
+    onDestroy?: () => void
   }) {
-    super(baseProps)
+    super()
+
+    this.onDestroy = onDestroy
+    this.label = label
+
+    const queryLabel = `${label}:results`
+
+    this.results$ = dbGraph.makeThunk(
+      (get, setDebugInfo, { otelTracer, rootOtelContext }, otelContext) =>
+        otelTracer.startActiveSpan(`js:${label}`, {}, otelContext ?? rootOtelContext, (span) => {
+          const otelContext = otel.trace.setSpan(otel.context.active(), span)
+          const res = fn(makeGetAtomResult(get, otelContext))
 
-    this.results$ = results$
+          span.end()
+
+          const durationMs = getDurationMsFromSpan(span)
+
+          setDebugInfo({ _tag: 'js', label, query: fn.toString(), durationMs })
+
+          return res
+        }),
+      { label: queryLabel, meta: { liveStoreThunkType: 'jsResults' } },
+    )
   }
 
-  pipe = <U>(f: (x: TResult, get: GetAtom) => U): LiveStoreJSQuery<U> =>
-    this.store.queryJS(
-      (get) => {
+  pipe = <U>(fn: (result: TResult, get: GetAtomResult) => U): LiveStoreJSQuery<U> =>
+    new LiveStoreJSQuery({
+      fn: (get) => {
         const results = get(this.results$)
-        return f(results, get)
+        return fn(results, get)
       },
-      { componentKey: this.componentKey, label: `${this.label}:js`, otelContext: this.otelContext },
-    )
+      label: `${this.label}:js`,
+      onDestroy: () => this.destroy(),
+    })
+
+  destroy = () => {
+    dbGraph.destroy(this.results$)
+    this.onDestroy?.()
+  }
 }

package/src/reactiveQueries/sql.ts

@@ -1,34 +1,130 @@
-import type * as otel from '@opentelemetry/api'
+import { shouldNeverHappen } from '@livestore/utils'
+import * as otel from '@opentelemetry/api'
 
-import type { ComponentKey } from '../componentKey.js'
-import type { GetAtom, Thunk } from '../reactive.js'
-import type { Store } from '../store.js'
-import { LiveStoreQueryBase } from './base-class.js'
-import type { LiveStoreJSQuery } from './js.js'
+import { getDurationMsFromSpan } from '../otel.js'
+import type { Thunk } from '../reactive.js'
+import type { RefreshReason } from '../store.js'
+import type { Bindable } from '../util.js'
+import { prepareBindValues } from '../util.js'
+import { type GetAtomResult, LiveStoreQueryBase, makeGetAtomResult } from './base-class.js'
+import type { DbContext } from './graph.js'
+import { dbGraph } from './graph.js'
+import { LiveStoreJSQuery } from './js.js'
+
+export const querySQL = <Row>(
+  query: string | ((get: GetAtomResult) => string),
+  options?: {
+    /**
+     * Can be provided explicitly to slightly speed up initial query performance
+     *
+     * NOTE In the future we want to do this automatically at build time
+     */
+    queriedTables?: ReadonlyArray<string>
+    bindValues?: Bindable
+    label?: string
+  },
+) =>
+  new LiveStoreSQLQuery<Row>({
+    label: options?.label,
+    genQueryString: query,
+    queriedTables: options?.queriedTables,
+    bindValues: options?.bindValues,
+  })
 
 /* An object encapsulating a reactive SQL query */
-export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase<Row> {
+export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase<ReadonlyArray<Row>> {
   _tag: 'sql' = 'sql'
+
   /** A reactive thunk representing the query text */
-  queryString$: Thunk<string>
+  queryString$: Thunk<string, DbContext, RefreshReason>
+
   /** A reactive thunk representing the query results */
-  results$: Thunk<ReadonlyArray<Row>>
+  results$: Thunk<ReadonlyArray<Row>, DbContext, RefreshReason>
+
+  label: string
 
   constructor({
-    queryString$,
-    results$,
-    ...baseProps
+    genQueryString,
+    queriedTables,
+    bindValues,
+    label: label_,
   }: {
-    queryString$: Thunk<string>
-    results$: Thunk<ReadonlyArray<Row>>
-    componentKey: ComponentKey
-    label: string
-    store: Store
-    otelContext: otel.Context
+    label?: string
+    genQueryString: string | ((get: GetAtomResult) => string)
+    queriedTables?: ReadonlyArray<string>
+    bindValues?: Bindable
   }) {
-    super(baseProps)
+    super()
+
+    const label = label_ ?? genQueryString.toString()
+    this.label = `sql(${label})`
+
+    // TODO don't even create a thunk if query string is static
+    const queryString$ = dbGraph.makeThunk(
+      (get, setDebugInfo, { rootOtelContext }, otelContext) => {
+        if (typeof genQueryString === 'function') {
+          const startMs = performance.now()
+          const queryString = genQueryString(makeGetAtomResult(get, otelContext ?? rootOtelContext))
+          const durationMs = performance.now() - startMs
+          setDebugInfo({ _tag: 'js', label: `${label}:queryString`, query: queryString, durationMs })
+          return queryString
+        } else {
+          return genQueryString
+        }
+      },
+      { label: `${label}:queryString`, meta: { liveStoreThunkType: 'sqlQueryString' } },
+    )
 
     this.queryString$ = queryString$
+
+    const queryLabel = `${label}:results`
+
+    const queriedTablesRef = { current: queriedTables }
+
+    const results$ = dbGraph.makeThunk<ReadonlyArray<Row>>(
+      (get, setDebugInfo, { store, otelTracer, rootOtelContext }, otelContext) =>
+        otelTracer.startActiveSpan(
+          'sql:...', // NOTE span name will be overridden further down
+          {},
+          otelContext ?? rootOtelContext,
+          (span) => {
+            const otelContext = otel.trace.setSpan(otel.context.active(), span)
+
+            const sqlString = get(queryString$, otelContext)
+
+            if (queriedTablesRef.current === undefined) {
+              queriedTablesRef.current = store.inMemoryDB.getTablesUsed(sqlString)
+            }
+
+            // 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)
+            }
+
+            span.setAttribute('sql.query', sqlString)
+            span.updateName(`sql:${sqlString.slice(0, 50)}`)
+
+            const results = store.inMemoryDB.select<Row>(sqlString, {
+              queriedTables,
+              bindValues: bindValues ? prepareBindValues(bindValues, sqlString) : undefined,
+              otelContext,
+            })
+
+            span.setAttribute('sql.rowsCount', results.length)
+
+            span.end()
+
+            const durationMs = getDurationMsFromSpan(span)
+
+            setDebugInfo({ _tag: 'sql', label, query: sqlString, durationMs })
+
+            return results
+          },
+        ),
+      { label: queryLabel },
+    )
+
     this.results$ = results$
   }
 
@@ -36,30 +132,34 @@ export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase<Row> {
    * Returns a new reactive query that contains the result of
    * running an arbitrary JS computation on the results of this SQL query.
    */
-  pipe = <U>(fn: (result: ReadonlyArray<Row>, get: GetAtom) => U): LiveStoreJSQuery<U> =>
-    this.store.queryJS(
-      (get) => {
-        const results = get(this.results$)
+  pipe = <U>(fn: (result: ReadonlyArray<Row>, get: GetAtomResult) => U): LiveStoreJSQuery<U> =>
+    new LiveStoreJSQuery({
+      fn: (get) => {
+        const results = get(this.results$!)
         return fn(results, get)
       },
-      {
-        componentKey: this.componentKey,
-        label: `${this.label}:js`,
-        otelContext: this.otelContext,
-      },
-    )
+      label: `${this.label}:js`,
+      onDestroy: () => this.destroy(),
+    })
 
   /** Returns a reactive query  */
   getFirstRow = (args?: { defaultValue?: Row }) =>
-    this.store.queryJS(
-      (get) => {
-        const results = get(this.results$)
+    new LiveStoreJSQuery({
+      fn: (get) => {
+        const results = get(this.results$!)
         if (results.length === 0 && args?.defaultValue === undefined) {
-          const queryLabel = this._tag === 'sql' ? this.queryString$.result : this.label
+          // const queryLabel = this._tag === 'sql' ? this.queryString$!.computeResult(otelContext) : this.label
+          const queryLabel = this.label
           throw new Error(`Expected query ${queryLabel} to return at least one result`)
         }
-        return (results[0] ?? args?.defaultValue) as Row
+        return results[0] ?? args!.defaultValue!
       },
-      { componentKey: this.componentKey, label: `${this.label}:first`, otelContext: this.otelContext },
-    )
+      label: `${this.label}:first`,
+      onDestroy: () => this.destroy(),
+    })
+
+  destroy = () => {
+    dbGraph.destroy(this.queryString$)
+    dbGraph.destroy(this.results$)
+  }
 }