@livestore/livestore 0.0.21 → 0.0.22

package/src/reactiveQueries/base-class.ts

@@ -1,8 +1,9 @@
 import type * as otel from '@opentelemetry/api'
 
-import type { StackInfo } from '../react/utils/extractStackInfoFromStackTrace.js'
-import type { Atom, GetAtom, Thunk } from '../reactive.js'
-import { type DbContext } from './graph.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
@@ -13,19 +14,15 @@ export interface ILiveStoreQuery<TResult> {
   id: number
 
   /** A reactive thunk representing the query results */
-  results$: Thunk<TResult, DbContext>
+  results$: Thunk<TResult, DbContext, RefreshReason>
 
   label: string
 
-  run: (otelContext?: otel.Context) => TResult
+  run: (otelContext?: otel.Context, debugRefreshReason?: RefreshReasonWithGenericReasons<RefreshReason>) => TResult
 
   destroy(): void
 
-  activeSubscriptions: Set<SubscriberInfo>
-}
-
-export type SubscriberInfo = {
-  stack: StackInfo[]
+  activeSubscriptions: Set<StackInfo>
 }
 
 export abstract class LiveStoreQueryBase<TResult> implements ILiveStoreQuery<TResult> {
@@ -34,9 +31,9 @@ export abstract class LiveStoreQueryBase<TResult> implements ILiveStoreQuery<TRe
   /** Human-readable label for the query for debugging */
   abstract label: string
 
-  abstract results$: Thunk<TResult, DbContext>
+  abstract results$: Thunk<TResult, DbContext, RefreshReason>
 
-  activeSubscriptions: Set<SubscriberInfo> = new Set()
+  activeSubscriptions: Set<StackInfo> = new Set()
 
   get runs() {
     return this.results$.recomputations
@@ -44,22 +41,26 @@ export abstract class LiveStoreQueryBase<TResult> implements ILiveStoreQuery<TRe
 
   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, debugRefreshReason?: RefreshReasonWithGenericReasons<RefreshReason>): TResult =>
+    this.results$.computeResult(otelContext, debugRefreshReason)
 
-  run = (otelContext?: otel.Context): TResult => this.results$.computeResult(otelContext)
-
-  runAndDestroy = (otelContext?: otel.Context): TResult => {
-    const result = this.run(otelContext)
+  runAndDestroy = (
+    otelContext?: otel.Context,
+    debugRefreshReason?: RefreshReasonWithGenericReasons<RefreshReason>,
+  ): TResult => {
+    const result = this.run(otelContext, debugRefreshReason)
     this.destroy()
     return result
   }
+
+  subscribe = (
+    onNewValue: (value: TResult) => void,
+    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> | LiveStoreJSQuery<T>) => T
+export type GetAtomResult = <T>(atom: Atom<T, any, RefreshReason> | LiveStoreJSQuery<T>) => T
 
 export const makeGetAtomResult = (get: GetAtom, otelContext: otel.Context) => {
   const getAtom: GetAtomResult = (atom) => {

package/src/reactiveQueries/graphql.ts

@@ -3,8 +3,9 @@ import { assertNever, shouldNeverHappen } from '@livestore/utils'
 import * as otel from '@opentelemetry/api'
 import * as graphql from 'graphql'
 
+import { getDurationMsFromSpan } from '../otel.js'
 import type { Thunk } from '../reactive.js'
-import { type BaseGraphQLContext, type Store } from '../store.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'
@@ -26,16 +27,16 @@ export class LiveStoreGraphQLQuery<
   document: DocumentNode<TResult, TVariableValues>
 
   /** A reactive thunk representing the query results */
-  results$: Thunk<TResult, DbContext>
+  results$: Thunk<TResult, DbContext, RefreshReason>
 
-  variableValues$: Thunk<TVariableValues, DbContext>
+  variableValues$: Thunk<TVariableValues, DbContext, RefreshReason>
 
   label: string
 
   constructor({
     document,
     label,
-    genVariableValues, // context,
+    genVariableValues,
   }: {
     document: DocumentNode<TResult, TVariableValues>
     genVariableValues: TVariableValues | ((get: GetAtomResult) => TVariableValues)
@@ -48,13 +49,9 @@ export class LiveStoreGraphQLQuery<
     this.label = labelWithDefault
     this.document = document
 
-    // 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) => {
+      (get, _setDebugInfo, { rootOtelContext }, otelContext) => {
         if (typeof genVariableValues === 'function') {
           return genVariableValues(makeGetAtomResult(get, otelContext ?? rootOtelContext))
         } else {
@@ -66,12 +63,11 @@ export class LiveStoreGraphQLQuery<
 
     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) => {
+      (get, setDebugInfo, { store, otelTracer, rootOtelContext }, otelContext) => {
         const variableValues = get(variableValues$)
-        const { result, queriedTables } = this.queryOnce({
+        const { result, queriedTables, durationMs } = this.queryOnce({
           document,
           variableValues,
           otelContext: otelContext ?? rootOtelContext,
@@ -86,7 +82,7 @@ export class LiveStoreGraphQLQuery<
           get(tableRef!)
         }
 
-        addDebugInfo({ _tag: 'graphql', label: resultsLabel, query: graphql.print(document) })
+        setDebugInfo({ _tag: 'graphql', label: resultsLabel, query: graphql.print(document), durationMs })
 
         return result
       },
@@ -122,8 +118,6 @@ export class LiveStoreGraphQLQuery<
     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 =
@@ -132,33 +126,37 @@ export class LiveStoreGraphQLQuery<
     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))
+      span.setAttribute('graphql.variables', JSON.stringify(variableValues))
+      span.setAttribute('graphql.query', graphql.print(document))
 
-        context.queriedTables.clear()
+      context.queriedTables.clear()
 
-        context.otelContext = otel.trace.setSpan(otel.context.active(), span)
+      context.otelContext = otel.trace.setSpan(otel.context.active(), span)
 
-        const res = graphql.executeSync({
-          document,
-          contextValue: context,
-          schema: schema,
-          variableValues,
-        })
+      const res = graphql.executeSync({
+        document,
+        contextValue: context,
+        schema: schema,
+        variableValues,
+      })
 
-        // TODO track number of nested SQL queries via Otel + debug info
+      // 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)
-        }
+      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()) }
-      } finally {
-        span.end()
+      return {
+        result: res.data as unknown as TResult,
+        queriedTables: Array.from(context.queriedTables.values()),
+        durationMs,
       }
     })
   }

package/src/reactiveQueries/js.ts

@@ -1,6 +1,8 @@
 import * as otel from '@opentelemetry/api'
 
+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'
@@ -12,7 +14,7 @@ export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase<TResult> {
   _tag: 'js' = 'js'
 
   /** A reactive thunk representing the query results */
-  results$: Thunk<TResult, DbContext>
+  results$: Thunk<TResult, DbContext, RefreshReason>
 
   label: string
 
@@ -37,16 +39,18 @@ export class LiveStoreJSQuery<TResult> extends LiveStoreQueryBase<TResult> {
     const queryLabel = `${label}:results`
 
     this.results$ = dbGraph.makeThunk(
-      (get, addDebugInfo, { otelTracer, rootOtelContext }, otelContext) =>
+      (get, setDebugInfo, { 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()
-          }
+          const otelContext = otel.trace.setSpan(otel.context.active(), span)
+          const res = fn(makeGetAtomResult(get, otelContext))
+
+          span.end()
+
+          const durationMs = getDurationMsFromSpan(span)
+
+          setDebugInfo({ _tag: 'js', label, query: fn.toString(), durationMs })
+
+          return res
         }),
       { label: queryLabel, meta: { liveStoreThunkType: 'jsResults' } },
     )

package/src/reactiveQueries/sql.ts

@@ -1,7 +1,9 @@
 import { shouldNeverHappen } from '@livestore/utils'
 import * as otel from '@opentelemetry/api'
 
+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'
@@ -11,17 +13,22 @@ import { LiveStoreJSQuery } from './js.js'
 
 export const querySQL = <Row>(
   query: string | ((get: GetAtomResult) => string),
-  options: {
-    queriedTables: ReadonlyArray<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,
+    label: options?.label,
     genQueryString: query,
-    queriedTables: options.queriedTables,
-    bindValues: options.bindValues,
+    queriedTables: options?.queriedTables,
+    bindValues: options?.bindValues,
   })
 
 /* An object encapsulating a reactive SQL query */
@@ -29,10 +36,10 @@ export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase<ReadonlyArray<Row
   _tag: 'sql' = 'sql'
 
   /** A reactive thunk representing the query text */
-  queryString$: Thunk<string, DbContext>
+  queryString$: Thunk<string, DbContext, RefreshReason>
 
   /** A reactive thunk representing the query results */
-  results$: Thunk<ReadonlyArray<Row>, DbContext>
+  results$: Thunk<ReadonlyArray<Row>, DbContext, RefreshReason>
 
   label: string
 
@@ -44,19 +51,22 @@ export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase<ReadonlyArray<Row
   }: {
     label?: string
     genQueryString: string | ((get: GetAtomResult) => string)
-    queriedTables: ReadonlyArray<string>
+    queriedTables?: ReadonlyArray<string>
     bindValues?: Bindable
   }) {
     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, addDebugInfo, { rootOtelContext }, otelContext) => {
+      (get, setDebugInfo, { rootOtelContext }, otelContext) => {
         if (typeof genQueryString === 'function') {
+          const startMs = performance.now()
           const queryString = genQueryString(makeGetAtomResult(get, otelContext ?? rootOtelContext))
-          addDebugInfo({ _tag: 'js', label: `${label}:queryString`, query: queryString })
+          const durationMs = performance.now() - startMs
+          setDebugInfo({ _tag: 'js', label: `${label}:queryString`, query: queryString, durationMs })
           return queryString
         } else {
           return genQueryString
@@ -67,57 +77,54 @@ export class LiveStoreSQLQuery<Row> extends LiveStoreQueryBase<ReadonlyArray<Row
 
     this.queryString$ = queryString$
 
-    // TODO come up with different way to handle labels
-    // label = label ?? `sql(${queryString$.computeResult()})`
-
-    this.label = `sql(${label})`
-    // span.updateName(`querySQL:${label}`)
-
     const queryLabel = `${label}:results`
-    // const queryLabel = `${label}:results` + (this.temporaryQueries ? ':temp' : '')
+
+    const queriedTablesRef = { current: queriedTables }
 
     const results$ = dbGraph.makeThunk<ReadonlyArray<Row>>(
-      (get, addDebugInfo, { store, otelTracer, rootOtelContext }, otelContext) =>
+      (get, setDebugInfo, { store, otelTracer, rootOtelContext }, otelContext) =>
         otelTracer.startActiveSpan(
-          'sql:', // NOTE span name will be overridden further down
+          '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()
+            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.queryString$ = queryString$
-    // this.results$ = results$
-    // this.payload = payload
-
     this.results$ = results$
   }