@livestore/livestore 0.3.0-dev.10 → 0.3.0-dev.11

package/src/live-queries/{db.test.ts → db-query.test.ts}

@@ -1,9 +1,10 @@
 import { Effect, Schema } from '@livestore/utils/effect'
 import * as otel from '@opentelemetry/api'
 import { BasicTracerProvider, InMemorySpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'
-import { describe, expect, it } from 'vitest'
+import { beforeEach, describe, expect, it } from 'vitest'
 
 import { computed, queryDb, rawSqlMutation, sql } from '../index.js'
+import * as RG from '../reactive.js'
 import { makeTodoMvc, tables } from '../utils/tests/fixture.js'
 import { getSimplifiedRootSpan } from '../utils/tests/otel.js'
 
@@ -17,6 +18,10 @@ TODO write tests for:
 describe('otel', () => {
   let cachedProvider: BasicTracerProvider | undefined
 
+  beforeEach(() => {
+    RG.__resetIds()
+  })
+
   const makeQuery = Effect.gen(function* () {
     const exporter = new InMemorySpanExporter()
 
@@ -31,7 +36,7 @@ describe('otel', () => {
     const span = otelTracer.startSpan('test-root')
     const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
-    const { store } = yield* makeTodoMvc({ otelTracer, otelContext })
+    const store = yield* makeTodoMvc({ otelTracer, otelContext })
 
     return {
       store,
@@ -51,11 +56,11 @@ describe('otel', () => {
         schema: Schema.Array(tables.todos.schema),
         queriedTables: new Set(['todos']),
       })
-      expect(query$.run()).toMatchInlineSnapshot('[]')
+      expect(store.query(query$)).toMatchInlineSnapshot('[]')
 
       store.mutate(rawSqlMutation({ sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)` }))
 
-      expect(query$.run()).toMatchInlineSnapshot(`
+      expect(store.query(query$)).toMatchInlineSnapshot(`
       [
         {
           "completed": false,
@@ -65,7 +70,6 @@ describe('otel', () => {
       ]
     `)
 
-      query$.destroy()
       span.end()
 
       return { exporter }
@@ -89,7 +93,9 @@ describe('otel', () => {
         { label: 'all todos' },
       )
 
-      expect(query$.run()).toMatchInlineSnapshot(`
+      expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+
+      expect(store.query(query$)).toMatchInlineSnapshot(`
       {
         "completed": false,
         "id": "",
@@ -97,9 +103,13 @@ describe('otel', () => {
       }
     `)
 
+      expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+
       store.mutate(rawSqlMutation({ sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)` }))
 
-      expect(query$.run()).toMatchInlineSnapshot(`
+      expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+
+      expect(store.query(query$)).toMatchInlineSnapshot(`
       {
         "completed": false,
         "id": "t1",
@@ -107,7 +117,8 @@ describe('otel', () => {
       }
     `)
 
-      query$.destroy()
+      expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+
       span.end()
 
       return { exporter }
@@ -125,7 +136,7 @@ describe('otel', () => {
       const filter = computed(() => ({ completed: false }))
       const query$ = queryDb((get) => tables.todos.query.where(get(filter)).first({ fallback: () => defaultTodo }))
 
-      expect(query$.run()).toMatchInlineSnapshot(`
+      expect(store.query(query$)).toMatchInlineSnapshot(`
       {
         "completed": false,
         "id": "",
@@ -135,7 +146,7 @@ describe('otel', () => {
 
       store.mutate(rawSqlMutation({ sql: sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)` }))
 
-      expect(query$.run()).toMatchInlineSnapshot(`
+      expect(store.query(query$)).toMatchInlineSnapshot(`
       {
         "completed": false,
         "id": "t1",
@@ -143,7 +154,6 @@ describe('otel', () => {
       }
     `)
 
-      query$.destroy()
       span.end()
 
       return { exporter }

package/src/live-queries/{db.ts → db-query.ts}

@@ -11,14 +11,14 @@ import { deepEqual, shouldNeverHappen } from '@livestore/utils'
 import { Predicate, Schema, TreeFormatter } from '@livestore/utils/effect'
 import * as otel from '@opentelemetry/api'
 
-import { globalReactivityGraph } from '../global-state.js'
 import type { Thunk } from '../reactive.js'
 import { isThunk, NOT_REFRESHED_YET } from '../reactive.js'
 import { makeExecBeforeFirstRun, rowQueryLabel } from '../row-query-utils.js'
 import type { RefreshReason } from '../store/store-types.js'
+import { isValidFunctionString } from '../utils/function-string.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 type { DepKey, GetAtomResult, LiveQueryDef, ReactivityGraph, ReactivityGraphContext } from './base-class.js'
+import { defCounterRef, depsToString, LiveStoreQueryBase, makeGetAtomResult, withRCMap } from './base-class.js'
 
 export type QueryInputRaw<TDecoded, TEncoded, TQueryInfo extends QueryInfo> = {
   query: string
@@ -31,9 +31,12 @@ export type QueryInputRaw<TDecoded, TEncoded, TQueryInfo extends QueryInfo> = {
    */
   queriedTables?: Set<string>
   queryInfo?: TQueryInfo
-  execBeforeFirstRun?: (ctx: QueryContext) => void
+  execBeforeFirstRun?: (ctx: ReactivityGraphContext) => void
 }
 
+export const isQueryInputRaw = (value: unknown): value is QueryInputRaw<any, any, any> =>
+  Predicate.hasProperty(value, 'query') && Predicate.hasProperty(value, 'schema')
+
 export type QueryInput<TDecoded, TEncoded, TQueryInfo extends QueryInfo> =
   | QueryInputRaw<TDecoded, TEncoded, TQueryInfo>
   | QueryBuilder<TDecoded, any, any, TQueryInfo>
@@ -52,10 +55,10 @@ export const queryDb: {
        * Used for debugging / devtools
        */
       label?: string
-      reactivityGraph?: ReactivityGraph
-      otelContext?: otel.Context
+      deps?: DepKey
+      queryInfo?: TQueryInfo
     },
-  ): LiveQuery<TResult, TQueryInfo>
+  ): LiveQueryDef<TResult, TQueryInfo>
   // NOTE in this "thunk case", we can't directly derive label/queryInfo from the queryInput,
   // so the caller needs to provide them explicitly otherwise queryInfo will be set to `None`,
   // and label will be set during the query execution
@@ -69,20 +72,47 @@ export const queryDb: {
        * Used for debugging / devtools
        */
       label?: string
-      reactivityGraph?: ReactivityGraph
+      deps?: DepKey
       queryInfo?: TQueryInfo
-      otelContext?: otel.Context
     },
-  ): LiveQuery<TResult, TQueryInfo>
-} = (queryInput, options) =>
-  new LiveStoreDbQuery({
-    queryInput,
-    label: options?.label,
-    reactivityGraph: options?.reactivityGraph,
-    map: options?.map,
-    queryInfo: Predicate.hasProperty(options, 'queryInfo') ? (options.queryInfo as QueryInfo) : undefined,
-    otelContext: options?.otelContext,
-  })
+  ): LiveQueryDef<TResult, TQueryInfo>
+} = (queryInput, options) => {
+  const queryString = isQueryBuilder(queryInput)
+    ? queryInput.toString()
+    : isQueryInputRaw(queryInput)
+      ? queryInput.query
+      : typeof queryInput === 'function'
+        ? queryInput.toString()
+        : shouldNeverHappen(`Invalid query input: ${queryInput}`)
+
+  const hash = options?.deps ? queryString + '-' + depsToString(options.deps) : queryString
+  if (isValidFunctionString(hash)._tag === 'invalid') {
+    throw new Error(`On Expo/React Native, db queries must provide a \`deps\` option`)
+  }
+
+  const label = options?.label ?? queryString
+
+  return {
+    _tag: 'def',
+    id: ++defCounterRef.current,
+    make: withRCMap(hash, (ctx, otelContext) => {
+      // TODO onDestroy
+      return new LiveStoreDbQuery({
+        reactivityGraph: ctx.reactivityGraph.deref()!,
+        queryInput,
+        label,
+        map: options?.map,
+        // We're not falling back to `None` here as the queryInfo will be set dynamically
+        queryInfo: options?.queryInfo,
+        otelContext,
+      })
+    }),
+    label,
+    hash,
+    queryInfo:
+      options?.queryInfo ?? (isQueryBuilder(queryInput) ? queryInfoFromQueryBuilder(queryInput) : { _tag: 'None' }),
+  }
+}
 
 /* An object encapsulating a reactive SQL query */
 export class LiveStoreDbQuery<
@@ -93,16 +123,16 @@ export class LiveStoreDbQuery<
   _tag: 'db' = 'db'
 
   /** A reactive thunk representing the query text */
-  queryInput$: Thunk<QueryInput<TResultSchema, ReadonlyArray<any>, TQueryInfo>, QueryContext, RefreshReason> | undefined
+  queryInput$: Thunk<QueryInputRaw<any, any, QueryInfo>, ReactivityGraphContext, RefreshReason> | undefined
 
   /** A reactive thunk representing the query results */
-  results$: Thunk<TResult, QueryContext, RefreshReason>
+  results$: Thunk<TResult, ReactivityGraphContext, RefreshReason>
 
   label: string
 
   queryInfo: TQueryInfo
 
-  protected reactivityGraph
+  readonly reactivityGraph
 
   private mapResult: (rows: TResultSchema) => TResult
 
@@ -117,17 +147,18 @@ export class LiveStoreDbQuery<
     label?: string
     queryInput:
       | QueryInput<TResultSchema, ReadonlyArray<any>, TQueryInfo>
-      | ((get: GetAtomResult, ctx: QueryContext) => QueryInput<TResultSchema, ReadonlyArray<any>, TQueryInfo>)
-    reactivityGraph?: ReactivityGraph
+      | ((get: GetAtomResult, ctx: ReactivityGraphContext) => QueryInput<TResultSchema, ReadonlyArray<any>, TQueryInfo>)
+    reactivityGraph: ReactivityGraph
     map?: (rows: TResultSchema) => TResult
     queryInfo?: TQueryInfo
+    /** Only used for the initial query execution */
     otelContext?: otel.Context
   }) {
     super()
 
     let label = inputLabel ?? 'db(unknown)'
     let queryInfo = inputQueryInfo ?? ({ _tag: 'None' } as TQueryInfo)
-    this.reactivityGraph = reactivityGraph ?? globalReactivityGraph
+    this.reactivityGraph = reactivityGraph
 
     this.mapResult = map === undefined ? (rows: any) => rows as TResult : map
 
@@ -136,13 +167,15 @@ export class LiveStoreDbQuery<
         typeof queryInput === 'function' ? undefined : isQueryBuilder(queryInput) ? undefined : queryInput.schema,
     }
 
-    const execBeforeFirstRunRef: { current: ((ctx: QueryContext, otelContext: otel.Context) => void) | undefined } = {
+    const execBeforeFirstRunRef: {
+      current: ((ctx: ReactivityGraphContext, otelContext: otel.Context) => void) | undefined
+    } = {
       current: undefined,
     }
 
     type TQueryInputRaw = QueryInputRaw<any, any, QueryInfo>
 
-    let queryInputRaw$OrQueryInputRaw: TQueryInputRaw | Thunk<TQueryInputRaw, QueryContext, RefreshReason>
+    let queryInputRaw$OrQueryInputRaw: TQueryInputRaw | Thunk<TQueryInputRaw, ReactivityGraphContext, RefreshReason>
 
     const fromQueryBuilder = (qb: QueryBuilder.Any, otelContext: otel.Context | undefined) => {
       try {
@@ -156,7 +189,7 @@ export class LiveStoreDbQuery<
             schema,
             bindValues: qbRes.bindValues,
             queriedTables: new Set([ast.tableDef.sqliteDef.name]),
-            queryInfo: ast._tag === 'RowQuery' ? { _tag: 'Row', table: ast.tableDef, id: ast.id } : { _tag: 'None' },
+            queryInfo: queryInfoFromQueryBuilder(qb),
           } satisfies TQueryInputRaw,
           label: ast._tag === 'RowQuery' ? rowQueryLabel(ast.tableDef, ast.id) : qb.toString(),
           execBeforeFirstRun:
@@ -178,7 +211,10 @@ export class LiveStoreDbQuery<
       queryInputRaw$OrQueryInputRaw = this.reactivityGraph.makeThunk(
         (get, setDebugInfo, ctx, otelContext) => {
           const startMs = performance.now()
-          const queryInputResult = queryInput(makeGetAtomResult(get, otelContext ?? ctx.rootOtelContext), ctx)
+          const queryInputResult = queryInput(
+            makeGetAtomResult(get, ctx, otelContext ?? ctx.rootOtelContext, this.dependencyQueriesRef),
+            ctx,
+          )
           const durationMs = performance.now() - startMs
 
           let queryInputRaw: TQueryInputRaw
@@ -210,6 +246,8 @@ export class LiveStoreDbQuery<
           equal: (a, b) => a.query === b.query && deepEqual(a.bindValues, b.bindValues),
         },
       )
+
+      this.queryInput$ = queryInputRaw$OrQueryInputRaw
     } else {
       let queryInputRaw: TQueryInputRaw
       if (isQueryBuilder(queryInput)) {
@@ -253,10 +291,16 @@ export class LiveStoreDbQuery<
         : undefined
 
     const results$ = this.reactivityGraph.makeThunk<TResult>(
-      (get, setDebugInfo, queryContext, otelContext) =>
+      (get, setDebugInfo, queryContext, otelContext, debugRefreshReason) =>
         queryContext.otelTracer.startActiveSpan(
           'db:...', // NOTE span name will be overridden further down
-          {},
+          {
+            attributes: {
+              'livestore.debugRefreshReason': Predicate.hasProperty(debugRefreshReason, 'label')
+                ? (debugRefreshReason.label as string)
+                : debugRefreshReason?._tag,
+            },
+          },
           otelContext ?? queryContext.rootOtelContext,
           (span) => {
             const otelContext = otel.trace.setSpan(otel.context.active(), span)
@@ -268,14 +312,14 @@ export class LiveStoreDbQuery<
             }
 
             const queryInputResult = isThunk(queryInputRaw$OrQueryInputRaw)
-              ? (get(queryInputRaw$OrQueryInputRaw, otelContext) as TQueryInputRaw)
+              ? (get(queryInputRaw$OrQueryInputRaw, otelContext, debugRefreshReason) as TQueryInputRaw)
               : (queryInputRaw$OrQueryInputRaw as TQueryInputRaw)
 
             const sqlString = queryInputResult.query
             const bindValues = queryInputResult.bindValues
 
             if (queriedTablesRef.current === undefined) {
-              queriedTablesRef.current = store.syncDbWrapper.getTablesUsed(sqlString)
+              queriedTablesRef.current = store.sqliteDbWrapper.getTablesUsed(sqlString)
             }
 
             if (bindValues !== undefined) {
@@ -285,17 +329,20 @@ export class LiveStoreDbQuery<
             // 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)
+              get(tableRef, otelContext, debugRefreshReason)
             }
 
             span.setAttribute('sql.query', sqlString)
             span.updateName(`db:${sqlString.slice(0, 50)}`)
 
-            const rawDbResults = store.syncDbWrapper.select<any>(sqlString, {
-              queriedTables: queriedTablesRef.current,
-              bindValues: bindValues ? prepareBindValues(bindValues, sqlString) : undefined,
-              otelContext,
-            })
+            const rawDbResults = store.sqliteDbWrapper.select<any>(
+              sqlString,
+              bindValues ? prepareBindValues(bindValues, sqlString) : undefined,
+              {
+                queriedTables: queriedTablesRef.current,
+                otelContext,
+              },
+            )
 
             span.setAttribute('sql.rowsCount', rawDbResults.length)
 
@@ -346,10 +393,21 @@ Result:`,
   }
 
   destroy = () => {
+    this.isDestroyed = true
+
     if (this.queryInput$ !== undefined) {
       this.reactivityGraph.destroyNode(this.queryInput$)
     }
 
     this.reactivityGraph.destroyNode(this.results$)
+
+    for (const query of this.dependencyQueriesRef) {
+      query.deref()
+    }
   }
 }
+
+const queryInfoFromQueryBuilder = (qb: QueryBuilder.Any): QueryInfo.Row | QueryInfo.None => {
+  const ast = qb[QueryBuilderAstSymbol]
+  return ast._tag === 'RowQuery' ? { _tag: 'Row', table: ast.tableDef, id: ast.id } : { _tag: 'None' }
+}

package/src/live-queries/graphql.ts

@@ -5,13 +5,12 @@ import { Schema, TreeFormatter } from '@livestore/utils/effect'
 import * as otel from '@opentelemetry/api'
 import * as graphql from 'graphql'
 
-import { globalReactivityGraph } from '../global-state.js'
 import { isThunk, type Thunk } from '../reactive.js'
 import type { Store } from '../store/store.js'
 import type { BaseGraphQLContext, 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 type { DepKey, GetAtomResult, LiveQueryDef, ReactivityGraph, ReactivityGraphContext } from './base-class.js'
+import { defCounterRef, depsToString, LiveStoreQueryBase, makeGetAtomResult, withRCMap } from './base-class.js'
 
 export type MapResult<To, From> = ((res: From, get: GetAtomResult) => To) | Schema.Schema<To, From>
 
@@ -22,17 +21,37 @@ export const queryGraphQL = <
 >(
   document: DocumentNode<TResult, TVariableValues>,
   genVariableValues: TVariableValues | ((get: GetAtomResult) => TVariableValues),
-  {
-    label,
-    reactivityGraph,
-    map,
-  }: {
+  options: {
     label?: string
-    reactivityGraph?: ReactivityGraph
+    // reactivityGraph?: ReactivityGraph
     map?: MapResult<TResultMapped, TResult>
+    deps?: DepKey
   } = {},
-): LiveQuery<TResultMapped, QueryInfo.None> =>
-  new LiveStoreGraphQLQuery({ document, genVariableValues, label, reactivityGraph, map })
+): LiveQueryDef<TResultMapped, QueryInfo.None> => {
+  const documentName = graphql.getOperationAST(document)?.name?.value
+  const hash = options.deps
+    ? depsToString(options.deps)
+    : (documentName ?? shouldNeverHappen('No document name found and no deps provided'))
+  const label = options.label ?? documentName ?? 'graphql'
+  const map = options.map
+
+  return {
+    _tag: 'def',
+    id: ++defCounterRef.current,
+    make: withRCMap(hash, (ctx, _otelContext) => {
+      return new LiveStoreGraphQLQuery({
+        document,
+        genVariableValues,
+        label,
+        map,
+        reactivityGraph: ctx.reactivityGraph.deref()!,
+      })
+    }),
+    label,
+    hash,
+    queryInfo: { _tag: 'None' },
+  }
+}
 
 export class LiveStoreGraphQLQuery<
   TResult extends Record<string, any>,
@@ -46,13 +65,13 @@ export class LiveStoreGraphQLQuery<
   document: DocumentNode<TResult, TVariableValues>
 
   /** A reactive thunk representing the query results */
-  results$: Thunk<TResultMapped, QueryContext, RefreshReason>
+  results$: Thunk<TResultMapped, ReactivityGraphContext, RefreshReason>
 
-  variableValues$: Thunk<TVariableValues, QueryContext, RefreshReason> | undefined
+  variableValues$: Thunk<TVariableValues, ReactivityGraphContext, RefreshReason> | undefined
 
   label: string
 
-  protected reactivityGraph: ReactivityGraph
+  reactivityGraph: ReactivityGraph
 
   queryInfo: QueryInfo.None = { _tag: 'None' }
 
@@ -68,7 +87,7 @@ export class LiveStoreGraphQLQuery<
     document: DocumentNode<TResult, TVariableValues>
     genVariableValues: TVariableValues | ((get: GetAtomResult) => TVariableValues)
     label?: string
-    reactivityGraph?: ReactivityGraph
+    reactivityGraph: ReactivityGraph
     map?: MapResult<TResultMapped, TResult>
   }) {
     super()
@@ -78,7 +97,7 @@ export class LiveStoreGraphQLQuery<
     this.label = labelWithDefault
     this.document = document
 
-    this.reactivityGraph = reactivityGraph ?? globalReactivityGraph
+    this.reactivityGraph = reactivityGraph
 
     this.mapResult =
       map === undefined
@@ -102,8 +121,10 @@ export class LiveStoreGraphQLQuery<
 
     if (typeof genVariableValues === 'function') {
       variableValues$OrvariableValues = this.reactivityGraph.makeThunk(
-        (get, _setDebugInfo, { rootOtelContext }, otelContext) => {
-          return genVariableValues(makeGetAtomResult(get, otelContext ?? rootOtelContext))
+        (get, _setDebugInfo, ctx, otelContext) => {
+          return genVariableValues(
+            makeGetAtomResult(get, ctx, otelContext ?? ctx.rootOtelContext, this.dependencyQueriesRef),
+          )
         },
         { label: `${labelWithDefault}:variableValues`, meta: { liveStoreThunkType: 'graphql.variables' } },
       )
@@ -114,9 +135,10 @@ export class LiveStoreGraphQLQuery<
 
     const resultsLabel = `${labelWithDefault}:results`
     this.results$ = this.reactivityGraph.makeThunk<TResultMapped>(
-      (get, setDebugInfo, { store, otelTracer, rootOtelContext }, otelContext) => {
+      (get, setDebugInfo, ctx, otelContext, debugRefreshReason) => {
+        const { store, otelTracer, rootOtelContext } = ctx
         const variableValues = isThunk(variableValues$OrvariableValues)
-          ? (get(variableValues$OrvariableValues) as TVariableValues)
+          ? (get(variableValues$OrvariableValues, otelContext, debugRefreshReason) as TVariableValues)
           : (variableValues$OrvariableValues as TVariableValues)
         const { result, queriedTables, durationMs } = this.queryOnce({
           document,
@@ -124,7 +146,7 @@ export class LiveStoreGraphQLQuery<
           otelContext: otelContext ?? rootOtelContext,
           otelTracer,
           store: store as Store<TContext>,
-          get: makeGetAtomResult(get, otelContext ?? rootOtelContext),
+          get: makeGetAtomResult(get, ctx, otelContext ?? rootOtelContext, this.dependencyQueriesRef),
         })
 
         // Add dependencies on any tables that were used
@@ -215,5 +237,9 @@ export class LiveStoreGraphQLQuery<
     }
 
     this.reactivityGraph.destroyNode(this.results$)
+
+    for (const query of this.dependencyQueriesRef) {
+      query.deref()
+    }
   }
 }

package/src/live-queries/make-ref.ts

@@ -0,0 +1,47 @@
+import { nanoid } from '@livestore/utils/nanoid'
+
+import type * as RG from '../reactive.js'
+import type { RefreshReason } from '../store/store-types.js'
+import type { ILiveQueryRef, ILiveQueryRefDef, ReactivityGraph, ReactivityGraphContext } from './base-class.js'
+import { withRCMap } from './base-class.js'
+
+export const makeRef = <T>(
+  defaultValue: T,
+  options?: {
+    label?: string
+  },
+): ILiveQueryRefDef<T> => {
+  const id = nanoid()
+  return {
+    _tag: 'live-ref-def',
+    defaultValue,
+    make: withRCMap(id, (ctx) => new LiveQueryRef(defaultValue, ctx.reactivityGraph.deref()!, options)),
+  }
+}
+
+export class LiveQueryRef<T> implements ILiveQueryRef<T> {
+  _tag = 'live-ref' as const
+  readonly ref: RG.Ref<T, ReactivityGraphContext, RefreshReason>
+
+  constructor(
+    private defaultValue: T,
+    readonly reactivityGraph: ReactivityGraph,
+    private options?: {
+      label?: string
+    },
+  ) {
+    this.ref = reactivityGraph.makeRef(defaultValue, { label: options?.label })
+  }
+
+  set = (value: T) => {
+    this.reactivityGraph.setRef(this.ref, value)
+  }
+
+  get = () => {
+    return this.ref.computeResult()
+  }
+
+  destroy = () => {
+    this.reactivityGraph.destroyNode(this.ref)
+  }
+}