@livestore/livestore 0.0.56-dev.2 → 0.0.56

package/src/react/useRow.test.tsx

@@ -1,4 +1,4 @@
-import { ReadonlyRecord, Schema } from '@livestore/utils/effect'
+import { Effect, ReadonlyRecord, Schema } from '@livestore/utils/effect'
 import * as otel from '@opentelemetry/api'
 import { BasicTracerProvider, InMemorySpanExporter, SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base'
 import { render, renderHook } from '@testing-library/react'
@@ -13,242 +13,252 @@ import type { StackInfo } from './utils/stack-info.js'
 
 // NOTE running tests concurrently doesn't work with the default global db graph
 describe.concurrent('useRow', () => {
-  it('should update the data based on component key', async () => {
-    using inputs = await makeTodoMvc({ useGlobalReactivityGraph: false })
+  it('should update the data based on component key', () =>
+    Effect.gen(function* () {
+      const { wrapper, AppComponentSchema, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvc({
+        useGlobalReactivityGraph: false,
+      })
 
-    const { wrapper, AppComponentSchema, store, reactivityGraph, makeRenderCount } = inputs
-
-    const renderCount = makeRenderCount()
+      const renderCount = makeRenderCount()
 
-    const { result, rerender } = renderHook(
-      (userId: string) => {
-        renderCount.inc()
+      const { result, rerender } = renderHook(
+        (userId: string) => {
+          renderCount.inc()
 
-        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
-        return { state, setState }
-      },
-      { wrapper, initialProps: 'u1' },
-    )
+          const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
+          return { state, setState }
+        },
+        { wrapper, initialProps: 'u1' },
+      )
 
-    expect(result.current.state.id).toBe('u1')
-    expect(result.current.state.username).toBe('')
-    expect(renderCount.val).toBe(1)
+      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')`,
-        }),
-      ),
-    )
+      React.act(() =>
+        store.mutate(
+          LiveStore.rawSqlMutation({
+            sql: LiveStore.sql`INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')`,
+          }),
+        ),
+      )
 
-    rerender('u2')
+      rerender('u2')
 
-    expect(result.current.state.id).toBe('u2')
-    expect(result.current.state.username).toBe('username_u2')
-    expect(renderCount.val).toBe(2)
-  })
+      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', async () => {
-    using inputs = await makeTodoMvc({ useGlobalReactivityGraph: false })
-
-    const { wrapper, AppComponentSchema, reactivityGraph, makeRenderCount } = inputs
+  it('should update the data reactively - via setState', () =>
+    Effect.gen(function* () {
+      const { wrapper, AppComponentSchema, reactivityGraph, makeRenderCount } = yield* makeTodoMvc({
+        useGlobalReactivityGraph: false,
+      })
 
-    const renderCount = makeRenderCount()
-
-    const { result } = renderHook(
-      (userId: string) => {
-        renderCount.inc()
+      const renderCount = makeRenderCount()
 
-        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
-        return { state, setState }
-      },
-      { wrapper, initialProps: 'u1' },
-    )
+      const { result } = 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(AppComponentSchema, userId, { reactivityGraph })
+          return { state, setState }
+        },
+        { wrapper, initialProps: 'u1' },
+      )
 
-    React.act(() => result.current.setState.username('username_u1_hello'))
+      expect(result.current.state.id).toBe('u1')
+      expect(result.current.state.username).toBe('')
+      expect(renderCount.val).toBe(1)
 
-    expect(result.current.state.id).toBe('u1')
-    expect(result.current.state.username).toBe('username_u1_hello')
-    expect(renderCount.val).toBe(2)
-  })
+      React.act(() => result.current.setState.username('username_u1_hello'))
 
-  it('should update the data reactively - via raw store mutation', async () => {
-    using inputs = await makeTodoMvc({ useGlobalReactivityGraph: false })
+      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))
 
-    const { wrapper, AppComponentSchema, store, reactivityGraph, makeRenderCount } = inputs
+  it('should update the data reactively - via raw store mutation', () =>
+    Effect.gen(function* () {
+      const { wrapper, AppComponentSchema, store, reactivityGraph, makeRenderCount } = yield* makeTodoMvc({
+        useGlobalReactivityGraph: false,
+      })
 
-    const renderCount = makeRenderCount()
+      const renderCount = makeRenderCount()
 
-    const { result } = renderHook(
-      (userId: string) => {
-        renderCount.inc()
+      const { result } = renderHook(
+        (userId: string) => {
+          renderCount.inc()
 
-        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
-        return { state, setState }
-      },
-      { wrapper, initialProps: 'u1' },
-    )
+          const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
+          return { state, setState }
+        },
+        { wrapper, initialProps: 'u1' },
+      )
 
-    expect(result.current.state.id).toBe('u1')
-    expect(result.current.state.username).toBe('')
-    expect(renderCount.val).toBe(1)
+      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`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)
-  })
+      React.act(() =>
+        store.mutate(
+          LiveStore.rawSqlMutation({
+            sql: LiveStore.sql`UPDATE UserInfo SET username = 'username_u1_hello' WHERE id = 'u1';`,
+          }),
+        ),
+      )
 
-  it('should work for a larger app', async () => {
-    using inputs = await makeTodoMvc({ useGlobalReactivityGraph: false })
-    const { wrapper, store, reactivityGraph, makeRenderCount, AppRouterSchema } = inputs
+      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', () =>
+    Effect.gen(function* () {
+      const { wrapper, store, reactivityGraph, makeRenderCount, AppRouterSchema } = yield* makeTodoMvc({
+        useGlobalReactivityGraph: false,
+      })
+
+      const allTodos$ = LiveStore.querySQL(`select * from todos`, {
+        label: 'allTodos',
+        schema: Schema.Array(tables.todos.schema),
+        reactivityGraph,
+      })
+
+      const appRouterRenderCount = makeRenderCount()
+      let globalSetState: LiveStoreReact.StateSetters<typeof AppRouterSchema> | undefined
+      const AppRouter: React.FC = () => {
+        appRouterRenderCount.inc()
+
+        const [state, setState] = LiveStoreReact.useRow(AppRouterSchema, { reactivityGraph })
+
+        globalSetState = setState
+
+        return (
+          <div>
+            <TasksList setTaskId={setState.currentTaskId} />
+            <div role="current-id">Current Task Id: {state.currentTaskId ?? '-'}</div>
+            {state.currentTaskId ? <TaskDetails id={state.currentTaskId} /> : <div>Click on a task to see details</div>}
+          </div>
+        )
+      }
 
-    const allTodos$ = LiveStore.querySQL(`select * from todos`, {
-      label: 'allTodos',
-      schema: Schema.Array(tables.todos.schema),
-      reactivityGraph,
-    })
+      const TasksList: React.FC<{ setTaskId: (_: string) => void }> = ({ setTaskId }) => {
+        const allTodos = LiveStoreReact.useQuery(allTodos$)
+
+        return (
+          <div>
+            {allTodos.map((_) => (
+              <div key={_.id} onClick={() => setTaskId(_.id)}>
+                {_.id}
+              </div>
+            ))}
+          </div>
+        )
+      }
 
-    const appRouterRenderCount = makeRenderCount()
-    let globalSetState: LiveStoreReact.StateSetters<typeof AppRouterSchema> | undefined
-    const AppRouter: React.FC = () => {
-      appRouterRenderCount.inc()
+      const TaskDetails: React.FC<{ id: string }> = ({ id }) => {
+        const [todo] = LiveStoreReact.useRow(todos, id, { reactivityGraph })
+        return <div role="content">{JSON.stringify(todo)}</div>
+      }
 
-      const [state, setState] = LiveStoreReact.useRow(AppRouterSchema, { reactivityGraph })
+      const renderResult = render(<AppRouter />, { wrapper })
 
-      globalSetState = setState
+      expect(appRouterRenderCount.val).toBe(1)
 
-      return (
-        <div>
-          <TasksList setTaskId={setState.currentTaskId} />
-          <div role="current-id">Current Task Id: {state.currentTaskId ?? '-'}</div>
-          {state.currentTaskId ? <TaskDetails id={state.currentTaskId} /> : <div>Click on a task to see details</div>}
-        </div>
-      )
-    }
-
-    const TasksList: React.FC<{ setTaskId: (_: string) => void }> = ({ setTaskId }) => {
-      const allTodos = LiveStoreReact.useQuery(allTodos$)
-
-      return (
-        <div>
-          {allTodos.map((_) => (
-            <div key={_.id} onClick={() => setTaskId(_.id)}>
-              {_.id}
-            </div>
-          ))}
-        </div>
+      React.act(() =>
+        store.mutate(
+          LiveStore.rawSqlMutation({
+            sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
+          }),
+        ),
       )
-    }
-
-    const TaskDetails: React.FC<{ id: string }> = ({ id }) => {
-      const [todo] = LiveStoreReact.useRow(todos, id, { reactivityGraph })
-      return <div role="content">{JSON.stringify(todo)}</div>
-    }
 
-    const renderResult = render(<AppRouter />, { wrapper })
+      expect(appRouterRenderCount.val).toBe(1)
+      expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: -"')
 
-    expect(appRouterRenderCount.val).toBe(1)
+      React.act(() => globalSetState!.currentTaskId('t1'))
 
-    React.act(() =>
-      store.mutate(
-        LiveStore.rawSqlMutation({
-          sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0)`,
-        }),
-      ),
-    )
+      expect(appRouterRenderCount.val).toBe(2)
+      expect(renderResult.getByRole('content').innerHTML).toMatchInlineSnapshot(
+        `"{"completed":false,"id":"t1","text":"buy milk"}"`,
+      )
 
-    expect(appRouterRenderCount.val).toBe(1)
-    expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: -"')
+      expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t1"')
 
-    React.act(() => globalSetState!.currentTaskId('t1'))
+      React.act(() =>
+        store.mutate(
+          LiveStore.rawSqlMutation({
+            sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t2', 'buy eggs', 0)`,
+          }),
+          AppRouterSchema.update({ where: { id: 'singleton' }, values: { currentTaskId: 't2' } }),
+          LiveStore.rawSqlMutation({
+            sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t3', 'buy bread', 0)`,
+          }),
+        ),
+      )
 
-    expect(appRouterRenderCount.val).toBe(2)
-    expect(renderResult.getByRole('content').innerHTML).toMatchInlineSnapshot(
-      `"{"completed":false,"id":"t1","text":"buy milk"}"`,
-    )
+      expect(appRouterRenderCount.val).toBe(3)
+      expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t2"')
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
 
-    expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t1"')
+  it('should work for a useRow query chained with a useTemporary query', () =>
+    Effect.gen(function* () {
+      const { store, wrapper, AppComponentSchema, reactivityGraph, makeRenderCount } = yield* makeTodoMvc({
+        useGlobalReactivityGraph: false,
+      })
+      const renderCount = makeRenderCount()
 
-    React.act(() =>
       store.mutate(
-        LiveStore.rawSqlMutation({
-          sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t2', 'buy eggs', 0)`,
-        }),
-        AppRouterSchema.update({ where: { id: 'singleton' }, values: { currentTaskId: 't2' } }),
-        LiveStore.rawSqlMutation({
-          sql: LiveStore.sql`INSERT INTO todos (id, text, completed) VALUES ('t3', 'buy bread', 0)`,
-        }),
-      ),
-    )
-
-    expect(appRouterRenderCount.val).toBe(3)
-    expect(renderResult.getByRole('current-id').innerHTML).toMatchInlineSnapshot('"Current Task Id: t2"')
-  })
+        todos.insert({ id: 't1', text: 'buy milk', completed: false }),
+        todos.insert({ id: 't2', text: 'buy bread', completed: false }),
+      )
 
-  it('should work for a useRow query chained with a useTemporary query', async () => {
-    using inputs = await makeTodoMvc({ useGlobalReactivityGraph: false })
-    const { store, wrapper, AppComponentSchema, reactivityGraph, makeRenderCount } = inputs
-    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 } = renderHook(
-      (userId: string) => {
-        renderCount.inc()
-
-        const [_row, _setRow, rowState$] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
-        const todos = LiveStoreReact.useTemporaryQuery(
-          () =>
-            LiveStore.querySQL((get) => LiveStore.sql`select * from todos where text like '%${get(rowState$).text}%'`, {
-              schema: Schema.Array(tables.todos.schema),
-              reactivityGraph,
-              label: 'todosFiltered',
-            }),
-          userId,
-        )
+      const { result, unmount, rerender } = renderHook(
+        (userId: string) => {
+          renderCount.inc()
 
-        return { todos }
-      },
-      { wrapper, initialProps: 'u1' },
-    )
+          const [_row, _setRow, rowState$] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
+          const todos = LiveStoreReact.useTemporaryQuery(
+            () =>
+              LiveStore.querySQL(
+                (get) => LiveStore.sql`select * from todos where text like '%${get(rowState$).text}%'`,
+                {
+                  schema: Schema.Array(tables.todos.schema),
+                  reactivityGraph,
+                  label: 'todosFiltered',
+                },
+              ),
+            userId,
+          )
 
-    React.act(() =>
-      store.mutate(
-        LiveStore.rawSqlMutation({
-          sql: LiveStore.sql`INSERT INTO UserInfo (id, username, text) VALUES ('u2', 'username_u2', 'milk')`,
-        }),
-      ),
-    )
+          return { todos }
+        },
+        { wrapper, initialProps: 'u1' },
+      )
+
+      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)
+      expect(result.current.todos.length).toBe(2)
+      // expect(result.current.state.username).toBe('')
+      expect(renderCount.val).toBe(1)
 
-    rerender('u2')
+      rerender('u2')
 
-    expect(result.current.todos.length).toBe(1)
-    expect(renderCount.val).toBe(2)
+      expect(result.current.todos.length).toBe(1)
+      expect(renderCount.val).toBe(2)
 
-    unmount()
-  })
+      unmount()
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
 
   let cachedProvider: BasicTracerProvider | undefined
 
@@ -266,43 +276,46 @@ describe.concurrent('useRow', () => {
     const otelContext = otel.trace.setSpan(otel.context.active(), span)
 
     it('should update the data based on component key', async () => {
-      using inputs = await makeTodoMvc({ useGlobalReactivityGraph: false, otelContext, otelTracer })
+      const { strictMode } = await Effect.gen(function* () {
+        const { wrapper, AppComponentSchema, store, reactivityGraph, makeRenderCount, strictMode } = yield* makeTodoMvc(
+          { useGlobalReactivityGraph: false, otelContext, otelTracer },
+        )
 
-      const { wrapper, AppComponentSchema, store, reactivityGraph, makeRenderCount, strictMode } = inputs
+        const renderCount = makeRenderCount()
 
-      const renderCount = makeRenderCount()
+        const { result, rerender, unmount } = renderHook(
+          (userId: string) => {
+            renderCount.inc()
 
-      const { result, rerender, unmount } = renderHook(
-        (userId: string) => {
-          renderCount.inc()
+            const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
+            return { state, setState }
+          },
+          { wrapper, initialProps: 'u1' },
+        )
 
-          const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
-          return { state, setState }
-        },
-        { wrapper, initialProps: 'u1' },
-      )
+        expect(result.current.state.id).toBe('u1')
+        expect(result.current.state.username).toBe('')
+        expect(renderCount.val).toBe(1)
 
-      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')`,
+            }),
+          ),
+        )
 
-      React.act(() =>
-        store.mutate(
-          LiveStore.rawSqlMutation({
-            sql: LiveStore.sql`INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')`,
-          }),
-        ),
-      )
+        rerender('u2')
 
-      rerender('u2')
+        expect(result.current.state.id).toBe('u2')
+        expect(result.current.state.username).toBe('username_u2')
+        expect(renderCount.val).toBe(2)
 
-      expect(result.current.state.id).toBe('u2')
-      expect(result.current.state.username).toBe('username_u2')
-      expect(renderCount.val).toBe(2)
+        unmount()
+        span.end()
 
-      unmount()
-      await store.destroy()
-      span.end()
+        return { strictMode }
+      }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise)
 
       const mapAttributes = (attributes: otel.Attributes) => {
         return ReadonlyRecord.map(attributes, (val, key) => {
@@ -371,7 +384,7 @@ describe.concurrent('useRow', () => {
                         },
                         "children": [
                           {
-                            "_name": "LiveStore:mutatetWithoutRefresh",
+                            "_name": "LiveStore:mutateWithoutRefresh",
                             "attributes": {
                               "livestore.args": "{
             "sql": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')"
@@ -420,7 +433,7 @@ describe.concurrent('useRow', () => {
                     },
                     "children": [
                       {
-                        "_name": "LiveStore:mutatetWithoutRefresh",
+                        "_name": "LiveStore:mutateWithoutRefresh",
                         "attributes": {
                           "livestore.args": "{
             "id": "u1"
@@ -534,7 +547,7 @@ describe.concurrent('useRow', () => {
                         },
                         "children": [
                           {
-                            "_name": "LiveStore:mutatetWithoutRefresh",
+                            "_name": "LiveStore:mutateWithoutRefresh",
                             "attributes": {
                               "livestore.args": "{
             "sql": "INSERT INTO UserInfo (id, username) VALUES ('u2', 'username_u2')"
@@ -583,7 +596,7 @@ describe.concurrent('useRow', () => {
                     },
                     "children": [
                       {
-                        "_name": "LiveStore:mutatetWithoutRefresh",
+                        "_name": "LiveStore:mutateWithoutRefresh",
                         "attributes": {
                           "livestore.args": "{
             "id": "u1"

package/src/react/useTemporaryQuery.test.tsx

@@ -1,4 +1,4 @@
-import { Schema } from '@livestore/utils/effect'
+import { Effect, Schema } from '@livestore/utils/effect'
 import { renderHook } from '@testing-library/react'
 import { describe, expect, it } from 'vitest'
 
@@ -8,48 +8,49 @@ import { querySQL } from '../reactiveQueries/sql.js'
 import * as LiveStoreReact from './index.js'
 
 describe('useTemporaryQuery', () => {
-  it('simple', async () => {
-    const { wrapper, store, makeRenderCount } = await makeTodoMvc()
-
-    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.useTemporaryQuery(() => {
-          const query$ = querySQL(`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)
-  })
+  it('simple', () =>
+    Effect.gen(function* () {
+      const { wrapper, store, makeRenderCount } = yield* makeTodoMvc()
+
+      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.useTemporaryQuery(() => {
+            const query$ = querySQL(`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))
 })