@livestore/react 0.3.0-dev.10 → 0.3.0-dev.12

package/src/useRow.test.tsx

@@ -1,32 +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' },
@@ -35,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 { wrapper, 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' },
@@ -75,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 renderCount = makeRenderCount()
+      const { wrapper, store, 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' },
@@ -104,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
 
@@ -161,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)`,
@@ -177,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)`,
@@ -201,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 }
@@ -239,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')
@@ -257,9 +231,10 @@ describe('useRow', () => {
       expect(renderCount.val).toBe(2)
 
       unmount()
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
+    }),
+  )
 
-  describe('otel', () => {
+  Vitest.describe('otel', () => {
     const provider = new BasicTracerProvider({})
     provider.register()
 
@@ -277,20 +252,17 @@ describe('useRow', () => {
         const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
         await Effect.gen(function* () {
-          const { wrapper, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvcReact({
-            useGlobalReactivityGraph: false,
+          const { wrapper, store, renderCount } = yield* makeTodoMvcReact({
             otelContext,
             otelTracer,
             strictMode,
           })
 
-          const renderCount = makeRenderCount()
-
-          const { result, rerender, unmount } = renderHook(
+          const { result, rerender, unmount } = 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' },
@@ -300,13 +272,9 @@ describe('useRow', () => {
           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')`,
-              }),
-            ),
-          )
+          // 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')
 
@@ -316,13 +284,11 @@ describe('useRow', () => {
 
           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') {
+            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((_) => {

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,
@@ -53,9 +51,11 @@ export const useRow: {
   >(
     table: TTableDef,
     // TODO adjust so it works with arbitrary primary keys or unique constraints
-    id: string | SessionIdSymbol,
-    options?: UseRowOptionsBase & Partial<RowQuery.RequiredColumnsOptions<TTableDef>>,
+    id: string | SessionIdSymbol | number,
+    options?: Partial<RowQuery.RequiredColumnsOptions<TTableDef>> & { store?: Store },
   ): UseRowResult<TTableDef>
+
+  // isSingleton: false
   <
     TTableDef extends DbSchema.TableDef<
       DbSchema.DefaultSqliteTableDef,
@@ -64,8 +64,8 @@ export const useRow: {
   >(
     table: TTableDef,
     // TODO adjust so it works with arbitrary primary keys or unique constraints
-    id: string | SessionIdSymbol,
-    options: UseRowOptionsBase & RowQuery.RequiredColumnsOptions<TTableDef>,
+    id: string | SessionIdSymbol | number,
+    options: RowQuery.RequiredColumnsOptions<TTableDef> & { store?: Store },
   ): UseRowResult<TTableDef>
 } = <
   TTableDef extends DbSchema.TableDef<
@@ -74,14 +74,19 @@ export const useRow: {
   >,
 >(
   table: TTableDef,
-  idOrOptions?: string | SessionIdSymbol | 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 ? idOrOptions : undefined
-  const options: (UseRowOptionsBase & Partial<RowQuery.RequiredColumnsOptions<TTableDef>>) | undefined =
-    typeof idOrOptions === 'string' || idOrOptions === SessionIdSymbol ? options_ : idOrOptions
-  const { insertValues, reactivityGraph } = options ?? {}
+  const id =
+    typeof idOrOptions === 'string' || idOrOptions === SessionIdSymbol || typeof idOrOptions === 'number'
+      ? idOrOptions
+      : undefined
+  const options: (Partial<RowQuery.RequiredColumnsOptions<TTableDef>> & { store?: Store }) | undefined =
+    typeof idOrOptions === 'string' || idOrOptions === SessionIdSymbol || typeof idOrOptions === 'number'
+      ? options_
+      : idOrOptions
+  const { insertValues } = options ?? {}
 
   type TComponentState = SqliteDsl.FromColumns.RowDecoded<TTableDef['sqliteDef']['columns']>
 
@@ -91,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 &&
@@ -102,31 +107,28 @@ export const useRow: {
 
   // console.debug('useRow', tableName, id)
 
-  const idStr = id === SessionIdSymbol ? 'session' : id
+  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$),
-    [idStr!, tableName],
-    {
-      otel: {
-        spanName: `LiveStore:useRow:${tableName}${idStr === undefined ? '' : `:${idStr}`}`,
-        attributes: { id: idStr },
-      },
-    },
+        ? queryDb(rowQuery(), {})
+        : queryDb(rowQuery(id!, { insertValues: insertValues! }), { deps: idVal! }),
+    [id, insertValues, rowQuery, table, idVal],
   )
 
-  const query$Ref = useQueryRef(query$, otelContext) as React.RefObject<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) {
@@ -141,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 }))
@@ -154,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
         }
@@ -171,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/useScopedQuery.test.tsx

@@ -1,96 +0,0 @@
-import * as LiveStore from '@livestore/livestore'
-import { queryDb } from '@livestore/livestore'
-import { Effect, Schema } from '@livestore/utils/effect'
-import { render, renderHook } from '@testing-library/react'
-import React from 'react'
-// @ts-expect-error no types
-import * as ReactWindow from 'react-window'
-import { describe, expect, it } from 'vitest'
-
-import { makeTodoMvcReact, tables, todos } from './__tests__/fixture.js'
-import * as LiveStoreReact from './mod.js'
-
-describe('useScopedQuery', () => {
-  it('simple', () =>
-    Effect.gen(function* () {
-      const { wrapper, store, makeRenderCount } = yield* makeTodoMvcReact()
-
-      const renderCount = makeRenderCount()
-
-      store.mutate(
-        todos.insert({ id: 't1', text: 'buy milk', completed: false }),
-        todos.insert({ id: 't2', text: 'buy bread', completed: false }),
-      )
-
-      const queryMap = new Map<string, LiveStore.LiveQuery<any>>()
-
-      const { rerender, result, unmount } = renderHook(
-        (id: string) => {
-          renderCount.inc()
-
-          return LiveStoreReact.useScopedQuery(() => {
-            const query$ = queryDb({
-              query: `select * from todos where id = '${id}'`,
-              schema: Schema.Array(tables.todos.schema),
-            })
-            queryMap.set(id, query$)
-            return query$
-          }, id)
-        },
-        { wrapper, initialProps: 't1' },
-      )
-
-      expect(result.current.length).toBe(1)
-      expect(result.current[0]!.text).toBe('buy milk')
-      expect(renderCount.val).toBe(1)
-      expect(queryMap.get('t1')!.runs).toBe(1)
-
-      rerender('t2')
-
-      expect(result.current.length).toBe(1)
-      expect(result.current[0]!.text).toBe('buy bread')
-      expect(renderCount.val).toBe(2)
-      expect(queryMap.get('t1')!.runs).toBe(1)
-      expect(queryMap.get('t2')!.runs).toBe(1)
-
-      unmount()
-
-      expect(queryMap.get('t2')!.runs).toBe(1)
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
-
-  // NOTE this test covers some special react lifecyle paths which I couldn't easily reproduce without react-window
-  // it basically causes a "query swap" in the `useMemo` and both a `useEffect` cleanup call.
-  // To handle this properly we introduced the `_tag: 'destroyed'` state in the `spanAlreadyStartedCache`.
-  it('should work for a list with react-window', () =>
-    Effect.gen(function* () {
-      const { wrapper } = yield* makeTodoMvcReact()
-
-      const ListWrapper: React.FC<{ numItems: number }> = ({ numItems }) => {
-        return (
-          <ReactWindow.FixedSizeList
-            height={100}
-            width={100}
-            itemSize={10}
-            itemCount={numItems}
-            itemData={Array.from({ length: numItems }, (_, i) => i).reverse()}
-          >
-            {ListItem}
-          </ReactWindow.FixedSizeList>
-        )
-      }
-
-      const ListItem: React.FC<{ data: ReadonlyArray<number>; index: number }> = ({ data: ids, index }) => {
-        const id = ids[index]!
-        const res = LiveStoreReact.useScopedQuery(() => LiveStore.computed(() => id, { label: `ListItem.${id}` }), id)
-        return <div role="listitem">{res}</div>
-      }
-
-      const renderResult = render(<ListWrapper numItems={1} />, { wrapper })
-
-      expect(renderResult.container.textContent).toBe('0')
-
-      renderResult.rerender(<ListWrapper numItems={2} />)
-
-      expect(renderResult.container.textContent).toBe('10')
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
-})