@livestore/livestore 0.0.25 → 0.0.28

package/src/index.ts

@@ -3,33 +3,34 @@ export type { LiveStoreQuery, BaseGraphQLContext, QueryResult, QueryDebugInfo, R
 
 export type { QueryDefinition, LiveStoreCreateStoreOptions, LiveStoreContext } from './effect/LiveStore.js'
 
-export {
-  defineComponentStateSchema,
-  defineAction,
-  defineActions,
-  defineTables,
-  defineMaterializedViews,
-  makeSchema,
-} from './schema.js'
 export { InMemoryDatabase, type DebugInfo, emptyDebugInfo } from './inMemoryDatabase.js'
+
 export type { Storage, StorageType, StorageInit } from './storage/index.js'
+
 export type { GetAtom, AtomDebugInfo, RefreshDebugInfo, SerializedAtom, Atom } from './reactive.js'
 export { LiveStoreJSQuery, queryJS } from './reactiveQueries/js.js'
 export { LiveStoreSQLQuery, querySQL } from './reactiveQueries/sql.js'
 export { LiveStoreGraphQLQuery, queryGraphQL } from './reactiveQueries/graphql.js'
 export { type GetAtomResult } from './reactiveQueries/base-class.js'
-export { dbGraph } from './reactiveQueries/graph.js'
 
-export { labelForKey } from './componentKey.js'
-export type { ComponentKey } from './componentKey.js'
-export type { Schema, GetActionArgs, GetApplyEventArgs, Index, ActionDefinition, ActionDefinitions } from './schema.js'
+export { dbGraph } from './global-state.js'
 
-export { SqliteAst, SqliteDsl } from 'effect-db-schema'
+export { type RowResult, type RowResultEncoded, type RowQueryArgs, rowQuery } from './row-query.js'
 
-import type { SqliteAst } from 'effect-db-schema'
-export type TableDefinition = SqliteAst.Table
+export { defineAction, defineActions, makeSchema, DbSchema } from './schema/index.js'
 
-export { SqliteDsl as DbSchema } from 'effect-db-schema'
+export type {
+  LiveStoreSchema,
+  InputSchema,
+  GetActionArgs,
+  GetApplyEventArgs,
+  ActionDefinition,
+  ActionDefinitions,
+  SQLWriteStatement,
+  SchemaMetaRow,
+} from './schema/index.js'
+
+export { SqliteAst, SqliteDsl } from 'effect-db-schema'
 
-export { prepareBindValues, sql, type Bindable, type PreparedBindValues } from './util.js'
+export { prepareBindValues, sql, type Bindable, type PreparedBindValues } from './utils/util.js'
 export { isEqual } from 'lodash-es'

package/src/migrations.ts

@@ -1,12 +1,14 @@
+import { Schema as EffectSchema } from '@livestore/utils/effect'
 import type * as otel from '@opentelemetry/api'
 import { SqliteAst } from 'effect-db-schema'
-import { memoize, omit } from 'lodash-es'
+import { memoize } from 'lodash-es'
 
+import { dynamicallyRegisteredTables } from './global-state.js'
 import type { InMemoryDatabase } from './index.js'
-import type { Schema, SchemaMetaRow } from './schema.js'
-import { componentStateTables, SCHEMA_META_TABLE, systemTables } from './schema.js'
-import type { PreparedBindValues } from './util.js'
-import { sql } from './util.js'
+import type { LiveStoreSchema, SchemaMetaRow } from './schema/index.js'
+import { SCHEMA_META_TABLE, systemTables } from './schema/index.js'
+import type { PreparedBindValues } from './utils/util.js'
+import { sql } from './utils/util.js'
 
 const getMemoizedTimestamp = memoize(() => new Date().toISOString())
 
@@ -18,7 +20,7 @@ export const migrateDb = ({
 }: {
   db: InMemoryDatabase
   otelContext: otel.Context
-  schema: Schema
+  schema: LiveStoreSchema
 }) => {
   db.execute(
     // TODO use schema migration definition from schema.ts instead
@@ -34,16 +36,18 @@ export const migrateDb = ({
     schemaMetaRows.map(({ tableName, schemaHash }) => [tableName, schemaHash]),
   )
 
-  const tableDefs = {
+  const tableDefs = new Set([
     // NOTE it's important the `SCHEMA_META_TABLE` comes first since we're writing to it below
-    [SCHEMA_META_TABLE]: systemTables[SCHEMA_META_TABLE],
-    ...omit(schema.tables, [SCHEMA_META_TABLE]),
-    ...componentStateTables,
-  }
-
-  for (const [tableName, tableDef] of Object.entries(tableDefs)) {
+    ...systemTables,
+    ...Array.from(schema.tables.values()).filter((_) => _.schema.name !== SCHEMA_META_TABLE),
+    ...dynamicallyRegisteredTables.values(),
+  ])
+
+  for (const tableDef of tableDefs) {
+    const tableAst = tableDef.schema.ast
+    const tableName = tableAst.name
     const dbSchemaHash = dbSchemaHashByTable[tableName]
-    const schemaHash = SqliteAst.hash(tableDef)
+    const schemaHash = SqliteAst.hash(tableAst)
     if (schemaHash !== dbSchemaHash) {
       if (import.meta.env.VITE_LIVESTORE_SKIP_MIGRATIONS) {
         console.log(
@@ -54,7 +58,7 @@ export const migrateDb = ({
           `Schema hash mismatch for table '${tableName}' (DB: ${dbSchemaHash}, expected: ${schemaHash}), migrating table...`,
         )
 
-        migrateTable({ db, tableDef, otelContext, schemaHash })
+        migrateTable({ db, tableAst, otelContext, schemaHash })
       }
     }
   }
@@ -62,24 +66,24 @@ export const migrateDb = ({
 
 export const migrateTable = ({
   db,
-  tableDef,
+  tableAst,
   otelContext,
   schemaHash,
 }: {
   db: InMemoryDatabase
-  tableDef: SqliteAst.Table
+  tableAst: SqliteAst.Table
   otelContext: otel.Context
   schemaHash: number
 }) => {
-  console.log(`Migrating table '${tableDef.name}'...`)
-  const tableName = tableDef.name
-  const columnSpec = makeColumnSpec(tableDef)
+  console.log(`Migrating table '${tableAst.name}'...`)
+  const tableName = tableAst.name
+  const columnSpec = makeColumnSpec(tableAst)
 
   // TODO need to possibly handle cascading deletes due to foreign keys
   db.execute(sql`drop table if exists ${tableName}`, undefined, [], { otelContext })
   db.execute(sql`create table if not exists ${tableName} (${columnSpec});`, undefined, [], { otelContext })
 
-  for (const index of tableDef.indexes) {
+  for (const index of tableAst.indexes) {
     db.execute(createIndexFromDefinition(tableName, index), undefined, [], { otelContext })
   }
 
@@ -100,9 +104,9 @@ const createIndexFromDefinition = (tableName: string, index: SqliteAst.Index) =>
   return sql`create ${uniqueStr} index ${index.name} on ${tableName} (${index.columns.join(', ')})`
 }
 
-const makeColumnSpec = (tableDef: SqliteAst.Table) => {
-  const primaryKeys = tableDef.columns.filter((_) => _.primaryKey).map((_) => _.name)
-  const columnDefStrs = tableDef.columns.map(toSqliteColumnSpec)
+const makeColumnSpec = (tableAst: SqliteAst.Table) => {
+  const primaryKeys = tableAst.columns.filter((_) => _.primaryKey).map((_) => _.name)
+  const columnDefStrs = tableAst.columns.map(toSqliteColumnSpec)
   if (primaryKeys.length > 0) {
     columnDefStrs.push(`PRIMARY KEY (${primaryKeys.join(', ')})`)
   }
@@ -110,16 +114,18 @@ const makeColumnSpec = (tableDef: SqliteAst.Table) => {
   return columnDefStrs.join(', ')
 }
 
+/** NOTE primary keys are applied on a table level not on a column level to account for multi-column primary keys */
 const toSqliteColumnSpec = (column: SqliteAst.Column) => {
-  const columnType = column.type._tag
-  // const primaryKey = column.primaryKey ? 'primary key' : ''
-  const nullable = column.nullable === false ? 'not null' : ''
-  const defaultValue =
-    column.default === undefined
-      ? ''
-      : columnType === 'text'
-        ? `default '${column.default}'`
-        : `default ${column.default}`
-
-  return `${column.name} ${columnType} ${nullable} ${defaultValue}`
+  const columnTypeStr = column.type._tag
+  const nullableStr = column.nullable === false ? 'not null' : ''
+  const defaultValueStr = (() => {
+    if (column.default === undefined) return ''
+
+    const encodeValue = EffectSchema.encodeSync(column.codec)
+    const encodedDefaultValue = encodeValue(column.default ?? null)
+
+    return columnTypeStr === 'text' ? `default '${encodedDefaultValue}'` : `default ${encodedDefaultValue}`
+  })()
+
+  return `${column.name} ${columnTypeStr} ${nullableStr} ${defaultValueStr}`
 }

package/src/react/LiveStoreProvider.tsx

@@ -6,7 +6,7 @@ import initSqlite3Wasm from 'sqlite-esm'
 // TODO refactor so the `react` module doesn't depend on `effect` module
 import type { LiveStoreContext as StoreContext_, LiveStoreCreateStoreOptions } from '../effect/LiveStore.js'
 import type { InMemoryDatabase } from '../inMemoryDatabase.js'
-import type { Schema } from '../schema.js'
+import type { LiveStoreSchema } from '../schema/index.js'
 import type { StorageInit } from '../storage/index.js'
 import type { BaseGraphQLContext, GraphQLOptions } from '../store.js'
 import { createStore } from '../store.js'
@@ -20,7 +20,7 @@ const sqlite3Promise = initSqlite3Wasm({
 })
 
 interface LiveStoreProviderProps<GraphQLContext> {
-  schema: Schema
+  schema: LiveStoreSchema
   loadStorage: () => StorageInit | Promise<StorageInit>
   boot?: (db: InMemoryDatabase, parentSpan: otel.Span) => unknown | Promise<unknown>
   graphQLOptions?: GraphQLOptions<GraphQLContext>

package/src/react/index.ts

@@ -1,17 +1,15 @@
-export type {
-  Setters,
-  ComponentKeyConfig,
-  QueryDefinitions,
-  ComponentColumns,
-  GetStateType,
-  GetStateTypeEncoded,
-} from './useComponentState.js'
 export { LiveStoreContext, useStore } from './LiveStoreContext.js'
 export { LiveStoreProvider } from './LiveStoreProvider.js'
-export { useComponentState } from './useComponentState.js'
 export { useQuery } from './useQuery.js'
 export { useTemporaryQuery } from './useTemporaryQuery.js'
 export { useStackInfo } from './utils/stack-info.js'
+export {
+  useRow,
+  type StateSetters,
+  type SetStateAction,
+  type Dispatch,
+  type UseRowResult as UseStateResult,
+} from './useRow.js'
 
 // Needed to make TS happy
 export type { TypedDocumentNode } from '@graphql-typed-document-node/core'

package/src/react/useQuery.ts

@@ -6,6 +6,7 @@ import type { ILiveStoreQuery } from '../reactiveQueries/base-class.js'
 import { useStore } from './LiveStoreContext.js'
 import { extractStackInfoFromStackTrace, originalStackLimit } from './utils/stack-info.js'
 import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInput.js'
+
 /**
  * This is needed because the `React.useMemo` call below, can sometimes be called multiple times 🤷,
  * so we need to "cache" the fact that we've already started a span for this component.
@@ -13,7 +14,12 @@ import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInp
  */
 const spanAlreadyStartedCache = new Map<ILiveStoreQuery<any>, { span: otel.Span; otelContext: otel.Context }>()
 
-export const useQuery = <TResult>(query: ILiveStoreQuery<TResult>): TResult => {
+export const useQuery = <TResult>(query: ILiveStoreQuery<TResult>): TResult => useQueryRef(query).current
+
+export const useQueryRef = <TResult>(
+  query: ILiveStoreQuery<TResult>,
+  parentOtelContext?: otel.Context,
+): React.MutableRefObject<TResult> => {
   const { store } = useStore()
 
   const stackInfo = React.useMemo(() => {
@@ -32,7 +38,7 @@ export const useQuery = <TResult>(query: ILiveStoreQuery<TResult>): TResult => {
     const span = store.otel.tracer.startSpan(
       `LiveStore:useQuery:${query.label}`,
       { attributes: { label: query.label, stackInfo: JSON.stringify(stackInfo) } },
-      store.otel.queriesSpanContext,
+      parentOtelContext ?? store.otel.queriesSpanContext,
     )
 
     const otelContext = otel.trace.setSpan(otel.context.active(), span)
@@ -40,7 +46,7 @@ export const useQuery = <TResult>(query: ILiveStoreQuery<TResult>): TResult => {
     spanAlreadyStartedCache.set(query, { span, otelContext })
 
     return { span, otelContext }
-  }, [query, stackInfo, store.otel.queriesSpanContext, store.otel.tracer])
+  }, [parentOtelContext, query, stackInfo, store.otel.queriesSpanContext, store.otel.tracer])
 
   const initialResult = React.useMemo(
     () =>
@@ -86,5 +92,5 @@ export const useQuery = <TResult>(query: ILiveStoreQuery<TResult>): TResult => {
     }
   }, [stackInfo, query, setValue, store, valueRef, otelContext, span])
 
-  return valueRef.current
+  return valueRef
 }

package/src/react/useRow.ts

@@ -0,0 +1,239 @@
+import { Schema } from '@livestore/utils/effect'
+import * as otel from '@opentelemetry/api'
+import type { SqliteDsl } from 'effect-db-schema'
+import { mapValues } from 'lodash-es'
+import React from 'react'
+
+import type { LiveStoreJSQuery } from '../reactiveQueries/js.js'
+import type { RowQueryArgs, RowResult } from '../row-query.js'
+import { rowQuery } from '../row-query.js'
+import type { DefaultSqliteTableDef, TableDef, TableOptions } from '../schema/table-def.js'
+import { useStore } from './LiveStoreContext.js'
+import { useQueryRef } from './useQuery.js'
+
+export type UseRowResult<TTableDef extends TableDef> = [
+  row: RowResult<TTableDef>,
+  setRow: StateSetters<TTableDef>,
+  query$: LiveStoreJSQuery<RowResult<TTableDef>>,
+]
+
+export type UseRowOptions<TTableDef extends TableDef> = {
+  defaultValues?: Partial<RowResult<TTableDef>>
+}
+
+/**
+ * Similar to `React.useState` but returns a tuple of `[row, setRow, query$]` for a given table where ...
+ *
+ *   - `row` is the current value of the row (fully decoded according to the table schema)
+ *   - `setRow` is a function that can be used to update the row (values will be encoded according to the table schema)
+ *   - `query$` is a `LiveStoreJSQuery` that e.g. can be used to subscribe to changes to the row
+ *
+ * If the table is a singleton table, `useRow` can be called without an `id` argument. Otherwise, the `id` argument is required.
+ */
+export const useRow: {
+  <TTableDef extends TableDef<DefaultSqliteTableDef, boolean, TableOptions & { isSingleton: true }>>(
+    table: TTableDef,
+  ): UseRowResult<TTableDef>
+  <TTableDef extends TableDef<DefaultSqliteTableDef, boolean, TableOptions & { isSingleton: false }>>(
+    table: TTableDef,
+    // TODO adjust so it works with arbitrary primary keys or unique constraints
+    id: string,
+    options?: UseRowOptions<TTableDef>,
+  ): UseRowResult<TTableDef>
+} = <TTableDef extends TableDef>(
+  table: TTableDef,
+  id?: string,
+  options?: UseRowOptions<TTableDef>,
+): UseRowResult<TTableDef> => {
+  const sqliteTableDef = table.schema
+  const { defaultValues } = options ?? {}
+  type TComponentState = SqliteDsl.FromColumns.RowDecoded<TTableDef['schema']['columns']>
+
+  const { store } = useStore()
+
+  const reactId = React.useId()
+
+  const { query$, otelContext } = React.useMemo(() => {
+    const cachedItem = rcCache.get(table, id ?? 'singleton')
+    if (cachedItem !== undefined) {
+      cachedItem.reactIds.add(reactId)
+      cachedItem.span.addEvent('new-subscriber', { reactId })
+
+      return {
+        query$: cachedItem.query$ as LiveStoreJSQuery<RowResult<TTableDef>>,
+        otelContext: cachedItem.otelContext,
+      }
+    }
+
+    const span = store.otel.tracer.startSpan(
+      `LiveStore:useState:${table.schema.name}${id === undefined ? '' : `:${id}`}`,
+      { attributes: { id } },
+      store.otel.queriesSpanContext,
+    )
+
+    const otelContext = otel.trace.setSpan(otel.context.active(), span)
+
+    const query$ = table.options.isSingleton
+      ? rowQuery({ table, store, otelContext, defaultValues } as RowQueryArgs<TTableDef>)
+      : rowQuery({ table, store, id, otelContext, defaultValues } as RowQueryArgs<TTableDef>)
+
+    rcCache.set(table, id ?? 'singleton', query$, reactId, otelContext, span)
+
+    return { query$, otelContext }
+  }, [table, id, reactId, store, defaultValues])
+
+  React.useEffect(
+    () => () => {
+      const cachedItem = rcCache.get(table, id ?? 'singleton')!
+
+      cachedItem.reactIds.delete(reactId)
+      if (cachedItem.reactIds.size === 0) {
+        rcCache.delete(cachedItem.query$)
+        cachedItem.query$.destroy()
+        cachedItem.span.end()
+      }
+    },
+    [table, id, reactId],
+  )
+
+  const query$Ref = useQueryRef(query$, otelContext)
+
+  const setState = React.useMemo<StateSetters<TTableDef>>(() => {
+    if (table.isSingleColumn) {
+      return (newValueOrFn: RowResult<TTableDef>) => {
+        const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current) : newValueOrFn
+        if (query$Ref.current === newValue) return
+
+        const encodedValue = Schema.encodeSync(sqliteTableDef.columns['value']!.type.codec)(newValue)
+
+        store.applyEvent('livestore.UpdateComponentState', {
+          tableName: sqliteTableDef.name,
+          columnNames: ['value'],
+          id,
+          bindValues: { ['value']: encodedValue },
+        })
+      }
+    } else {
+      const setState = // TODO: do we have a better type for the values that can go in SQLite?
+        mapValues(sqliteTableDef.columns, (column, columnName) => (newValueOrFn: any) => {
+          const newValue =
+            // @ts-expect-error TODO fix typing
+            typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current[columnName]) : newValueOrFn
+
+          // Don't update the state if it's the same as the value already seen in the component
+          // @ts-expect-error TODO fix typing
+          if (query$Ref.current[columnName] === newValue) return
+
+          const encodedValue = Schema.encodeSync(column.type.codec)(newValue)
+
+          store.applyEvent('livestore.UpdateComponentState', {
+            tableName: sqliteTableDef.name,
+            columnNames: [columnName],
+            id,
+            bindValues: { [columnName]: encodedValue },
+          })
+        })
+
+      setState.setMany = (columnValuesOrFn: Partial<TComponentState>) => {
+        const columnValues =
+          // @ts-expect-error TODO fix typing
+          typeof columnValuesOrFn === 'function' ? columnValuesOrFn(query$Ref.current) : columnValuesOrFn
+
+        // TODO use hashing instead
+        // Don't update the state if it's the same as the value already seen in the component
+        if (
+          // @ts-expect-error TODO fix typing
+          Object.entries(columnValues).every(([columnName, value]) => query$Ref.current[columnName] === value)
+        ) {
+          return
+        }
+
+        const columnNames = Object.keys(columnValues)
+        const bindValues = mapValues(columnValues, (value, columnName) =>
+          Schema.encodeSync(sqliteTableDef.columns[columnName]!.type.codec)(value),
+        )
+
+        store.applyEvent('livestore.UpdateComponentState', {
+          tableName: sqliteTableDef.name,
+          columnNames,
+          id,
+          bindValues,
+        })
+      }
+
+      return setState as any
+    }
+  }, [table.isSingleColumn, id, sqliteTableDef.columns, sqliteTableDef.name, store, query$Ref])
+
+  return [query$Ref.current, setState, query$]
+}
+
+export type Dispatch<A> = (action: A) => void
+export type SetStateAction<S> = S | ((previousValue: S) => S)
+
+export type StateSetters<TTableDef extends TableDef> = TTableDef['isSingleColumn'] extends true
+  ? Dispatch<SetStateAction<RowResult<TTableDef>>>
+  : {
+      [K in keyof RowResult<TTableDef>]: Dispatch<SetStateAction<RowResult<TTableDef>[K]>>
+    } & {
+      setMany: Dispatch<SetStateAction<Partial<RowResult<TTableDef>>>>
+    }
+
+/** Reference counted cache for `query$` and otel context */
+class RCCache {
+  private readonly cache = new Map<
+    TableDef,
+    Map<
+      string,
+      {
+        reactIds: Set<string>
+        span: otel.Span
+        otelContext: otel.Context
+        query$: LiveStoreJSQuery<any>
+      }
+    >
+  >()
+  private reverseCache = new Map<LiveStoreJSQuery<any>, [TableDef, string]>()
+
+  get = (table: TableDef, id: string) => {
+    const queries = this.cache.get(table)
+    if (queries === undefined) return undefined
+    return queries.get(id)
+  }
+
+  set = (
+    table: TableDef,
+    id: string,
+    query$: LiveStoreJSQuery<any>,
+    reactId: string,
+    otelContext: otel.Context,
+    span: otel.Span,
+  ) => {
+    let queries = this.cache.get(table)
+    if (queries === undefined) {
+      queries = new Map()
+      this.cache.set(table, queries)
+    }
+    queries.set(id, { query$, otelContext, span, reactIds: new Set([reactId]) })
+    this.reverseCache.set(query$, [table, id])
+  }
+
+  delete = (query$: LiveStoreJSQuery<any>) => {
+    const item = this.reverseCache.get(query$)
+    if (item === undefined) return
+
+    const [table, id] = item
+    const queries = this.cache.get(table)
+    if (queries === undefined) return
+
+    queries.delete(id)
+
+    if (queries.size === 0) {
+      this.cache.delete(table)
+    }
+
+    this.reverseCache.delete(query$)
+  }
+}
+
+const rcCache = new RCCache()

package/src/react/useTemporaryQuery.ts

@@ -1,23 +1,55 @@
 import React from 'react'
 
 import type { ILiveStoreQuery } from '../reactiveQueries/base-class.js'
-import { useQuery } from './useQuery.js'
+import { useQueryRef } from './useQuery.js'
+
+/**
+ * This is needed because the `React.useMemo` call below, can sometimes be called multiple times 🤷.
+ * The map entry is being removed again in the `React.useEffect` call below.
+ */
+const queryCache = new Map<() => ILiveStoreQuery<any>, { reactIds: Set<string>; query$: ILiveStoreQuery<any> }>()
 
 /**
  * Creates a query, subscribes and destroys it when the component unmounts.
  *
  * Make sure `makeQuery` is a memoized function.
  */
-export const useTemporaryQuery = <TResult>(makeQuery: () => ILiveStoreQuery<TResult>): TResult => {
-  // TODO cache the query outside of the `useMemo` since `useMemo` might be called multiple times
-  // also need to update the `useEffect` below https://stackoverflow.com/questions/66446642/react-usememo-memory-clean/77457605#77457605
-  const query = React.useMemo(() => makeQuery(), [makeQuery])
-
-  React.useEffect(() => {
-    return () => {
-      query.destroy()
+export const useTemporaryQuery = <TResult>(makeQuery: () => ILiveStoreQuery<TResult>): TResult =>
+  useTemporaryQueryRef(makeQuery).current
+
+export const useTemporaryQueryRef = <TResult>(
+  makeQuery: () => ILiveStoreQuery<TResult>,
+): React.MutableRefObject<TResult> => {
+  const reactId = React.useId()
+
+  const query$ = React.useMemo(() => {
+    const cachedItem = queryCache.get(makeQuery)
+    if (cachedItem !== undefined) {
+      cachedItem.reactIds.add(reactId)
+
+      return cachedItem.query$
     }
-  }, [query])
 
-  return useQuery(query)
+    const query$ = makeQuery()
+
+    queryCache.set(makeQuery, { reactIds: new Set([reactId]), query$ })
+
+    return query$
+  }, [reactId, makeQuery])
+
+  React.useEffect(
+    () => () => {
+      const cachedItem = queryCache.get(makeQuery)!
+
+      cachedItem.reactIds.delete(reactId)
+
+      if (cachedItem.reactIds.size === 0) {
+        cachedItem.query$.destroy()
+        queryCache.delete(makeQuery)
+      }
+    },
+    [makeQuery, reactId],
+  )
+
+  return useQueryRef(query$)
 }

package/src/react/utils/stack-info.ts

@@ -38,10 +38,12 @@ export const extractStackInfoFromStackTrace = (stackTrace: string): StackInfo =>
 
   while ((match = namePattern.exec(stackTrace)) !== null) {
     const [, name, filePath] = match as any as [string, string, string]
-    if (name.startsWith('use')) {
+
+    // NOTE No idea where this `Module.` comes from - possibly a Vite thing?
+    if ((name.startsWith('use') || name.startsWith('Module.use')) && name.endsWith('QueryRef') === false) {
       hasReachedStart = true
 
-      frames.unshift({ name, filePath })
+      frames.unshift({ name: name.replace(/^Module\./, ''), filePath })
     } else if (hasReachedStart) {
       // We've reached the end of the `use*` functions, so we're adding the component name and stop
       frames.unshift({ name, filePath })

package/src/reactive.ts

@@ -28,7 +28,7 @@ import { pick } from '@livestore/utils'
 import type * as otel from '@opentelemetry/api'
 import { isEqual, uniqueId } from 'lodash-es'
 
-import { BoundArray } from './bounded-collections.js'
+import { BoundArray } from './utils/bounded-collections.js'
 // import { getDurationMsFromSpan } from './otel.js'
 
 export const NOT_REFRESHED_YET = Symbol.for('NOT_REFRESHED_YET')

package/src/reactiveQueries/base-class.ts

@@ -1,11 +1,17 @@
 import type * as otel from '@opentelemetry/api'
 
+import { dbGraph } from '../global-state.js'
 import type { StackInfo } from '../react/utils/stack-info.js'
 import { type Atom, type GetAtom, throwContextNotSetError, type Thunk } from '../reactive.js'
-import type { RefreshReason } from '../store.js'
-import { type DbContext, dbGraph } from './graph.js'
+import type { RefreshReason, Store } from '../store.js'
 import type { LiveStoreJSQuery } from './js.js'
 
+export type DbContext = {
+  store: Store
+  otelTracer: otel.Tracer
+  rootOtelContext: otel.Context
+}
+
 export type UnsubscribeQuery = () => void
 
 let queryIdCounter = 0

package/src/reactiveQueries/graphql.ts

@@ -3,11 +3,12 @@ import { assertNever, shouldNeverHappen } from '@livestore/utils'
 import * as otel from '@opentelemetry/api'
 import * as graphql from 'graphql'
 
-import { getDurationMsFromSpan } from '../otel.js'
+import { dbGraph } from '../global-state.js'
 import type { Thunk } from '../reactive.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 { getDurationMsFromSpan } from '../utils/otel.js'
+import type { DbContext, GetAtomResult } from './base-class.js'
+import { LiveStoreQueryBase, makeGetAtomResult } from './base-class.js'
 import { LiveStoreJSQuery } from './js.js'
 
 export const queryGraphQL = <TResult extends Record<string, any>, TVariableValues extends Record<string, any>>(

package/src/reactiveQueries/js.ts

@@ -1,11 +1,10 @@
 import * as otel from '@opentelemetry/api'
 
-import { getDurationMsFromSpan } from '../otel.js'
+import { dbGraph } from '../global-state.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'
+import { getDurationMsFromSpan } from '../utils/otel.js'
+import { type DbContext, type GetAtomResult, LiveStoreQueryBase, makeGetAtomResult } from './base-class.js'
 
 export const queryJS = <TResult>(fn: (get: GetAtomResult) => TResult, options: { label: string }) =>
   new LiveStoreJSQuery<TResult>({ fn, label: options.label })