@livestore/livestore 0.0.12 → 0.0.14

package/src/reactiveQueries/base-class.ts

@@ -1,49 +1,71 @@
-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/extractStackInfoFromStackTrace.js'
+import type { Atom, GetAtom, Thunk } from '../reactive.js'
+import { type DbContext } from './graph.js'
+import type { LiveStoreJSQuery } from './js.js'
 
 export type UnsubscribeQuery = () => void
 
-export abstract class LiveStoreQueryBase {
-  /** 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>
+
   label: string
-  /** A pointer back to the store containing this query */
-  store: Store<any>
-  /** 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<any>
-    otelContext: otel.Context
-  }) {
-    this.componentKey = componentKey
-    this.label = label
-    this.store = store
-    this.otelContext = otelContext
+
+  run: (otelContext?: otel.Context) => TResult
+
+  destroy(): void
+
+  activeSubscriptions: Set<SubscriberInfo>
+}
+
+export type SubscriberInfo = {
+  stack: 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>
+
+  activeSubscriptions: Set<SubscriberInfo> = new Set()
+
+  get runs() {
+    return this.results$.recomputations
   }
 
-  destroy = () => {
-    const span = otel.trace.getSpan(this.otelContext)!
-    span.end()
+  abstract destroy: () => void
+
+  // subscribe = (
+  //   onNewValue: (value: TResult) => void,
+  //   onSubsubscribe?: () => void,
+  //   options?: { label?: string } | undefined,
+  // ): (() => void) => this.store.subscribe(this as any, onNewValue as any, onSubsubscribe, options)
+
+  run = (otelContext?: otel.Context): TResult => this.results$.computeResult(otelContext)
 
-    // 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): TResult => {
+    const result = this.run(otelContext)
+    this.destroy()
+    return result
   }
 }
+
+export type GetAtomResult = <T>(atom: Atom<T, any> | 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,170 @@
 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 type { GetAtom, Thunk } from '../reactive.js'
-import type { BaseGraphQLContext, Store } from '../store.js'
-import { LiveStoreQueryBase } from './base-class.js'
-import type { LiveStoreJSQuery } from './js.js'
+import type { Thunk } from '../reactive.js'
+import { type BaseGraphQLContext, type 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 {
+> 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>
+
+  variableValues$: Thunk<TVariableValues, DbContext>
+
+  label: string
 
   constructor({
     document,
-    results$,
-    ...baseProps
+    label,
+    genVariableValues, // context,
   }: {
-    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: GetAtom) => U): LiveStoreJSQuery<U> =>
-    this.store.queryJS(
-      (get) => {
-        const results = get(this.results$)
-        return f(results, get)
+    // if (context === undefined) {
+    //   return shouldNeverHappen("Can't run a GraphQL query on a store without GraphQL context")
+    // }
+
+    // TODO don't even create a thunk if variables are static
+    const variableValues$ = dbGraph.makeThunk(
+      (get, _addDebugInfo, { 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.temporaryQueries ? ':temp' : '')
+    const resultsLabel = `${labelWithDefault}:results`
+    this.results$ = dbGraph.makeThunk<TResult>(
+      (get, addDebugInfo, { store, otelTracer, rootOtelContext }, otelContext) => {
+        const variableValues = get(variableValues$)
+        const { result, queriedTables } = 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!)
+        }
+
+        addDebugInfo({ _tag: 'graphql', label: resultsLabel, query: graphql.print(document) })
+
+        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 = this.schema
+    // const context = this.context
+    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) => {
+      try {
+        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)
+        }
+
+        return { result: res.data as unknown as TResult, queriedTables: Array.from(context.queriedTables.values()) }
+      } finally {
+        span.end()
+      }
+    })
+  }
+
+  destroy = () => {
+    dbGraph.destroy(this.variableValues$)
+    dbGraph.destroy(this.results$)
+  }
 }

package/src/reactiveQueries/js.ts

@@ -1,36 +1,69 @@
-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 type { Thunk } from '../reactive.js'
+import { type GetAtomResult, LiveStoreQueryBase, makeGetAtomResult } from './base-class.js'
+import type { DbContext } from './graph.js'
+import { dbGraph } from './graph.js'
 
-export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase {
+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>
+
+  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<any>
-    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$ = results$
+    this.results$ = dbGraph.makeThunk(
+      (get, addDebugInfo, { otelTracer, rootOtelContext }, otelContext) =>
+        otelTracer.startActiveSpan(`js:${label}`, {}, otelContext ?? rootOtelContext, (span) => {
+          try {
+            addDebugInfo({ _tag: 'js', label, query: fn.toString() })
+
+            const otelContext = otel.trace.setSpan(otel.context.active(), span)
+            return fn(makeGetAtomResult(get, otelContext))
+          } finally {
+            span.end()
+          }
+        }),
+      { 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,121 @@
-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 type { Thunk } from '../reactive.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: {
+    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 {
+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>
+
   /** A reactive thunk representing the query results */
-  results$: Thunk<Row[]>
+  results$: Thunk<ReadonlyArray<Row>, DbContext>
+
+  label: string
 
   constructor({
-    queryString$,
-    results$,
-    ...baseProps
+    genQueryString,
+    queriedTables,
+    bindValues,
+    label,
   }: {
-    queryString$: Thunk<string>
-    results$: Thunk<Row[]>
-    componentKey: ComponentKey
-    label: string
-    store: Store<any>
-    otelContext: otel.Context
+    label?: string
+    genQueryString: string | ((get: GetAtomResult) => string)
+    queriedTables: ReadonlyArray<string>
+    bindValues?: Bindable
   }) {
-    super(baseProps)
+    super()
+
+    // TODO don't even create a thunk if query string is static
+    const queryString$ = dbGraph.makeThunk(
+      (get, addDebugInfo, { rootOtelContext }, otelContext) => {
+        if (typeof genQueryString === 'function') {
+          const queryString = genQueryString(makeGetAtomResult(get, otelContext ?? rootOtelContext))
+          addDebugInfo({ _tag: 'js', label: `${label}:queryString`, query: queryString })
+          return queryString
+        } else {
+          return genQueryString
+        }
+      },
+      { label: `${label}:queryString`, meta: { liveStoreThunkType: 'sqlQueryString' } },
+    )
 
     this.queryString$ = queryString$
+
+    // TODO come up with different way to handle labels
+    // label = label ?? `sql(${queryString$.computeResult()})`
+
+    this.label = label ?? `sql(${genQueryString.toString()})`
+    // span.updateName(`querySQL:${label}`)
+
+    const queryLabel = `${label}:results`
+    // const queryLabel = `${label}:results` + (this.temporaryQueries ? ':temp' : '')
+
+    const results$ = dbGraph.makeThunk<ReadonlyArray<Row>>(
+      (get, addDebugInfo, { store, otelTracer, rootOtelContext }, otelContext) =>
+        otelTracer.startActiveSpan(
+          'sql:', // NOTE span name will be overridden further down
+          {},
+          otelContext ?? rootOtelContext,
+          (span) => {
+            try {
+              const otelContext = otel.trace.setSpan(otel.context.active(), span)
+
+              // Establish a reactive dependency on the tables used in the query
+              for (const tableName of queriedTables) {
+                const tableRef = store.tableRefs[tableName] ?? shouldNeverHappen(`No table ref found for ${tableName}`)
+                get(tableRef, otelContext)
+              }
+              const sqlString = get(queryString$, 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)
+              addDebugInfo({ _tag: 'sql', label: label ?? '', query: sqlString })
+
+              return results
+            } finally {
+              span.end()
+            }
+          },
+        ),
+      { label: queryLabel },
+    )
+
+    // this.queryString$ = queryString$
+    // this.results$ = results$
+    // this.payload = payload
+
     this.results$ = results$
   }
 
@@ -36,30 +123,34 @@ export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase {
    * Returns a new reactive query that contains the result of
    * running an arbitrary JS computation on the results of this SQL query.
    */
-  pipe = <U>(f: (result: Row[], get: GetAtom) => U): LiveStoreJSQuery<U> =>
-    this.store.queryJS(
-      (get) => {
-        const results = get(this.results$)
-        return f(results, get)
-      },
-      {
-        componentKey: this.componentKey,
-        label: `${this.label}:js`,
-        otelContext: this.otelContext,
+  pipe = <U>(fn: (result: ReadonlyArray<Row>, 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(),
+    })
 
   /** 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$)
+  }
 }