@livestore/react 0.3.0-dev.11 → 0.3.0-dev.5

package/src/useRow.test.tsx

@@ -1,34 +1,30 @@
 import * as LiveStore from '@livestore/livestore'
 import { getSimplifiedRootSpan } from '@livestore/livestore/internal/testing-utils'
 import { Effect, ReadonlyRecord, Schema } from '@livestore/utils/effect'
-import { Vitest } from '@livestore/utils/node-vitest'
 import * as otel from '@opentelemetry/api'
 import { BasicTracerProvider, InMemorySpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'
-import * as ReactTesting from '@testing-library/react'
+import { render, renderHook } from '@testing-library/react'
 import React from 'react'
-import { beforeEach, expect, it } from 'vitest'
+import { describe, expect, it } from 'vitest'
 
-import { AppRouterSchema, makeTodoMvcReact, tables, todos } from './__tests__/fixture.js'
+import { AppComponentSchema, AppRouterSchema, makeTodoMvcReact, tables, todos } from './__tests__/fixture.js'
 import * as LiveStoreReact from './mod.js'
-import { __resetUseRcResourceCache } from './useRcResource.js'
-
-// const strictMode = process.env.REACT_STRICT_MODE !== undefined
 
 // NOTE running tests concurrently doesn't work with the default global db graph
-Vitest.describe('useRow', () => {
-  beforeEach(() => {
-    __resetUseRcResourceCache()
-  })
-
-  Vitest.scopedLive('should update the data based on component key', () =>
+describe('useRow', () => {
+  it('should update the data based on component key', () =>
     Effect.gen(function* () {
-      const { wrapper, store, renderCount } = yield* makeTodoMvcReact({})
+      const { wrapper, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
+        useGlobalReactivityGraph: false,
+      })
 
-      const { result, rerender } = ReactTesting.renderHook(
+      const renderCount = makeRenderCount()
+
+      const { result, rerender } = renderHook(
         (userId: string) => {
           renderCount.inc()
 
-          const [state, setState] = LiveStoreReact.useRow(tables.userInfo, userId)
+          const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
           return { state, setState }
         },
         { wrapper, initialProps: 'u1' },
@@ -37,29 +33,37 @@ Vitest.describe('useRow', () => {
       expect(result.current.state.id).toBe('u1')
       expect(result.current.state.username).toBe('')
       expect(renderCount.val).toBe(1)
-      expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
-      store.mutate(tables.userInfo.insert({ id: 'u2', username: 'username_u2' }))
+
+      React.act(() =>
+        store.mutate(
+          LiveStore.rawSqlMutation({
+            sql: LiveStore.sql`INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')`,
+          }),
+        ),
+      )
 
       rerender('u2')
 
-      expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
       expect(result.current.state.id).toBe('u2')
       expect(result.current.state.username).toBe('username_u2')
       expect(renderCount.val).toBe(2)
-    }),
-  )
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
 
   // TODO add a test that makes sure React doesn't re-render when a setter is used to set the same value
 
-  Vitest.scopedLive('should update the data reactively - via setState', () =>
+  it('should update the data reactively - via setState', () =>
     Effect.gen(function* () {
-      const { wrapper, renderCount } = yield* makeTodoMvcReact({})
+      const { wrapper, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
+        useGlobalReactivityGraph: false,
+      })
+
+      const renderCount = makeRenderCount()
 
-      const { result } = ReactTesting.renderHook(
+      const { result } = renderHook(
         (userId: string) => {
           renderCount.inc()
 
-          const [state, setState] = LiveStoreReact.useRow(tables.userInfo, userId)
+          const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
           return { state, setState }
         },
         { wrapper, initialProps: 'u1' },
@@ -69,23 +73,26 @@ Vitest.describe('useRow', () => {
       expect(result.current.state.username).toBe('')
       expect(renderCount.val).toBe(1)
 
-      ReactTesting.act(() => result.current.setState.username('username_u1_hello'))
+      React.act(() => result.current.setState.username('username_u1_hello'))
 
       expect(result.current.state.id).toBe('u1')
       expect(result.current.state.username).toBe('username_u1_hello')
       expect(renderCount.val).toBe(2)
-    }),
-  )
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
 
-  Vitest.scopedLive('should update the data reactively - via raw store mutation', () =>
+  it('should update the data reactively - via raw store mutation', () =>
     Effect.gen(function* () {
-      const { wrapper, store, renderCount } = yield* makeTodoMvcReact({})
+      const { wrapper, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
+        useGlobalReactivityGraph: false,
+      })
 
-      const { result } = ReactTesting.renderHook(
+      const renderCount = makeRenderCount()
+
+      const { result } = renderHook(
         (userId: string) => {
           renderCount.inc()
 
-          const [state, setState] = LiveStoreReact.useRow(tables.userInfo, userId)
+          const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
           return { state, setState }
         },
         { wrapper, initialProps: 'u1' },
@@ -95,30 +102,36 @@ Vitest.describe('useRow', () => {
       expect(result.current.state.username).toBe('')
       expect(renderCount.val).toBe(1)
 
-      ReactTesting.act(() =>
-        store.mutate(tables.userInfo.update({ where: { id: 'u1' }, values: { username: 'username_u1_hello' } })),
+      React.act(() =>
+        store.mutate(
+          LiveStore.rawSqlMutation({
+            sql: LiveStore.sql`UPDATE UserInfo SET username = 'username_u1_hello' WHERE id = 'u1';`,
+          }),
+        ),
       )
 
       expect(result.current.state.id).toBe('u1')
       expect(result.current.state.username).toBe('username_u1_hello')
       expect(renderCount.val).toBe(2)
-    }),
-  )
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
 
-  Vitest.scopedLive('should work for a larger app', () =>
+  it('should work for a larger app', () =>
     Effect.gen(function* () {
-      const { wrapper, store, renderCount } = yield* makeTodoMvcReact({})
+      const { wrapper, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
+        useGlobalReactivityGraph: false,
+      })
 
       const allTodos$ = LiveStore.queryDb(
         { query: `select * from todos`, schema: Schema.Array(tables.todos.schema) },
-        { label: 'allTodos' },
+        { label: 'allTodos', reactivityGraph },
       )
 
+      const appRouterRenderCount = makeRenderCount()
       let globalSetState: LiveStoreReact.StateSetters<typeof AppRouterSchema> | undefined
       const AppRouter: React.FC = () => {
-        renderCount.inc()
+        appRouterRenderCount.inc()
 
-        const [state, setState] = LiveStoreReact.useRow(AppRouterSchema)
+        const [state, setState] = LiveStoreReact.useRow(AppRouterSchema, { reactivityGraph })
 
         globalSetState = setState
 
@@ -146,15 +159,15 @@ Vitest.describe('useRow', () => {
       }
 
       const TaskDetails: React.FC<{ id: string }> = ({ id }) => {
-        const [todo] = LiveStoreReact.useRow(todos, id)
+        const [todo] = LiveStoreReact.useRow(todos, id, { reactivityGraph })
         return <div role="content">{JSON.stringify(todo)}</div>
       }
 
-      const renderResult = ReactTesting.render(<AppRouter />, { wrapper })
+      const renderResult = render(<AppRouter />, { wrapper })
 
-      expect(renderCount.val).toBe(1)
+      expect(appRouterRenderCount.val).toBe(1)
 
-      ReactTesting.act(() =>
+      React.act(() =>
         store.mutate(
           LiveStore.rawSqlMutation({
             sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
@@ -162,19 +175,19 @@ Vitest.describe('useRow', () => {
         ),
       )
 
-      expect(renderCount.val).toBe(1)
+      expect(appRouterRenderCount.val).toBe(1)
       expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: -"')
 
-      ReactTesting.act(() => globalSetState!.currentTaskId('t1'))
+      React.act(() => globalSetState!.currentTaskId('t1'))
 
-      expect(renderCount.val).toBe(2)
+      expect(appRouterRenderCount.val).toBe(2)
       expect(renderResult.getByRole('content').innerHTML).toMatchInlineSnapshot(
         `"{"id":"t1","text":"buy milk","completed":false}"`,
       )
 
       expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t1"')
 
-      ReactTesting.act(() =>
+      React.act(() =>
         store.mutate(
           LiveStore.rawSqlMutation({
             sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t2', 'buy eggs', 0)`,
@@ -186,33 +199,37 @@ Vitest.describe('useRow', () => {
         ),
       )
 
-      expect(renderCount.val).toBe(3)
+      expect(appRouterRenderCount.val).toBe(3)
       expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t2"')
-    }),
-  )
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
 
-  Vitest.scopedLive('should work for a useRow query chained with a useTemporary query', () =>
+  it('should work for a useRow query chained with a useTemporary query', () =>
     Effect.gen(function* () {
-      const { store, wrapper, renderCount } = yield* makeTodoMvcReact({})
+      const { store, wrapper, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
+        useGlobalReactivityGraph: false,
+      })
+      const renderCount = makeRenderCount()
 
       store.mutate(
         todos.insert({ id: 't1', text: 'buy milk', completed: false }),
         todos.insert({ id: 't2', text: 'buy bread', completed: false }),
       )
 
-      const { result, unmount, rerender } = ReactTesting.renderHook(
+      const { result, unmount, rerender } = renderHook(
         (userId: string) => {
           renderCount.inc()
 
-          const [_row, _setRow, rowState$] = LiveStoreReact.useRow(tables.userInfo, userId)
-          const todos = LiveStoreReact.useQuery(
-            LiveStore.queryDb(
-              (get) => tables.todos.query.where('text', 'LIKE', `%${get(rowState$).text}%`),
-              // TODO find a way where explicit `userId` is not needed here
-              // possibly by automatically understanding the `get(rowState$)` dependency
-              { label: 'todosFiltered', deps: userId },
-            ),
-            // TODO introduce a `deps` array which is only needed when a query is parametric
+          const [_row, _setRow, rowState$] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
+          const todos = LiveStoreReact.useScopedQuery(
+            () =>
+              LiveStore.queryDb(
+                (get) => ({
+                  query: LiveStore.sql`select * from todos where text like '%${get(rowState$).text}%'`,
+                  schema: Schema.Array(tables.todos.schema),
+                }),
+                { reactivityGraph, label: 'todosFiltered' },
+              ),
+            userId,
           )
 
           return { todos }
@@ -220,9 +237,16 @@ Vitest.describe('useRow', () => {
         { wrapper, initialProps: 'u1' },
       )
 
-      ReactTesting.act(() => store.mutate(tables.userInfo.insert({ id: 'u2', username: 'username_u2', text: 'milk' })))
+      React.act(() =>
+        store.mutate(
+          LiveStore.rawSqlMutation({
+            sql: LiveStore.sql`INSERT INTO UserInfo (id, username, text) VALUES ('u2', 'username_u2', 'milk')`,
+          }),
+        ),
+      )
 
       expect(result.current.todos.length).toBe(2)
+      // expect(result.current.state.username).toBe('')
       expect(renderCount.val).toBe(1)
 
       rerender('u2')
@@ -231,80 +255,89 @@ Vitest.describe('useRow', () => {
       expect(renderCount.val).toBe(2)
 
       unmount()
-    }),
-  )
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
+
+  let cachedProvider: BasicTracerProvider | undefined
 
-  Vitest.describe('otel', () => {
-    const provider = new BasicTracerProvider({})
+  describe('otel', () => {
+    const exporter = new InMemorySpanExporter()
+
+    const provider = cachedProvider ?? new BasicTracerProvider({ spanProcessors: [new SimpleSpanProcessor(exporter)] })
+    cachedProvider = provider
     provider.register()
 
-    it.each([{ strictMode: true }, { strictMode: false }])(
-      'should update the data based on component key strictMode=%s',
-      async ({ strictMode }) => {
-        const exporter = new InMemorySpanExporter()
+    const otelTracer = otel.trace.getTracer('test')
+
+    const span = otelTracer.startSpan('test-root')
+    const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
-        // const provider = cachedProvider ?? new BasicTracerProvider({ spanProcessors: [new SimpleSpanProcessor(exporter)] })
-        provider.addSpanProcessor(new SimpleSpanProcessor(exporter))
+    it('should update the data based on component key', async () => {
+      const { strictMode } = await Effect.gen(function* () {
+        const { wrapper, store, reactivityGraph, makeRenderCount, strictMode } = yield* makeTodoMvcReact({
+          useGlobalReactivityGraph: false,
+          otelContext,
+          otelTracer,
+        })
 
-        const otelTracer = otel.trace.getTracer(`testing-${strictMode ? 'strict' : 'non-strict'}`)
+        const renderCount = makeRenderCount()
 
-        const span = otelTracer.startSpan('test-root')
-        const otelContext = otel.trace.setSpan(otel.context.active(), span)
+        const { result, rerender, unmount } = renderHook(
+          (userId: string) => {
+            renderCount.inc()
 
-        await Effect.gen(function* () {
-          const { wrapper, store, renderCount } = yield* makeTodoMvcReact({
-            otelContext,
-            otelTracer,
-            strictMode,
-          })
+            const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
+            return { state, setState }
+          },
+          { wrapper, initialProps: 'u1' },
+        )
 
-          const { result, rerender, unmount } = ReactTesting.renderHook(
-            (userId: string) => {
-              renderCount.inc()
+        expect(result.current.state.id).toBe('u1')
+        expect(result.current.state.username).toBe('')
+        expect(renderCount.val).toBe(1)
 
-              const [state, setState] = LiveStoreReact.useRow(tables.userInfo, userId)
-              return { state, setState }
-            },
-            { wrapper, initialProps: 'u1' },
-          )
+        React.act(() =>
+          store.mutate(
+            LiveStore.rawSqlMutation({
+              sql: LiveStore.sql`INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')`,
+            }),
+          ),
+        )
+
+        rerender('u2')
+
+        expect(result.current.state.id).toBe('u2')
+        expect(result.current.state.username).toBe('username_u2')
+        expect(renderCount.val).toBe(2)
+
+        unmount()
+        span.end()
+
+        return { strictMode }
+      }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise)
+
+      const mapAttributes = (attributes: otel.Attributes) => {
+        return ReadonlyRecord.map(attributes, (val, key) => {
+          if (key === 'stackInfo') {
+            const stackInfo = JSON.parse(val as string) as LiveStore.StackInfo
+            // stackInfo.frames.shift() // Removes `renderHook.wrapper` from the stack
+            stackInfo.frames.forEach((_) => {
+              if (_.name.includes('renderHook.wrapper')) {
+                _.name = 'renderHook.wrapper'
+              }
+              _.filePath = '__REPLACED_FOR_SNAPSHOT__'
+            })
+            return JSON.stringify(stackInfo)
+          }
+          return val
+        })
+      }
 
-          expect(result.current.state.id).toBe('u1')
-          expect(result.current.state.username).toBe('')
-          expect(renderCount.val).toBe(1)
-
-          // For u2 we'll make sure that the row already exists,
-          // so the lazy `insert` will be skipped
-          ReactTesting.act(() => store.mutate(tables.userInfo.insert({ id: 'u2', username: 'username_u2' })))
-
-          rerender('u2')
-
-          expect(result.current.state.id).toBe('u2')
-          expect(result.current.state.username).toBe('username_u2')
-          expect(renderCount.val).toBe(2)
-
-          unmount()
-          span.end()
-        }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise)
-
-        const mapAttributes = (attributes: otel.Attributes) => {
-          return ReadonlyRecord.map(attributes, (val, key) => {
-            if (key === 'firstStackInfo') {
-              const stackInfo = JSON.parse(val as string) as LiveStore.StackInfo
-              // stackInfo.frames.shift() // Removes `renderHook.wrapper` from the stack
-              stackInfo.frames.forEach((_) => {
-                if (_.name.includes('renderHook.wrapper')) {
-                  _.name = 'renderHook.wrapper'
-                }
-                _.filePath = '__REPLACED_FOR_SNAPSHOT__'
-              })
-              return JSON.stringify(stackInfo)
-            }
-            return val
-          })
-        }
-
-        expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchSnapshot()
-      },
-    )
+      // TODO improve testing setup so "obsolete" warning is avoided
+      if (strictMode) {
+        expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchSnapshot('strictMode=true')
+      } else {
+        expect(getSimplifiedRootSpan(exporter, mapAttributes)).toMatchSnapshot('strictMode=false')
+      }
+    })
   })
 })

package/src/useRow.ts

@@ -2,7 +2,7 @@ import type { QueryInfo, RowQuery } from '@livestore/common'
 import { SessionIdSymbol } from '@livestore/common'
 import { DbSchema } from '@livestore/common/schema'
 import type { SqliteDsl } from '@livestore/db-schema'
-import type { LiveQuery, LiveQueryDef, Store } from '@livestore/livestore'
+import type { LiveQuery, ReactivityGraph } from '@livestore/livestore'
 import { queryDb } from '@livestore/livestore'
 import { shouldNeverHappen } from '@livestore/utils'
 import { ReadonlyRecord } from '@livestore/utils/effect'
@@ -10,6 +10,7 @@ import React from 'react'
 
 import { useStore } from './LiveStoreContext.js'
 import { useQueryRef } from './useQuery.js'
+import { useMakeScopedQuery } from './useScopedQuery.js'
 
 export type UseRowResult<TTableDef extends DbSchema.TableDefBase> = [
   row: RowQuery.Result<TTableDef>,
@@ -17,6 +18,10 @@ export type UseRowResult<TTableDef extends DbSchema.TableDefBase> = [
   query$: LiveQuery<RowQuery.Result<TTableDef>, QueryInfo>,
 ]
 
+export type UseRowOptionsBase = {
+  reactivityGraph?: ReactivityGraph
+}
+
 /**
  * Similar to `React.useState` but returns a tuple of `[row, setRow, query$]` for a given table where ...
  *
@@ -27,7 +32,6 @@ export type UseRowResult<TTableDef extends DbSchema.TableDefBase> = [
  * If the table is a singleton table, `useRow` can be called without an `id` argument. Otherwise, the `id` argument is required.
  */
 export const useRow: {
-  // isSingleton: true
   <
     TTableDef extends DbSchema.TableDef<
       DbSchema.DefaultSqliteTableDef,
@@ -35,10 +39,8 @@ export const useRow: {
     >,
   >(
     table: TTableDef,
-    options?: { store?: Store },
+    options?: UseRowOptionsBase,
   ): UseRowResult<TTableDef>
-
-  // isSingleton: false with requiredInsertColumnNames: 'id'
   <
     TTableDef extends DbSchema.TableDef<
       DbSchema.DefaultSqliteTableDef,
@@ -52,10 +54,8 @@ export const useRow: {
     table: TTableDef,
     // TODO adjust so it works with arbitrary primary keys or unique constraints
     id: string | SessionIdSymbol,
-    options?: Partial<RowQuery.RequiredColumnsOptions<TTableDef>> & { store?: Store },
+    options?: UseRowOptionsBase & Partial<RowQuery.RequiredColumnsOptions<TTableDef>>,
   ): UseRowResult<TTableDef>
-
-  // isSingleton: false
   <
     TTableDef extends DbSchema.TableDef<
       DbSchema.DefaultSqliteTableDef,
@@ -65,7 +65,7 @@ export const useRow: {
     table: TTableDef,
     // TODO adjust so it works with arbitrary primary keys or unique constraints
     id: string | SessionIdSymbol,
-    options: RowQuery.RequiredColumnsOptions<TTableDef> & { store?: Store },
+    options: UseRowOptionsBase & RowQuery.RequiredColumnsOptions<TTableDef>,
   ): UseRowResult<TTableDef>
 } = <
   TTableDef extends DbSchema.TableDef<
@@ -74,14 +74,14 @@ export const useRow: {
   >,
 >(
   table: TTableDef,
-  idOrOptions?: string | SessionIdSymbol | { store?: Store },
-  options_?: Partial<RowQuery.RequiredColumnsOptions<TTableDef>> & { store?: Store },
+  idOrOptions?: string | SessionIdSymbol | UseRowOptionsBase,
+  options_?: UseRowOptionsBase & Partial<RowQuery.RequiredColumnsOptions<TTableDef>>,
 ): UseRowResult<TTableDef> => {
   const sqliteTableDef = table.sqliteDef
   const id = typeof idOrOptions === 'string' || idOrOptions === SessionIdSymbol ? idOrOptions : undefined
-  const options: (Partial<RowQuery.RequiredColumnsOptions<TTableDef>> & { store?: Store }) | undefined =
+  const options: (UseRowOptionsBase & Partial<RowQuery.RequiredColumnsOptions<TTableDef>>) | undefined =
     typeof idOrOptions === 'string' || idOrOptions === SessionIdSymbol ? options_ : idOrOptions
-  const { insertValues } = options ?? {}
+  const { insertValues, reactivityGraph } = options ?? {}
 
   type TComponentState = SqliteDsl.FromColumns.RowDecoded<TTableDef['sqliteDef']['columns']>
 
@@ -91,7 +91,7 @@ export const useRow: {
     shouldNeverHappen(`useRow called on table "${tableName}" which does not have 'deriveMutations: true' set`)
   }
 
-  const { store } = useStore({ store: options?.store })
+  const { store } = useStore()
 
   if (
     store.schema.tables.has(table.sqliteDef.name) === false &&
@@ -105,25 +105,28 @@ export const useRow: {
   const idStr = id === SessionIdSymbol ? 'session' : id
   const rowQuery = table.query.row as any
 
-  type QueryDef = LiveQueryDef<RowQuery.Result<TTableDef>, QueryInfo.Row>
-  const queryDef: QueryDef = React.useMemo(
-    () =>
+  type Query$ = LiveQuery<RowQuery.Result<TTableDef>, QueryInfo.Row>
+  const { query$, otelContext } = useMakeScopedQuery(
+    (otelContext) =>
       DbSchema.tableIsSingleton(table)
-        ? queryDb(rowQuery(), {})
-        : queryDb(rowQuery(id!, { insertValues: insertValues! }), { deps: idStr! }),
-    [id, insertValues, rowQuery, table, idStr],
+        ? (queryDb(rowQuery(), { reactivityGraph, otelContext }) as any as Query$)
+        : (queryDb(rowQuery(id!, { insertValues: insertValues! }), { reactivityGraph, otelContext }) as any as Query$),
+    [idStr!, tableName],
+    {
+      otel: {
+        spanName: `LiveStore:useRow:${tableName}${idStr === undefined ? '' : `:${idStr}`}`,
+        attributes: { id: idStr },
+      },
+    },
   )
 
-  const queryRef = useQueryRef(queryDef, {
-    otelSpanName: `LiveStore:useRow:${tableName}${idStr === undefined ? '' : `:${idStr}`}`,
-    store: options?.store,
-  })
+  const query$Ref = useQueryRef(query$, otelContext) as React.MutableRefObject<RowQuery.Result<TTableDef>>
 
   const setState = React.useMemo<StateSetters<TTableDef>>(() => {
     if (table.options.isSingleColumn) {
       return (newValueOrFn: RowQuery.Result<TTableDef>) => {
-        const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(queryRef.valueRef.current) : newValueOrFn
-        if (queryRef.valueRef.current === newValue) return
+        const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current) : newValueOrFn
+        if (query$Ref.current === newValue) return
 
         // NOTE we need to account for the short-hand syntax for single-column+singleton tables
         if (table.options.isSingleton) {
@@ -138,11 +141,11 @@ export const useRow: {
         ReadonlyRecord.map(sqliteTableDef.columns, (column, columnName) => (newValueOrFn: any) => {
           const newValue =
             // @ts-expect-error TODO fix typing
-            typeof newValueOrFn === 'function' ? newValueOrFn(queryRef.valueRef.current[columnName]) : newValueOrFn
+            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 (queryRef.valueRef.current[columnName] === newValue) return
+          if (query$Ref.current[columnName] === newValue) return
 
           store.mutate(table.update({ where: { id: id ?? 'singleton' }, values: { [columnName]: newValue } }))
           // store.mutate(updateMutationForQueryInfo(query$.queryInfo!, { [columnName]: newValue }))
@@ -151,13 +154,13 @@ export const useRow: {
       setState.setMany = (columnValuesOrFn: Partial<TComponentState>) => {
         const columnValues =
           // @ts-expect-error TODO fix typing
-          typeof columnValuesOrFn === 'function' ? columnValuesOrFn(queryRef.valueRef.current) : columnValuesOrFn
+          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]) => queryRef.valueRef.current[columnName] === value)
+          Object.entries(columnValues).every(([columnName, value]) => query$Ref.current[columnName] === value)
         ) {
           return
         }
@@ -168,9 +171,9 @@ export const useRow: {
 
       return setState as any
     }
-  }, [id, queryRef.valueRef, sqliteTableDef.columns, store, table])
+  }, [id, query$Ref, sqliteTableDef.columns, store, table])
 
-  return [queryRef.valueRef.current, setState, queryRef.queryRcRef.value]
+  return [query$Ref.current, setState, query$]
 }
 
 export type Dispatch<A> = (action: A) => void