@livestore/livestore 0.3.0-dev.5 → 0.3.0-dev.50

package/src/live-queries/client-document-get-query.ts

@@ -0,0 +1,52 @@
+import type { PreparedBindValues } from '@livestore/common'
+import { SessionIdSymbol } from '@livestore/common'
+import { State } from '@livestore/common/schema'
+import { shouldNeverHappen } from '@livestore/utils'
+import type * as otel from '@opentelemetry/api'
+
+import type { ReactivityGraphContext } from './base-class.js'
+
+export const rowQueryLabel = (
+  table: State.SQLite.ClientDocumentTableDef.Any,
+  id: string | SessionIdSymbol | undefined,
+) => `${table.sqliteDef.name}.get:${id === undefined ? table.default.id : id === SessionIdSymbol ? 'sessionId' : id}`
+
+export const makeExecBeforeFirstRun =
+  ({
+    id,
+    explicitDefaultValues,
+    table,
+    otelContext: otelContext_,
+  }: {
+    id?: string | SessionIdSymbol
+    explicitDefaultValues?: any
+    table: State.SQLite.TableDefBase
+    otelContext: otel.Context | undefined
+  }) =>
+  ({ store }: ReactivityGraphContext) => {
+    if (State.SQLite.tableIsClientDocumentTable(table) === false) {
+      return shouldNeverHappen(
+        `Cannot insert row for table "${table.sqliteDef.name}" which does not have 'deriveEvents: true' set`,
+      )
+    }
+
+    const otelContext = otelContext_ ?? store.otel.queriesSpanContext
+
+    const idVal = id === SessionIdSymbol ? store.sessionId : id!
+    const rowExists =
+      store.sqliteDbWrapper.select(
+        `SELECT 1 FROM '${table.sqliteDef.name}' WHERE id = ?`,
+        [idVal] as any as PreparedBindValues,
+        { otelContext },
+      ).length === 1
+
+    if (rowExists) return
+
+    // It's important that we only commit 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.commit(
+      { otelContext, skipRefresh: true, label: `${table.sqliteDef.name}.set:${idVal}` },
+      table.set(explicitDefaultValues, idVal as TODO),
+    )
+  }

package/src/live-queries/computed.ts

@@ -1,68 +1,80 @@
-import type { QueryInfo } from '@livestore/common'
+import { getDurationMsFromSpan } from '@livestore/common'
 import * as otel from '@opentelemetry/api'
 
-import { globalReactivityGraph } from '../global-state.js'
 import type { Thunk } from '../reactive.js'
 import type { 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 { isValidFunctionString } from '../utils/function-string.js'
+import type { DepKey, GetAtomResult, LiveQueryDef, ReactivityGraph, ReactivityGraphContext } from './base-class.js'
+import { depsToString, LiveStoreQueryBase, makeGetAtomResult, withRCMap } from './base-class.js'
 
-export const computed = <TResult, TQueryInfo extends QueryInfo = QueryInfo.None>(
+export const computed = <TResult>(
   fn: (get: GetAtomResult) => TResult,
   options?: {
-    label: string
-    reactivityGraph?: ReactivityGraph
-    queryInfo?: TQueryInfo
+    label?: string
+    deps?: DepKey
   },
-): LiveQuery<TResult, TQueryInfo> =>
-  new LiveStoreComputedQuery<TResult, TQueryInfo>({
-    fn,
+): LiveQueryDef<TResult> => {
+  const hash = options?.deps ? depsToString(options.deps) : fn.toString()
+  if (isValidFunctionString(hash)._tag === 'invalid') {
+    throw new Error(`On Expo/React Native, computed queries must provide a \`deps\` option`)
+  }
+
+  const def: LiveQueryDef.Any = {
+    _tag: 'def',
+    make: withRCMap(hash, (ctx, _otelContext) => {
+      // TODO onDestroy
+      return new LiveStoreComputedQuery<TResult>({
+        fn,
+        label: options?.label ?? fn.toString(),
+        reactivityGraph: ctx.reactivityGraph.deref()!,
+        def,
+      })
+    }),
     label: options?.label ?? fn.toString(),
-    reactivityGraph: options?.reactivityGraph,
-    queryInfo: options?.queryInfo,
-  })
-
-export class LiveStoreComputedQuery<TResult, TQueryInfo extends QueryInfo = QueryInfo.None> extends LiveStoreQueryBase<
-  TResult,
-  TQueryInfo
-> {
+    // 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
+    // NOTE `fn.toString()` doesn't work in Expo as it always produces `[native code]`
+    hash,
+  }
+
+  return def
+}
+
+export class LiveStoreComputedQuery<TResult> extends LiveStoreQueryBase<TResult> {
   _tag: 'computed' = 'computed'
 
   /** A reactive thunk representing the query results */
-  results$: Thunk<TResult, QueryContext, RefreshReason>
+  results$: Thunk<TResult, ReactivityGraphContext, RefreshReason>
 
   label: string
 
-  protected reactivityGraph: ReactivityGraph
-
-  queryInfo: TQueryInfo
+  reactivityGraph: ReactivityGraph
+  def: LiveQueryDef<TResult>
 
   constructor({
     fn,
     label,
     reactivityGraph,
-    queryInfo,
+    def,
   }: {
     label: string
     fn: (get: GetAtomResult) => TResult
-    reactivityGraph?: ReactivityGraph
-    queryInfo?: TQueryInfo
+    reactivityGraph: ReactivityGraph
+    def: LiveQueryDef<TResult>
   }) {
     super()
 
     this.label = label
-
-    this.reactivityGraph = reactivityGraph ?? globalReactivityGraph
-    this.queryInfo = queryInfo ?? ({ _tag: 'None' } as TQueryInfo)
+    this.reactivityGraph = reactivityGraph
+    this.def = def
 
     const queryLabel = `${label}:results`
 
     this.results$ = this.reactivityGraph.makeThunk(
-      (get, setDebugInfo, { otelTracer, rootOtelContext }, otelContext) =>
-        otelTracer.startActiveSpan(`js:${label}`, {}, otelContext ?? rootOtelContext, (span) => {
+      (get, setDebugInfo, ctx, otelContext) =>
+        ctx.otelTracer.startActiveSpan(`js:${label}`, {}, otelContext ?? ctx.rootOtelContext, (span) => {
           const otelContext = otel.trace.setSpan(otel.context.active(), span)
-          const res = fn(makeGetAtomResult(get, otelContext))
+          const res = fn(makeGetAtomResult(get, ctx, otelContext, this.dependencyQueriesRef))
 
           span.end()
 
@@ -79,6 +91,12 @@ export class LiveStoreComputedQuery<TResult, TQueryInfo extends QueryInfo = Quer
   }
 
   destroy = () => {
+    this.isDestroyed = true
+
     this.reactivityGraph.destroyNode(this.results$)
+
+    for (const query of this.dependencyQueriesRef) {
+      query.deref()
+    }
   }
 }

package/src/live-queries/db-query.test.ts

@@ -0,0 +1,192 @@
+import { sql } from '@livestore/common'
+import { rawSqlEvent } from '@livestore/common/schema'
+import { Effect, ReadonlyRecord, Schema } from '@livestore/utils/effect'
+import { Vitest } from '@livestore/utils-dev/node-vitest'
+import * as otel from '@opentelemetry/api'
+import { BasicTracerProvider, InMemorySpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'
+import { expect } from 'vitest'
+
+import * as RG from '../reactive.js'
+import { makeTodoMvc, tables } from '../utils/tests/fixture.js'
+import { getSimplifiedRootSpan } from '../utils/tests/otel.js'
+import { computed } from './computed.js'
+import { queryDb } from './db-query.js'
+
+/*
+TODO write tests for:
+
+- sql queries without and with `map` (incl. callback and schemas)
+- optional and explicit `queriedTables` argument
+*/
+
+Vitest.describe('otel', () => {
+  const mapAttributes = (attributes: otel.Attributes) => {
+    return ReadonlyRecord.map(attributes, (val, key) => {
+      if (key === 'code.stacktrace') {
+        return '<STACKTRACE>'
+      }
+      return val
+    })
+  }
+
+  const makeQuery = Effect.gen(function* () {
+    const exporter = new InMemorySpanExporter()
+
+    RG.__resetIds()
+
+    const provider = new BasicTracerProvider({
+      spanProcessors: [new SimpleSpanProcessor(exporter)],
+    })
+
+    const otelTracer = provider.getTracer('test')
+
+    const span = otelTracer.startSpan('test-root')
+    const otelContext = otel.trace.setSpan(otel.context.active(), span)
+
+    const store = yield* makeTodoMvc({ otelTracer, otelContext })
+
+    return {
+      store,
+      otelTracer,
+      exporter,
+      span,
+      provider,
+    }
+  })
+
+  Vitest.scopedLive('otel', () =>
+    Effect.gen(function* () {
+      const { store, exporter, span, provider } = yield* makeQuery
+
+      const query$ = queryDb({
+        query: `select * from todos`,
+        schema: Schema.Array(tables.todos.rowSchema),
+        queriedTables: new Set(['todos']),
+      })
+      expect(store.query(query$)).toMatchInlineSnapshot('[]')
+
+      store.commit(rawSqlEvent({ sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)` }))
+
+      expect(store.query(query$)).toMatchInlineSnapshot(`
+      [
+        {
+          "completed": false,
+          "id": "t1",
+          "text": "buy milk",
+        },
+      ]
+    `)
+
+      span.end()
+
+      return { exporter, provider }
+    }).pipe(
+      Effect.scoped,
+      Effect.tap(({ exporter, provider }) =>
+        Effect.promise(async () => {
+          await provider.forceFlush()
+          expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchSnapshot()
+          await provider.shutdown()
+        }),
+      ),
+    ),
+  )
+
+  Vitest.scopedLive('with thunks', () =>
+    Effect.gen(function* () {
+      const { store, exporter, span, provider } = yield* makeQuery
+
+      const defaultTodo = { id: '', text: '', completed: false }
+
+      const filter = computed(() => `where completed = 0`, { label: 'where-filter' })
+      const query$ = queryDb(
+        (get) => ({
+          query: `select * from todos ${get(filter)}`,
+          schema: Schema.Array(tables.todos.rowSchema).pipe(Schema.headOrElse(() => defaultTodo)),
+        }),
+        { label: 'all todos' },
+      )
+
+      expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+
+      expect(store.query(query$)).toMatchInlineSnapshot(`
+      {
+        "completed": false,
+        "id": "",
+        "text": "",
+      }
+    `)
+
+      expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+
+      store.commit(rawSqlEvent({ sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)` }))
+
+      expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+
+      expect(store.query(query$)).toMatchInlineSnapshot(`
+      {
+        "completed": false,
+        "id": "t1",
+        "text": "buy milk",
+      }
+    `)
+
+      expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+
+      span.end()
+
+      return { exporter, provider }
+    }).pipe(
+      Effect.scoped,
+      Effect.tap(({ exporter, provider }) =>
+        Effect.promise(async () => {
+          await provider.forceFlush()
+          expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchSnapshot()
+          await provider.shutdown()
+        }),
+      ),
+    ),
+  )
+
+  Vitest.scopedLive('with thunks with query builder and without labels', () =>
+    Effect.gen(function* () {
+      const { store, exporter, span, provider } = yield* makeQuery
+
+      const defaultTodo = { id: '', text: '', completed: false }
+
+      const filter = computed(() => ({ completed: false }))
+      const query$ = queryDb((get) => tables.todos.where(get(filter)).first({ fallback: () => defaultTodo }))
+
+      expect(store.query(query$)).toMatchInlineSnapshot(`
+      {
+        "completed": false,
+        "id": "",
+        "text": "",
+      }
+    `)
+
+      store.commit(rawSqlEvent({ sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)` }))
+
+      expect(store.query(query$)).toMatchInlineSnapshot(`
+      {
+        "completed": false,
+        "id": "t1",
+        "text": "buy milk",
+      }
+    `)
+
+      span.end()
+
+      return { exporter, provider }
+    }).pipe(
+      Effect.scoped,
+      Effect.tap(({ exporter, provider }) =>
+        Effect.promise(async () => {
+          await provider.forceFlush()
+          expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchSnapshot()
+          await provider.shutdown()
+        }),
+      ),
+    ),
+  )
+})