@livestore/react 0.0.0-snapshot-3ea7644e665c5c8292d2309fb7f837b9146af912 → 0.0.0-snapshot-ba25981b6de87a90976fc39e1c2551844d384a05

package/src/__snapshots__/useRow.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`useRow > otel > should update the data based on component key > strictM
       "_name": "sql-in-memory-select",
       "attributes": {
         "sql.cached": false,
-        "sql.query": "SELECT 1 FROM 'UserInfo' WHERE id = ?",
+        "sql.query": "select 1 from UserInfo where id = 'u1'",
         "sql.rowsCount": 0,
       },
     },
@@ -29,7 +29,7 @@ exports[`useRow > otel > should update the data based on component key > strictM
       "_name": "sql-in-memory-select",
       "attributes": {
         "sql.cached": false,
-        "sql.query": "SELECT 1 FROM 'UserInfo' WHERE id = ?",
+        "sql.query": "select 1 from UserInfo where id = 'u2'",
         "sql.rowsCount": 1,
       },
     },
@@ -75,9 +75,9 @@ exports[`useRow > otel > should update the data based on component key > strictM
       "_name": "LiveStore:queries",
       "children": [
         {
-          "_name": "db:SELECT * FROM 'UserInfo' WHERE id = ?",
+          "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
           "attributes": {
-            "sql.query": "SELECT * FROM 'UserInfo' WHERE id = ?",
+            "sql.query": "select * from UserInfo where id = 'u1' limit 1",
             "sql.rowsCount": 1,
           },
           "children": [
@@ -85,7 +85,7 @@ exports[`useRow > otel > should update the data based on component key > strictM
               "_name": "sql-in-memory-select",
               "attributes": {
                 "sql.cached": false,
-                "sql.query": "SELECT * FROM 'UserInfo' WHERE id = ?",
+                "sql.query": "select * from UserInfo where id = 'u1' limit 1",
                 "sql.rowsCount": 1,
               },
             },
@@ -115,16 +115,16 @@ exports[`useRow > otel > should update the data based on component key > strictM
               ],
             },
             {
-              "_name": "LiveStore:useQuery:db(row:UserInfo:u1)",
+              "_name": "LiveStore:useQuery:sql(rowQuery:query:UserInfo:u1)",
               "attributes": {
-                "label": "db(row:UserInfo:u1)",
+                "label": "sql(rowQuery:query:UserInfo:u1)",
                 "stackInfo": "{"frames":[{"name":"renderHook.wrapper","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useRow","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
               },
               "children": [
                 {
-                  "_name": "db:SELECT * FROM 'UserInfo' WHERE id = ?",
+                  "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
                   "attributes": {
-                    "sql.query": "SELECT * FROM 'UserInfo' WHERE id = ?",
+                    "sql.query": "select * from UserInfo where id = 'u1' limit 1",
                     "sql.rowsCount": 1,
                   },
                   "children": [
@@ -132,7 +132,7 @@ exports[`useRow > otel > should update the data based on component key > strictM
                       "_name": "sql-in-memory-select",
                       "attributes": {
                         "sql.cached": false,
-                        "sql.query": "SELECT * FROM 'UserInfo' WHERE id = ?",
+                        "sql.query": "select * from UserInfo where id = 'u1' limit 1",
                         "sql.rowsCount": 1,
                       },
                     },
@@ -141,8 +141,8 @@ exports[`useRow > otel > should update the data based on component key > strictM
                 {
                   "_name": "LiveStore.subscribe",
                   "attributes": {
-                    "label": "db(row:UserInfo:u1)",
-                    "queryLabel": "db(row:UserInfo:u1)",
+                    "label": "sql(rowQuery:query:UserInfo:u1)",
+                    "queryLabel": "sql(rowQuery:query:UserInfo:u1)",
                   },
                 },
               ],
@@ -156,16 +156,16 @@ exports[`useRow > otel > should update the data based on component key > strictM
           },
           "children": [
             {
-              "_name": "LiveStore:useQuery:db(row:UserInfo:u2)",
+              "_name": "LiveStore:useQuery:sql(rowQuery:query:UserInfo:u2)",
               "attributes": {
-                "label": "db(row:UserInfo:u2)",
+                "label": "sql(rowQuery:query:UserInfo:u2)",
                 "stackInfo": "{"frames":[{"name":"renderHook.wrapper","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useRow","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
               },
               "children": [
                 {
-                  "_name": "db:SELECT * FROM 'UserInfo' WHERE id = ?",
+                  "_name": "sql:select * from UserInfo where id = 'u2' limit 1",
                   "attributes": {
-                    "sql.query": "SELECT * FROM 'UserInfo' WHERE id = ?",
+                    "sql.query": "select * from UserInfo where id = 'u2' limit 1",
                     "sql.rowsCount": 1,
                   },
                   "children": [
@@ -173,7 +173,7 @@ exports[`useRow > otel > should update the data based on component key > strictM
                       "_name": "sql-in-memory-select",
                       "attributes": {
                         "sql.cached": false,
-                        "sql.query": "SELECT * FROM 'UserInfo' WHERE id = ?",
+                        "sql.query": "select * from UserInfo where id = 'u2' limit 1",
                         "sql.rowsCount": 1,
                       },
                     },
@@ -182,8 +182,8 @@ exports[`useRow > otel > should update the data based on component key > strictM
                 {
                   "_name": "LiveStore.subscribe",
                   "attributes": {
-                    "label": "db(row:UserInfo:u2)",
-                    "queryLabel": "db(row:UserInfo:u2)",
+                    "label": "sql(rowQuery:query:UserInfo:u2)",
+                    "queryLabel": "sql(rowQuery:query:UserInfo:u2)",
                   },
                 },
               ],
@@ -217,7 +217,7 @@ exports[`useRow > otel > should update the data based on component key > strictM
       "_name": "sql-in-memory-select",
       "attributes": {
         "sql.cached": false,
-        "sql.query": "SELECT 1 FROM 'UserInfo' WHERE id = ?",
+        "sql.query": "select 1 from UserInfo where id = 'u1'",
         "sql.rowsCount": 0,
       },
     },
@@ -225,7 +225,7 @@ exports[`useRow > otel > should update the data based on component key > strictM
       "_name": "sql-in-memory-select",
       "attributes": {
         "sql.cached": false,
-        "sql.query": "SELECT 1 FROM 'UserInfo' WHERE id = ?",
+        "sql.query": "select 1 from UserInfo where id = 'u2'",
         "sql.rowsCount": 1,
       },
     },
@@ -271,9 +271,9 @@ exports[`useRow > otel > should update the data based on component key > strictM
       "_name": "LiveStore:queries",
       "children": [
         {
-          "_name": "db:SELECT * FROM 'UserInfo' WHERE id = ?",
+          "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
           "attributes": {
-            "sql.query": "SELECT * FROM 'UserInfo' WHERE id = ?",
+            "sql.query": "select * from UserInfo where id = 'u1' limit 1",
             "sql.rowsCount": 1,
           },
           "children": [
@@ -281,7 +281,7 @@ exports[`useRow > otel > should update the data based on component key > strictM
               "_name": "sql-in-memory-select",
               "attributes": {
                 "sql.cached": false,
-                "sql.query": "SELECT * FROM 'UserInfo' WHERE id = ?",
+                "sql.query": "select * from UserInfo where id = 'u1' limit 1",
                 "sql.rowsCount": 1,
               },
             },
@@ -311,16 +311,16 @@ exports[`useRow > otel > should update the data based on component key > strictM
               ],
             },
             {
-              "_name": "LiveStore:useQuery:db(row:UserInfo:u1)",
+              "_name": "LiveStore:useQuery:sql(rowQuery:query:UserInfo:u1)",
               "attributes": {
-                "label": "db(row:UserInfo:u1)",
+                "label": "sql(rowQuery:query:UserInfo:u1)",
                 "stackInfo": "{"frames":[{"name":"renderHook.wrapper","filePath":"__REPLACED_FOR_SNAPSHOT__"},{"name":"useRow","filePath":"__REPLACED_FOR_SNAPSHOT__"}]}",
               },
               "children": [
                 {
-                  "_name": "db:SELECT * FROM 'UserInfo' WHERE id = ?",
+                  "_name": "sql:select * from UserInfo where id = 'u1' limit 1",
                   "attributes": {
-                    "sql.query": "SELECT * FROM 'UserInfo' WHERE id = ?",
+                    "sql.query": "select * from UserInfo where id = 'u1' limit 1",
                     "sql.rowsCount": 1,
                   },
                   "children": [
@@ -328,7 +328,7 @@ exports[`useRow > otel > should update the data based on component key > strictM
                       "_name": "sql-in-memory-select",
                       "attributes": {
                         "sql.cached": false,
-                        "sql.query": "SELECT * FROM 'UserInfo' WHERE id = ?",
+                        "sql.query": "select * from UserInfo where id = 'u1' limit 1",
                         "sql.rowsCount": 1,
                       },
                     },
@@ -337,15 +337,15 @@ exports[`useRow > otel > should update the data based on component key > strictM
                 {
                   "_name": "LiveStore.subscribe",
                   "attributes": {
-                    "label": "db(row:UserInfo:u1)",
-                    "queryLabel": "db(row:UserInfo:u1)",
+                    "label": "sql(rowQuery:query:UserInfo:u1)",
+                    "queryLabel": "sql(rowQuery:query:UserInfo:u1)",
                   },
                 },
                 {
                   "_name": "LiveStore.subscribe",
                   "attributes": {
-                    "label": "db(row:UserInfo:u1)",
-                    "queryLabel": "db(row:UserInfo:u1)",
+                    "label": "sql(rowQuery:query:UserInfo:u1)",
+                    "queryLabel": "sql(rowQuery:query:UserInfo:u1)",
                   },
                 },
               ],

package/src/useAtom.ts

@@ -1,6 +1,5 @@
-import type { DerivedMutationHelperFns, QueryInfo } from '@livestore/common'
+import { type QueryInfoCol, type QueryInfoRow } from '@livestore/common'
 import type { DbSchema } from '@livestore/common/schema'
-import type { SqliteDsl } from '@livestore/db-schema'
 import type { LiveQuery } from '@livestore/livestore'
 import React from 'react'
 
@@ -9,8 +8,12 @@ import { useQueryRef } from './useQuery.js'
 import type { Dispatch, SetStateAction } from './useRow.js'
 
 export const useAtom = <
-  // TODO also support colJsonValue
-  TQuery extends LiveQuery<any, QueryInfo.Row | QueryInfo.Col>,
+  TQuery extends LiveQuery<any, QueryInfoRow<TTableDef> | QueryInfoCol<TTableDef, any>>,
+  TTableDef extends DbSchema.TableDef<
+    DbSchema.DefaultSqliteTableDefConstrained,
+    boolean,
+    DbSchema.TableOptions & { deriveMutations: { enabled: true } }
+  >,
 >(
   query$: TQuery,
 ): [value: TQuery['__result!'], setValue: Dispatch<SetStateAction<Partial<TQuery['__result!']>>>] => {
@@ -22,23 +25,23 @@ export const useAtom = <
   const setValue = React.useMemo<Dispatch<SetStateAction<TQuery['__result!']>>>(() => {
     return (newValueOrFn: any) => {
       const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current) : newValueOrFn
-      const table = query$.queryInfo.table as DbSchema.TableDef &
-        DerivedMutationHelperFns<SqliteDsl.Columns, DbSchema.TableOptions>
 
       if (query$.queryInfo._tag === 'Row') {
-        if (table.options.isSingleton && table.options.isSingleColumn) {
-          store.mutate(table.update(newValue))
-        } else if (table.options.isSingleColumn) {
-          store.mutate(table.update({ where: { id: query$.queryInfo.id }, values: { value: newValue } }))
+        if (query$.queryInfo.table.options.isSingleton && query$.queryInfo.table.isSingleColumn) {
+          store.mutate(query$.queryInfo.table.update(newValue))
+        } else if (query$.queryInfo.table.options.isSingleColumn) {
+          store.mutate(
+            query$.queryInfo.table.update({ where: { id: query$.queryInfo.id }, values: { value: newValue } }),
+          )
         } else {
-          store.mutate(table.update({ where: { id: query$.queryInfo.id }, values: newValue }))
+          store.mutate(query$.queryInfo.table.update({ where: { id: query$.queryInfo.id }, values: newValue }))
         }
       } else {
-        if (table.options.isSingleton && table.options.isSingleColumn) {
-          store.mutate(table.update({ [query$.queryInfo.column]: newValue }))
+        if (query$.queryInfo.table.options.isSingleton && query$.queryInfo.table.isSingleColumn) {
+          store.mutate(query$.queryInfo.table.update({ [query$.queryInfo.column]: newValue }))
         } else {
           store.mutate(
-            table.update({
+            query$.queryInfo.table.update({
               where: { id: query$.queryInfo.id },
               values: { [query$.queryInfo.column]: newValue },
             }),

package/src/useQuery.test.tsx

@@ -1,4 +1,4 @@
-import { queryDb } from '@livestore/livestore'
+import { querySQL } from '@livestore/livestore'
 import { Effect, Schema } from '@livestore/utils/effect'
 import { renderHook } from '@testing-library/react'
 import React from 'react'
@@ -14,7 +14,7 @@ describe('useQuery', () => {
 
       const renderCount = makeRenderCount()
 
-      const allTodos$ = queryDb({ query: `select * from todos`, schema: Schema.Array(tables.todos.schema) })
+      const allTodos$ = querySQL(`select * from todos`, { schema: Schema.Array(tables.todos.schema) })
 
       const { result } = renderHook(
         () => {
@@ -41,14 +41,14 @@ describe('useQuery', () => {
 
       const renderCount = makeRenderCount()
 
-      const todo1$ = queryDb(
-        { query: `select * from todos where id = 't1'`, schema: Schema.Array(tables.todos.schema) },
-        { label: 'libraryTracksView1' },
-      )
-      const todo2$ = queryDb(
-        { query: `select * from todos where id = 't2'`, schema: Schema.Array(tables.todos.schema) },
-        { label: 'libraryTracksView2' },
-      )
+      const todo1$ = querySQL(`select * from todos where id = 't1'`, {
+        label: 'libraryTracksView1',
+        schema: Schema.Array(tables.todos.schema),
+      })
+      const todo2$ = querySQL(`select * from todos where id = 't2'`, {
+        label: 'libraryTracksView2',
+        schema: Schema.Array(tables.todos.schema),
+      })
 
       store.mutate(
         todos.insert({ id: 't1', text: 'buy milk', completed: false }),

package/src/useQuery.ts

@@ -101,10 +101,6 @@ Stack trace:
   React.useEffect(() => {
     query$.activeSubscriptions.add(stackInfo)
 
-    // Dynamic queries only set their actual label after they've been run the first time,
-    // so we're also updating the span name here.
-    span.updateName(`LiveStore:useQuery:${query$.label}`)
-
     return store.subscribe(
       query$,
       (newValue) => {

package/src/useRow.test.tsx

@@ -121,10 +121,11 @@ describe('useRow', () => {
         useGlobalReactivityGraph: false,
       })
 
-      const allTodos$ = LiveStore.queryDb(
-        { query: `select * from todos`, schema: Schema.Array(tables.todos.schema) },
-        { label: 'allTodos', reactivityGraph },
-      )
+      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
@@ -222,12 +223,13 @@ describe('useRow', () => {
           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}%'`,
+              LiveStore.querySQL(
+                (get) => LiveStore.sql`select * from todos where text like '%${get(rowState$).text}%'`,
+                {
                   schema: Schema.Array(tables.todos.schema),
-                }),
-                { reactivityGraph, label: 'todosFiltered' },
+                  reactivityGraph,
+                  label: 'todosFiltered',
+                },
               ),
             userId,
           )

package/src/useRow.ts

@@ -1,9 +1,9 @@
-import type { QueryInfo, RowQuery } from '@livestore/common'
+import type { QueryInfo } 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 { queryDb } from '@livestore/livestore'
+import type { LiveQuery, ReactivityGraph, RowResult } from '@livestore/livestore'
+import { rowQuery } from '@livestore/livestore'
 import { shouldNeverHappen } from '@livestore/utils'
 import { ReadonlyRecord } from '@livestore/utils/effect'
 import React from 'react'
@@ -12,12 +12,16 @@ 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>,
+export type UseRowResult<TTableDef extends DbSchema.TableDef> = [
+  row: RowResult<TTableDef>,
   setRow: StateSetters<TTableDef>,
-  query$: LiveQuery<RowQuery.Result<TTableDef>, QueryInfo>,
+  query$: LiveQuery<RowResult<TTableDef>, QueryInfo>,
 ]
 
+export type UseRowOptionsDefaulValues<TTableDef extends DbSchema.TableDef> = {
+  defaultValues?: Partial<RowResult<TTableDef>>
+}
+
 export type UseRowOptionsBase = {
   reactivityGraph?: ReactivityGraph
 }
@@ -35,6 +39,7 @@ export const useRow: {
   <
     TTableDef extends DbSchema.TableDef<
       DbSchema.DefaultSqliteTableDef,
+      boolean,
       DbSchema.TableOptions & { isSingleton: true; deriveMutations: { enabled: true } }
     >,
   >(
@@ -44,44 +49,31 @@ export const useRow: {
   <
     TTableDef extends DbSchema.TableDef<
       DbSchema.DefaultSqliteTableDef,
-      DbSchema.TableOptions & {
-        isSingleton: false
-        requiredInsertColumnNames: 'id'
-        deriveMutations: { enabled: true }
-      }
-    >,
-  >(
-    table: TTableDef,
-    // TODO adjust so it works with arbitrary primary keys or unique constraints
-    id: string | SessionIdSymbol,
-    options?: UseRowOptionsBase & Partial<RowQuery.RequiredColumnsOptions<TTableDef>>,
-  ): UseRowResult<TTableDef>
-  <
-    TTableDef extends DbSchema.TableDef<
-      DbSchema.DefaultSqliteTableDef,
+      boolean,
       DbSchema.TableOptions & { isSingleton: false; deriveMutations: { enabled: true } }
     >,
   >(
     table: TTableDef,
     // TODO adjust so it works with arbitrary primary keys or unique constraints
     id: string | SessionIdSymbol,
-    options: UseRowOptionsBase & RowQuery.RequiredColumnsOptions<TTableDef>,
+    options?: UseRowOptionsBase & UseRowOptionsDefaulValues<TTableDef>,
   ): UseRowResult<TTableDef>
 } = <
   TTableDef extends DbSchema.TableDef<
     DbSchema.DefaultSqliteTableDefConstrained,
+    boolean,
     DbSchema.TableOptions & { deriveMutations: { enabled: true } }
   >,
 >(
   table: TTableDef,
   idOrOptions?: string | SessionIdSymbol | UseRowOptionsBase,
-  options_?: UseRowOptionsBase & Partial<RowQuery.RequiredColumnsOptions<TTableDef>>,
+  options_?: UseRowOptionsBase & UseRowOptionsDefaulValues<TTableDef>,
 ): UseRowResult<TTableDef> => {
   const sqliteTableDef = table.sqliteDef
   const id = typeof idOrOptions === 'string' || idOrOptions === SessionIdSymbol ? idOrOptions : undefined
-  const options: (UseRowOptionsBase & Partial<RowQuery.RequiredColumnsOptions<TTableDef>>) | undefined =
+  const options: (UseRowOptionsBase & UseRowOptionsDefaulValues<TTableDef>) | undefined =
     typeof idOrOptions === 'string' || idOrOptions === SessionIdSymbol ? options_ : idOrOptions
-  const { insertValues, reactivityGraph } = options ?? {}
+  const { defaultValues, reactivityGraph } = options ?? {}
 
   type TComponentState = SqliteDsl.FromColumns.RowDecoded<TTableDef['sqliteDef']['columns']>
 
@@ -103,14 +95,16 @@ export const useRow: {
   // console.debug('useRow', tableName, id)
 
   const idStr = id === SessionIdSymbol ? 'session' : id
-  const rowQuery = table.query.row as any
 
-  type Query$ = LiveQuery<RowQuery.Result<TTableDef>, QueryInfo.Row>
   const { query$, otelContext } = useMakeScopedQuery(
     (otelContext) =>
       DbSchema.tableIsSingleton(table)
-        ? (queryDb(rowQuery(), { reactivityGraph, otelContext }) as any as Query$)
-        : (queryDb(rowQuery(id!, { insertValues: insertValues! }), { reactivityGraph, otelContext }) as any as Query$),
+        ? (rowQuery(table, { otelContext, reactivityGraph }) as LiveQuery<RowResult<TTableDef>, QueryInfo>)
+        : (rowQuery(table as TTableDef & { options: { isSingleton: false } }, id!, {
+            otelContext,
+            defaultValues: defaultValues!,
+            reactivityGraph,
+          }) as any as LiveQuery<RowResult<TTableDef>, QueryInfo>),
     [idStr!, tableName],
     {
       otel: {
@@ -120,11 +114,11 @@ export const useRow: {
     },
   )
 
-  const query$Ref = useQueryRef(query$, otelContext) as React.MutableRefObject<RowQuery.Result<TTableDef>>
+  const query$Ref = useQueryRef(query$, otelContext) as React.MutableRefObject<RowResult<TTableDef>>
 
   const setState = React.useMemo<StateSetters<TTableDef>>(() => {
-    if (table.options.isSingleColumn) {
-      return (newValueOrFn: RowQuery.Result<TTableDef>) => {
+    if (table.isSingleColumn) {
+      return (newValueOrFn: RowResult<TTableDef>) => {
         const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current) : newValueOrFn
         if (query$Ref.current === newValue) return
 
@@ -179,10 +173,10 @@ export const useRow: {
 export type Dispatch<A> = (action: A) => void
 export type SetStateAction<S> = S | ((previousValue: S) => S)
 
-export type StateSetters<TTableDef extends DbSchema.TableDefBase> = TTableDef['options']['isSingleColumn'] extends true
-  ? Dispatch<SetStateAction<RowQuery.Result<TTableDef>>>
+export type StateSetters<TTableDef extends DbSchema.TableDef> = TTableDef['isSingleColumn'] extends true
+  ? Dispatch<SetStateAction<RowResult<TTableDef>>>
   : {
-      [K in keyof RowQuery.Result<TTableDef>]: Dispatch<SetStateAction<RowQuery.Result<TTableDef>[K]>>
+      [K in keyof RowResult<TTableDef>]: Dispatch<SetStateAction<RowResult<TTableDef>[K]>>
     } & {
-      setMany: Dispatch<SetStateAction<Partial<RowQuery.Result<TTableDef>>>>
+      setMany: Dispatch<SetStateAction<Partial<RowResult<TTableDef>>>>
     }

package/src/useScopedQuery.test.tsx

@@ -1,5 +1,5 @@
 import * as LiveStore from '@livestore/livestore'
-import { queryDb } 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'
@@ -29,8 +29,7 @@ describe('useScopedQuery', () => {
           renderCount.inc()
 
           return LiveStoreReact.useScopedQuery(() => {
-            const query$ = queryDb({
-              query: `select * from todos where id = '${id}'`,
+            const query$ = querySQL(`select * from todos where id = '${id}'`, {
               schema: Schema.Array(tables.todos.schema),
             })
             queryMap.set(id, query$)

package/src/useTemporaryQuery.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 }
+}