@livestore/react 0.0.0-snapshot-d9d66b354a9f4cfae987725d38971992ff14e4ad → 0.0.0-snapshot-1d99fea7d2ce2c7a5d9ed0a3752f8a7bda6bc3db

package/src/useRow.test.tsx

@@ -1,30 +1,34 @@
 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 { render, renderHook } from '@testing-library/react'
+import * as ReactTesting from '@testing-library/react'
 import React from 'react'
-import { describe, expect, it } from 'vitest'
+import { beforeEach, expect, it } from 'vitest'
 
-import { AppComponentSchema, AppRouterSchema, makeTodoMvcReact, tables, todos } from './__tests__/fixture.js'
+import { 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
-describe('useRow', () => {
-  it('should update the data based on component key', () =>
-    Effect.gen(function* () {
-      const { wrapper, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
-        useGlobalReactivityGraph: false,
-      })
+Vitest.describe('useRow', () => {
+  beforeEach(() => {
+    __resetUseRcResourceCache()
+  })
 
-      const renderCount = makeRenderCount()
+  Vitest.scopedLive('should update the data based on component key', () =>
+    Effect.gen(function* () {
+      const { wrapper, store, renderCount } = yield* makeTodoMvcReact({})
 
-      const { result, rerender } = renderHook(
+      const { result, rerender } = ReactTesting.renderHook(
         (userId: string) => {
           renderCount.inc()
 
-          const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
+          const [state, setState] = LiveStoreReact.useRow(tables.userInfo, userId)
           return { state, setState }
         },
         { wrapper, initialProps: 'u1' },
@@ -33,37 +37,29 @@ describe('useRow', () => {
       expect(result.current.state.id).toBe('u1')
       expect(result.current.state.username).toBe('')
       expect(renderCount.val).toBe(1)
-
-      React.act(() =>
-        store.mutate(
-          LiveStore.rawSqlMutation({
-            sql: LiveStore.sql`INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')`,
-          }),
-        ),
-      )
+      expect(store.reactivityGraph.getSnapshot({ includeResults: true })).toMatchSnapshot()
+      store.mutate(tables.userInfo.insert({ id: 'u2', username: '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
 
-  it('should update the data reactively - via setState', () =>
+  Vitest.scopedLive('should update the data reactively - via setState', () =>
     Effect.gen(function* () {
-      const { wrapper, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
-        useGlobalReactivityGraph: false,
-      })
-
-      const renderCount = makeRenderCount()
+      const { wrapper, renderCount } = yield* makeTodoMvcReact({})
 
-      const { result } = renderHook(
+      const { result } = ReactTesting.renderHook(
         (userId: string) => {
           renderCount.inc()
 
-          const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
+          const [state, setState] = LiveStoreReact.useRow(tables.userInfo, userId)
           return { state, setState }
         },
         { wrapper, initialProps: 'u1' },
@@ -73,26 +69,23 @@ describe('useRow', () => {
       expect(result.current.state.username).toBe('')
       expect(renderCount.val).toBe(1)
 
-      React.act(() => result.current.setState.username('username_u1_hello'))
+      ReactTesting.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))
+    }),
+  )
 
-  it('should update the data reactively - via raw store mutation', () =>
+  Vitest.scopedLive('should update the data reactively - via raw store mutation', () =>
     Effect.gen(function* () {
-      const { wrapper, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
-        useGlobalReactivityGraph: false,
-      })
+      const { wrapper, store, renderCount } = yield* makeTodoMvcReact({})
 
-      const renderCount = makeRenderCount()
-
-      const { result } = renderHook(
+      const { result } = ReactTesting.renderHook(
         (userId: string) => {
           renderCount.inc()
 
-          const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
+          const [state, setState] = LiveStoreReact.useRow(tables.userInfo, userId)
           return { state, setState }
         },
         { wrapper, initialProps: 'u1' },
@@ -102,36 +95,30 @@ describe('useRow', () => {
       expect(result.current.state.username).toBe('')
       expect(renderCount.val).toBe(1)
 
-      React.act(() =>
-        store.mutate(
-          LiveStore.rawSqlMutation({
-            sql: LiveStore.sql`UPDATE UserInfo SET username = 'username_u1_hello' WHERE id = 'u1';`,
-          }),
-        ),
+      ReactTesting.act(() =>
+        store.mutate(tables.userInfo.update({ where: { id: 'u1' }, values: { 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))
+    }),
+  )
 
-  it('should work for a larger app', () =>
+  Vitest.scopedLive('should work for a larger app', () =>
     Effect.gen(function* () {
-      const { wrapper, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
-        useGlobalReactivityGraph: false,
-      })
+      const { wrapper, store, renderCount } = yield* makeTodoMvcReact({})
 
       const allTodos$ = LiveStore.queryDb(
         { query: `select * from todos`, schema: Schema.Array(tables.todos.schema) },
-        { label: 'allTodos', reactivityGraph },
+        { label: 'allTodos' },
       )
 
-      const appRouterRenderCount = makeRenderCount()
       let globalSetState: LiveStoreReact.StateSetters<typeof AppRouterSchema> | undefined
       const AppRouter: React.FC = () => {
-        appRouterRenderCount.inc()
+        renderCount.inc()
 
-        const [state, setState] = LiveStoreReact.useRow(AppRouterSchema, { reactivityGraph })
+        const [state, setState] = LiveStoreReact.useRow(AppRouterSchema)
 
         globalSetState = setState
 
@@ -159,15 +146,15 @@ describe('useRow', () => {
       }
 
       const TaskDetails: React.FC<{ id: string }> = ({ id }) => {
-        const [todo] = LiveStoreReact.useRow(todos, id, { reactivityGraph })
+        const [todo] = LiveStoreReact.useRow(todos, id)
         return <div role="content">{JSON.stringify(todo)}</div>
       }
 
-      const renderResult = render(<AppRouter />, { wrapper })
+      const renderResult = ReactTesting.render(<AppRouter />, { wrapper })
 
-      expect(appRouterRenderCount.val).toBe(1)
+      expect(renderCount.val).toBe(1)
 
-      React.act(() =>
+      ReactTesting.act(() =>
         store.mutate(
           LiveStore.rawSqlMutation({
             sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
@@ -175,19 +162,19 @@ describe('useRow', () => {
         ),
       )
 
-      expect(appRouterRenderCount.val).toBe(1)
+      expect(renderCount.val).toBe(1)
       expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: -"')
 
-      React.act(() => globalSetState!.currentTaskId('t1'))
+      ReactTesting.act(() => globalSetState!.currentTaskId('t1'))
 
-      expect(appRouterRenderCount.val).toBe(2)
+      expect(renderCount.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"')
 
-      React.act(() =>
+      ReactTesting.act(() =>
         store.mutate(
           LiveStore.rawSqlMutation({
             sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t2', 'buy eggs', 0)`,
@@ -199,37 +186,33 @@ describe('useRow', () => {
         ),
       )
 
-      expect(appRouterRenderCount.val).toBe(3)
+      expect(renderCount.val).toBe(3)
       expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t2"')
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
+    }),
+  )
 
-  it('should work for a useRow query chained with a useTemporary query', () =>
+  Vitest.scopedLive('should work for a useRow query chained with a useTemporary query', () =>
     Effect.gen(function* () {
-      const { store, wrapper, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
-        useGlobalReactivityGraph: false,
-      })
-      const renderCount = makeRenderCount()
+      const { store, wrapper, renderCount } = yield* makeTodoMvcReact({})
 
       store.mutate(
         todos.insert({ id: 't1', text: 'buy milk', completed: false }),
         todos.insert({ id: 't2', text: 'buy bread', completed: false }),
       )
 
-      const { result, unmount, rerender } = renderHook(
+      const { result, unmount, rerender } = ReactTesting.renderHook(
         (userId: string) => {
           renderCount.inc()
 
-          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,
+          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
           )
 
           return { todos }
@@ -237,16 +220,9 @@ describe('useRow', () => {
         { wrapper, initialProps: 'u1' },
       )
 
-      React.act(() =>
-        store.mutate(
-          LiveStore.rawSqlMutation({
-            sql: LiveStore.sql`INSERT INTO UserInfo (id, username, text) VALUES ('u2', 'username_u2', 'milk')`,
-          }),
-        ),
-      )
+      ReactTesting.act(() => store.mutate(tables.userInfo.insert({ id: 'u2', username: 'username_u2', text: 'milk' })))
 
       expect(result.current.todos.length).toBe(2)
-      // expect(result.current.state.username).toBe('')
       expect(renderCount.val).toBe(1)
 
       rerender('u2')
@@ -255,90 +231,80 @@ describe('useRow', () => {
       expect(renderCount.val).toBe(2)
 
       unmount()
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
-
-  let cachedProvider: BasicTracerProvider | undefined
+    }),
+  )
 
-  describe('otel', () => {
-    const exporter = new InMemorySpanExporter()
-
-    const provider = cachedProvider ?? new BasicTracerProvider()
-    cachedProvider = provider
-    provider.addSpanProcessor(new SimpleSpanProcessor(exporter))
+  Vitest.describe('otel', () => {
+    const provider = new BasicTracerProvider({})
     provider.register()
 
-    const otelTracer = otel.trace.getTracer('test')
-
-    const span = otelTracer.startSpan('test')
-    const otelContext = otel.trace.setSpan(otel.context.active(), span)
+    it.each([{ strictMode: true }, { strictMode: false }])(
+      'should update the data based on component key strictMode=%s',
+      async ({ strictMode }) => {
+        const exporter = new InMemorySpanExporter()
 
-    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 provider = cachedProvider ?? new BasicTracerProvider({ spanProcessors: [new SimpleSpanProcessor(exporter)] })
+        provider.addSpanProcessor(new SimpleSpanProcessor(exporter))
 
-        const renderCount = makeRenderCount()
+        const otelTracer = otel.trace.getTracer(`testing-${strictMode ? 'strict' : 'non-strict'}`)
 
-        const { result, rerender, unmount } = renderHook(
-          (userId: string) => {
-            renderCount.inc()
-
-            const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
-            return { state, setState }
-          },
-          { wrapper, initialProps: 'u1' },
-        )
+        const span = otelTracer.startSpan('test-root')
+        const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
-        expect(result.current.state.id).toBe('u1')
-        expect(result.current.state.username).toBe('')
-        expect(renderCount.val).toBe(1)
+        await Effect.gen(function* () {
+          const { wrapper, store, renderCount } = yield* makeTodoMvcReact({
+            otelContext,
+            otelTracer,
+            strictMode,
+          })
 
-        React.act(() =>
-          store.mutate(
-            LiveStore.rawSqlMutation({
-              sql: LiveStore.sql`INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')`,
-            }),
-          ),
-        )
+          const { result, rerender, unmount } = ReactTesting.renderHook(
+            (userId: string) => {
+              renderCount.inc()
 
-        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
-        })
-      }
+              const [state, setState] = LiveStoreReact.useRow(tables.userInfo, userId)
+              return { state, setState }
+            },
+            { wrapper, initialProps: 'u1' },
+          )
 
-      // 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')
-      }
-    })
+          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()
+      },
+    )
   })
 })

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

package/src/utils/useStateRefWithReactiveInput.ts

@@ -12,7 +12,7 @@ import React from 'react'
  */
 export const useStateRefWithReactiveInput = <T>(
   inputState: T,
-): [React.MutableRefObject<T>, (newState: T | ((prev: T) => T)) => void] => {
+): [React.RefObject<T>, (newState: T | ((prev: T) => T)) => void] => {
   const [_, rerender] = React.useState(0)
 
   const lastKnownInputStateRef = React.useRef<T>(inputState)