@livestore/react 0.0.58-dev.13 → 0.0.58-dev.14

package/dist/useScopedQuery.test.js

@@ -0,0 +1,59 @@
+import * as LiveStore from '@livestore/livestore';
+import { querySQL } 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();
+        const { rerender, result, unmount } = renderHook((id) => {
+            renderCount.inc();
+            return LiveStoreReact.useScopedQuery(() => {
+                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));
+    // 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 = ({ numItems }) => {
+            return (React.createElement(ReactWindow.FixedSizeList, { height: 100, width: 100, itemSize: 10, itemCount: numItems, itemData: Array.from({ length: numItems }, (_, i) => i).reverse() }, ListItem));
+        };
+        const ListItem = ({ data: ids, index }) => {
+            const id = ids[index];
+            const res = LiveStoreReact.useScopedQuery(() => LiveStore.computed(() => id, { label: `ListItem.${id}` }), id);
+            return React.createElement("div", { role: "listitem" }, res);
+        };
+        const renderResult = render(React.createElement(ListWrapper, { numItems: 1 }), { wrapper });
+        expect(renderResult.container.textContent).toBe('0');
+        renderResult.rerender(React.createElement(ListWrapper, { numItems: 2 }));
+        expect(renderResult.container.textContent).toBe('10');
+    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise));
+});
+//# sourceMappingURL=useScopedQuery.test.js.map

package/dist/useScopedQuery.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScopedQuery.test.js","sourceRoot":"","sources":["../src/useScopedQuery.test.tsx"],"names":[],"mappings":"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"}

package/dist/useTemporaryQuery.d.ts

@@ -8,9 +8,9 @@ export type DepKey = string | number | ReadonlyArray<string | number>;
  *
  * The `key` is used to determine whether the a new query should be created or if the existing one should be reused.
  */
-export declare const useTemporaryQuery: <TResult>(makeQuery: () => LiveQuery<TResult>, key: DepKey) => TResult;
-export declare const useTemporaryQueryRef: <TResult>(makeQuery: () => LiveQuery<TResult>, key: DepKey) => React.MutableRefObject<TResult>;
-export declare const useMakeTemporaryQuery: <TResult, TQueryInfo extends QueryInfo>(makeQuery: (otelContext: otel.Context) => LiveQuery<TResult, TQueryInfo>, key: DepKey, options?: {
+export declare const useScopedQuery: <TResult>(makeQuery: () => LiveQuery<TResult>, key: DepKey) => TResult;
+export declare const useScopedQueryRef: <TResult>(makeQuery: () => LiveQuery<TResult>, key: DepKey) => React.MutableRefObject<TResult>;
+export declare const useMakeScopedQuery: <TResult, TQueryInfo extends QueryInfo>(makeQuery: (otelContext: otel.Context) => LiveQuery<TResult, TQueryInfo>, key: DepKey, options?: {
     otel?: {
         spanName?: string;
         attributes?: otel.Attributes;

package/dist/useTemporaryQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTemporaryQuery.d.ts","sourceRoot":"","sources":["../src/useTemporaryQuery.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,KAAK,IAAI,MAAM,oBAAoB,CAAA;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAA;AAuBzB,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;AAErE;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,aAAa,MAAM,SAAS,CAAC,OAAO,CAAC,OAAO,MAAM,KAAG,OAChD,CAAA;AAE9C,eAAO,MAAM,oBAAoB,GAAI,OAAO,aAC/B,MAAM,SAAS,CAAC,OAAO,CAAC,OAC9B,MAAM,KACV,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAIhC,CAAA;AAED,eAAO,MAAM,qBAAqB,GAAI,OAAO,EAAE,UAAU,SAAS,SAAS,aAC9D,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,OACnE,MAAM,YACD;IACR,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,CAAA;KAC7B,CAAA;CACF,KACA;IAAE,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAAC,WAAW,EAAE,IAAI,CAAC,OAAO,CAAA;CA4ErE,CAAA"}
+{"version":3,"file":"useTemporaryQuery.d.ts","sourceRoot":"","sources":["../src/useTemporaryQuery.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,KAAK,IAAI,MAAM,oBAAoB,CAAA;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAA;AAuBzB,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;AAErE;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,aAAa,MAAM,SAAS,CAAC,OAAO,CAAC,OAAO,MAAM,KAAG,OAChD,CAAA;AAE3C,eAAO,MAAM,iBAAiB,GAAI,OAAO,aAC5B,MAAM,SAAS,CAAC,OAAO,CAAC,OAC9B,MAAM,KACV,KAAK,CAAC,gBAAgB,CAAC,OAAO,CAIhC,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,OAAO,EAAE,UAAU,SAAS,SAAS,aAC3D,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,OACnE,MAAM,YACD;IACR,IAAI,CAAC,EAAE;QACL,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,CAAA;KAC7B,CAAA;CACF,KACA;IAAE,MAAM,EAAE,SAAS,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;IAAC,WAAW,EAAE,IAAI,CAAC,OAAO,CAAA;CA4ErE,CAAA"}

package/dist/useTemporaryQuery.js

@@ -12,12 +12,12 @@ const cache = new Map();
  *
  * The `key` is used to determine whether the a new query should be created or if the existing one should be reused.
  */
-export const useTemporaryQuery = (makeQuery, key) => useTemporaryQueryRef(makeQuery, key).current;
-export const useTemporaryQueryRef = (makeQuery, key) => {
-    const { query$ } = useMakeTemporaryQuery(makeQuery, key);
+export const useScopedQuery = (makeQuery, key) => useScopedQueryRef(makeQuery, key).current;
+export const useScopedQueryRef = (makeQuery, key) => {
+    const { query$ } = useMakeScopedQuery(makeQuery, key);
     return useQueryRef(query$);
 };
-export const useMakeTemporaryQuery = (makeQuery, key, options) => {
+export const useMakeScopedQuery = (makeQuery, key, options) => {
     const { store } = useStore();
     const fullKey = React.useMemo(
     // NOTE We're using the `makeQuery` function body string to make sure the key is unique across the app
@@ -44,7 +44,7 @@ export const useMakeTemporaryQuery = (makeQuery, key, options) => {
             cachedItem.rc++;
             return cachedItem;
         }
-        const spanName = options?.otel?.spanName ?? `LiveStore:useTemporaryQuery:${key}`;
+        const spanName = options?.otel?.spanName ?? `LiveStore:useScopedQuery:${key}`;
         const span = store.otel.tracer.startSpan(spanName, { attributes: options?.otel?.attributes }, store.otel.queriesSpanContext);
         const otelContext = otel.trace.setSpan(otel.context.active(), span);
         const query$ = makeQuery(otelContext);

package/dist/useTemporaryQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTemporaryQuery.js","sourceRoot":"","sources":["../src/useTemporaryQuery.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useTemporaryQuery.js","sourceRoot":"","sources":["../src/useTemporaryQuery.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livestore/react",
-  "version": "0.0.58-dev.13",
+  "version": "0.0.58-dev.14",
   "type": "module",
   "exports": {
     ".": {
@@ -22,10 +22,10 @@
   },
   "dependencies": {
     "@opentelemetry/api": "^1.9.0",
-    "@livestore/common": "0.0.58-dev.13",
-    "@livestore/utils": "0.0.58-dev.13",
-    "@livestore/db-schema": "0.0.58-dev.13",
-    "@livestore/livestore": "0.0.58-dev.13"
+    "@livestore/common": "0.0.58-dev.14",
+    "@livestore/db-schema": "0.0.58-dev.14",
+    "@livestore/livestore": "0.0.58-dev.14",
+    "@livestore/utils": "0.0.58-dev.14"
   },
   "devDependencies": {
     "@opentelemetry/sdk-trace-base": "1.27.0",
@@ -39,7 +39,7 @@
     "typescript": "5.6.3",
     "vite": "5.4.10",
     "vitest": "^2.1.4",
-    "@livestore/web": "0.0.58-dev.13"
+    "@livestore/web": "0.0.58-dev.14"
   },
   "peerDependencies": {
     "react": "^18"

package/src/LiveStoreProvider.test.tsx

@@ -1,6 +1,5 @@
-import type { BootDb } from '@livestore/common'
 import { sql } from '@livestore/common'
-import { querySQL } from '@livestore/livestore'
+import { querySQL, type Store } from '@livestore/livestore'
 import { Schema } from '@livestore/utils/effect'
 import { makeInMemoryAdapter } from '@livestore/web'
 import { render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react'
@@ -30,8 +29,8 @@ describe('LiveStoreProvider', () => {
 
     const Root = ({ forceUpdate }: { forceUpdate: number }) => {
       const bootCb = React.useCallback(
-        (db: BootDb) =>
-          db.execute(sql`INSERT OR IGNORE INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);`),
+        (store: Store) =>
+          store.__execute(sql`INSERT OR IGNORE INTO todos (id, text, completed) VALUES ('t1', 'buy milk', 0);`),
         [],
       )
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -81,8 +80,8 @@ describe('LiveStoreProvider', () => {
 
     const Root = ({ forceUpdate }: { forceUpdate: number }) => {
       const bootCb = React.useCallback(
-        (db: BootDb) =>
-          db.execute(sql`INSERT INTO todos_mising_table (id, text, completed) VALUES ('t1', 'buy milk', 0);`),
+        (store: Store) =>
+          store.__execute(sql`INSERT INTO todos_mising_table (id, text, completed) VALUES ('t1', 'buy milk', 0);`),
         [],
       )
       // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/LiveStoreProvider.tsx

@@ -1,4 +1,4 @@
-import type { Adapter, BootDb, BootStatus, IntentionalShutdownCause } from '@livestore/common'
+import type { Adapter, BootStatus, IntentionalShutdownCause } from '@livestore/common'
 import { UnexpectedError } from '@livestore/common'
 import type { LiveStoreSchema } from '@livestore/common/schema'
 import type {
@@ -7,6 +7,7 @@ import type {
   GraphQLOptions,
   LiveStoreContext as StoreContext_,
   OtelOptions,
+  Store,
 } from '@livestore/livestore'
 import { createStore, StoreAbort, StoreInterrupted } from '@livestore/livestore'
 import { errorToString } from '@livestore/utils'
@@ -17,7 +18,7 @@ import React from 'react'
 
 import { LiveStoreContext } from './LiveStoreContext.js'
 
-interface LiveStoreProviderProps<GraphQLContext> {
+interface LiveStoreProviderProps<GraphQLContext extends BaseGraphQLContext> {
   schema: LiveStoreSchema
   /**
    * The `storeId` can be used to isolate multiple stores from each other.
@@ -30,7 +31,10 @@ interface LiveStoreProviderProps<GraphQLContext> {
    * @default 'default'
    */
   storeId?: string
-  boot?: (db: BootDb, parentSpan: otel.Span) => void | Promise<void> | Effect.Effect<void, unknown, otel.Tracer>
+  boot?: (
+    store: Store<GraphQLContext, LiveStoreSchema>,
+    parentSpan: otel.Span,
+  ) => void | Promise<void> | Effect.Effect<void, unknown, otel.Tracer>
   graphQLOptions?: GraphQLOptions<GraphQLContext>
   otelOptions?: OtelOptions
   renderLoading: (status: BootStatus) => ReactElement

package/src/__tests__/fixture.tsx

@@ -1,4 +1,3 @@
-import { sql } from '@livestore/common'
 import { DbSchema, makeSchema } from '@livestore/common/schema'
 import type { LiveStoreContextRunning } from '@livestore/livestore'
 import { createStore, globalReactivityGraph, makeReactivityGraph } from '@livestore/livestore'
@@ -32,11 +31,15 @@ export const todos = DbSchema.table(
   { deriveMutations: true, isSingleton: false },
 )
 
-export const app = DbSchema.table('app', {
-  id: DbSchema.text({ primaryKey: true }),
-  newTodoText: DbSchema.text({ default: '', nullable: true }),
-  filter: DbSchema.text({ default: 'all', nullable: false }),
-})
+export const app = DbSchema.table(
+  'app',
+  {
+    id: DbSchema.text({ primaryKey: true, default: 'static' }),
+    newTodoText: DbSchema.text({ default: '', nullable: true }),
+    filter: DbSchema.text({ default: 'all', nullable: false }),
+  },
+  { isSingleton: true },
+)
 
 export const AppComponentSchema = DbSchema.table(
   'UserInfo',
@@ -92,7 +95,6 @@ export const makeTodoMvcReact = ({
     const store = yield* createStore({
       schema,
       storeId: 'default',
-      boot: (db) => db.execute(sql`INSERT OR IGNORE INTO app (id, newTodoText, filter) VALUES ('static', '', 'all');`),
       adapter: makeInMemoryAdapter(),
       reactivityGraph,
       otelOptions: {

package/src/experimental/components/LiveList.tsx

@@ -3,7 +3,7 @@ import { computed } from '@livestore/livestore'
 import React from 'react'
 
 import { useQuery } from '../../useQuery.js'
-import { useTemporaryQuery } from '../../useTemporaryQuery.js'
+import { useScopedQuery } from '../../useScopedQuery.js'
 
 /*
 TODO:
@@ -33,7 +33,7 @@ export const LiveList = <TItem,>({ items$, renderItem, getKey }: LiveListProps<T
   React.useEffect(() => setHasMounted(true), [])
 
   const keysCb = React.useCallback(() => computed((get) => get(items$).map(getKey)), [getKey, items$])
-  const keys = useTemporaryQuery(keysCb, 'fixed')
+  const keys = useScopedQuery(keysCb, 'fixed')
   const arr = React.useMemo(
     () =>
       keys.map(

package/src/mod.ts

@@ -1,7 +1,7 @@
 export { LiveStoreContext, useStore } from './LiveStoreContext.js'
 export { LiveStoreProvider } from './LiveStoreProvider.js'
 export { useQuery } from './useQuery.js'
-export { useTemporaryQuery } from './useTemporaryQuery.js'
+export { useScopedQuery } from './useScopedQuery.js'
 export { useStackInfo } from './utils/stack-info.js'
 export {
   useRow,

package/src/useRow.test.tsx

@@ -221,7 +221,7 @@ describe('useRow', () => {
           renderCount.inc()
 
           const [_row, _setRow, rowState$] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
-          const todos = LiveStoreReact.useTemporaryQuery(
+          const todos = LiveStoreReact.useScopedQuery(
             () =>
               LiveStore.querySQL(
                 (get) => LiveStore.sql`select * from todos where text like '%${get(rowState$).text}%'`,

package/src/useRow.ts

@@ -10,7 +10,7 @@ import React from 'react'
 
 import { useStore } from './LiveStoreContext.js'
 import { useQueryRef } from './useQuery.js'
-import { useMakeTemporaryQuery } from './useTemporaryQuery.js'
+import { useMakeScopedQuery } from './useScopedQuery.js'
 
 export type UseRowResult<TTableDef extends DbSchema.TableDef> = [
   row: RowResult<TTableDef>,
@@ -96,7 +96,7 @@ export const useRow: {
 
   const idStr = id === SessionIdSymbol ? 'session' : id
 
-  const { query$, otelContext } = useMakeTemporaryQuery(
+  const { query$, otelContext } = useMakeScopedQuery(
     (otelContext) =>
       DbSchema.tableIsSingleton(table)
         ? (rowQuery(table, { otelContext, reactivityGraph }) as LiveQuery<RowResult<TTableDef>, QueryInfo>)

package/src/{useTemporaryQuery.test.tsx → useScopedQuery.test.tsx}

@@ -10,7 +10,7 @@ import { describe, expect, it } from 'vitest'
 import { makeTodoMvcReact, tables, todos } from './__tests__/fixture.js'
 import * as LiveStoreReact from './mod.js'
 
-describe('useTemporaryQuery', () => {
+describe('useScopedQuery', () => {
   it('simple', () =>
     Effect.gen(function* () {
       const { wrapper, store, makeRenderCount } = yield* makeTodoMvcReact()
@@ -28,7 +28,7 @@ describe('useTemporaryQuery', () => {
         (id: string) => {
           renderCount.inc()
 
-          return LiveStoreReact.useTemporaryQuery(() => {
+          return LiveStoreReact.useScopedQuery(() => {
             const query$ = querySQL(`select * from todos where id = '${id}'`, {
               schema: Schema.Array(tables.todos.schema),
             })
@@ -80,10 +80,7 @@ describe('useTemporaryQuery', () => {
 
       const ListItem: React.FC<{ data: ReadonlyArray<number>; index: number }> = ({ data: ids, index }) => {
         const id = ids[index]!
-        const res = LiveStoreReact.useTemporaryQuery(
-          () => LiveStore.computed(() => id, { label: `ListItem.${id}` }),
-          id,
-        )
+        const res = LiveStoreReact.useScopedQuery(() => LiveStore.computed(() => id, { label: `ListItem.${id}` }), id)
         return <div role="listitem">{res}</div>
       }
 

package/src/useScopedQuery.ts

@@ -0,0 +1,131 @@
+import type { QueryInfo } from '@livestore/common'
+import type { LiveQuery } from '@livestore/livestore'
+import * as otel from '@opentelemetry/api'
+import React from 'react'
+
+import { useStore } from './LiveStoreContext.js'
+import { useQueryRef } from './useQuery.js'
+
+// NOTE Given `useMemo` will be called multiple times (e.g. when using React Strict mode or Fast Refresh),
+// we are using this cache to avoid starting multiple queries/spans for the same component.
+// This is somewhat against some recommended React best practices, but it should be fine in our case below.
+// Please definitely open an issue if you see or run into any problems with this approach!
+const cache = new Map<
+  string,
+  | {
+      _tag: 'active'
+      rc: number
+      query$: LiveQuery<any, any>
+      span: otel.Span
+      otelContext: otel.Context
+    }
+  | {
+      _tag: 'destroyed'
+    }
+>()
+
+export type DepKey = string | number | ReadonlyArray<string | number>
+
+/**
+ * Creates a query, subscribes and destroys it when the component unmounts.
+ *
+ * The `key` is used to determine whether the a new query should be created or if the existing one should be reused.
+ */
+export const useScopedQuery = <TResult>(makeQuery: () => LiveQuery<TResult>, key: DepKey): TResult =>
+  useScopedQueryRef(makeQuery, key).current
+
+export const useScopedQueryRef = <TResult>(
+  makeQuery: () => LiveQuery<TResult>,
+  key: DepKey,
+): React.MutableRefObject<TResult> => {
+  const { query$ } = useMakeScopedQuery(makeQuery, key)
+
+  return useQueryRef(query$)
+}
+
+export const useMakeScopedQuery = <TResult, TQueryInfo extends QueryInfo>(
+  makeQuery: (otelContext: otel.Context) => LiveQuery<TResult, TQueryInfo>,
+  key: DepKey,
+  options?: {
+    otel?: {
+      spanName?: string
+      attributes?: otel.Attributes
+    }
+  },
+): { query$: LiveQuery<TResult, TQueryInfo>; otelContext: otel.Context } => {
+  const { store } = useStore()
+  const fullKey = React.useMemo(
+    // NOTE We're using the `makeQuery` function body string to make sure the key is unique across the app
+    // TODO we should figure out whether this could cause some problems and/or if there's a better way to do this
+    () => (Array.isArray(key) ? key.join('-') : key) + '-' + store.reactivityGraph.id + '-' + makeQuery.toString(),
+    [key, makeQuery, store.reactivityGraph.id],
+  )
+  const fullKeyRef = React.useRef<string>()
+
+  const { query$, otelContext } = React.useMemo(() => {
+    if (fullKeyRef.current !== undefined && fullKeyRef.current !== fullKey) {
+      // console.debug('fullKey changed', 'prev', fullKeyRef.current.split('-')[0]!, '-> new', fullKey.split('-')[0]!)
+
+      const cachedItem = cache.get(fullKeyRef.current)
+      if (cachedItem !== undefined && cachedItem._tag === 'active') {
+        cachedItem.rc--
+
+        if (cachedItem.rc === 0) {
+          // console.debug('rc=0-changed', cachedItem.query$.id, cachedItem.query$.label)
+          cachedItem.query$.destroy()
+          cachedItem.span.end()
+          cache.set(fullKeyRef.current, { _tag: 'destroyed' })
+        }
+      }
+    }
+
+    const cachedItem = cache.get(fullKey)
+    if (cachedItem !== undefined && cachedItem._tag === 'active') {
+      // console.debug('rc++', cachedItem.query$.id, cachedItem.query$.label)
+      cachedItem.rc++
+
+      return cachedItem
+    }
+
+    const spanName = options?.otel?.spanName ?? `LiveStore:useScopedQuery:${key}`
+
+    const span = store.otel.tracer.startSpan(
+      spanName,
+      { attributes: options?.otel?.attributes },
+      store.otel.queriesSpanContext,
+    )
+
+    const otelContext = otel.trace.setSpan(otel.context.active(), span)
+
+    const query$ = makeQuery(otelContext)
+
+    cache.set(fullKey, { _tag: 'active', rc: 1, query$, span, otelContext })
+
+    return { query$, otelContext }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fullKey])
+
+  fullKeyRef.current = fullKey
+
+  React.useEffect(() => {
+    return () => {
+      const fullKey = fullKeyRef.current!
+      const cachedItem = cache.get(fullKey)
+      // NOTE in case the fullKey changed then the query was already destroyed in the useMemo above
+      if (cachedItem === undefined || cachedItem._tag === 'destroyed') return
+
+      // console.debug('rc--', cachedItem.query$.id, cachedItem.query$.label)
+
+      cachedItem.rc--
+
+      if (cachedItem.rc === 0) {
+        // console.debug('rc=0', cachedItem.query$.id, cachedItem.query$.label)
+        cachedItem.query$.destroy()
+        cachedItem.span.end()
+        cache.delete(fullKey)
+      }
+    }
+  }, [])
+
+  return { query$, otelContext }
+}

package/src/useTemporaryQuery.ts

@@ -31,19 +31,19 @@ export type DepKey = string | number | ReadonlyArray<string | number>
  *
  * The `key` is used to determine whether the a new query should be created or if the existing one should be reused.
  */
-export const useTemporaryQuery = <TResult>(makeQuery: () => LiveQuery<TResult>, key: DepKey): TResult =>
-  useTemporaryQueryRef(makeQuery, key).current
+export const useScopedQuery = <TResult>(makeQuery: () => LiveQuery<TResult>, key: DepKey): TResult =>
+  useScopedQueryRef(makeQuery, key).current
 
-export const useTemporaryQueryRef = <TResult>(
+export const useScopedQueryRef = <TResult>(
   makeQuery: () => LiveQuery<TResult>,
   key: DepKey,
 ): React.MutableRefObject<TResult> => {
-  const { query$ } = useMakeTemporaryQuery(makeQuery, key)
+  const { query$ } = useMakeScopedQuery(makeQuery, key)
 
   return useQueryRef(query$)
 }
 
-export const useMakeTemporaryQuery = <TResult, TQueryInfo extends QueryInfo>(
+export const useMakeScopedQuery = <TResult, TQueryInfo extends QueryInfo>(
   makeQuery: (otelContext: otel.Context) => LiveQuery<TResult, TQueryInfo>,
   key: DepKey,
   options?: {
@@ -87,7 +87,7 @@ export const useMakeTemporaryQuery = <TResult, TQueryInfo extends QueryInfo>(
       return cachedItem
     }
 
-    const spanName = options?.otel?.spanName ?? `LiveStore:useTemporaryQuery:${key}`
+    const spanName = options?.otel?.spanName ?? `LiveStore:useScopedQuery:${key}`
 
     const span = store.otel.tracer.startSpan(
       spanName,