@livestore/livestore 0.0.58-dev.1 → 0.0.58-dev.11

package/src/react/LiveStoreProvider.tsx

@@ -1,289 +0,0 @@
-import type { BootDb, BootStatus, IntentionalShutdownCause, StoreAdapterFactory } from '@livestore/common'
-import { UnexpectedError } from '@livestore/common'
-import type { LiveStoreSchema } from '@livestore/common/schema'
-import { errorToString } from '@livestore/utils'
-import { Effect, FiberSet, Logger, LogLevel, Schema } from '@livestore/utils/effect'
-import type * as otel from '@opentelemetry/api'
-import type { ReactElement, ReactNode } from 'react'
-import React from 'react'
-
-import type { BaseGraphQLContext, CreateStoreOptions, GraphQLOptions, OtelOptions } from '../store.js'
-import { createStore } from '../store.js'
-import type { LiveStoreContext as StoreContext_ } from '../store-context.js'
-import { StoreAbort, StoreInterrupted } from '../store-context.js'
-import { LiveStoreContext } from './LiveStoreContext.js'
-
-interface LiveStoreProviderProps<GraphQLContext> {
-  schema: LiveStoreSchema
-  /**
-   * The `storeId` can be used to isolate multiple stores from each other.
-   * So it can be useful for multi-tenancy scenarios.
-   *
-   * The `storeId` is also used for persistence.
-   *
-   * @default 'default'
-   */
-  storeId?: string
-  boot?: (db: BootDb, parentSpan: otel.Span) => void | Promise<void> | Effect.Effect<void, unknown, otel.Tracer>
-  graphQLOptions?: GraphQLOptions<GraphQLContext>
-  otelOptions?: OtelOptions
-  renderLoading: (status: BootStatus) => ReactElement
-  renderError?: (error: UnexpectedError | unknown) => ReactElement
-  renderShutdown?: (cause: IntentionalShutdownCause | StoreAbort) => ReactElement
-  adapter: StoreAdapterFactory
-  /**
-   * In order for LiveStore to apply multiple mutations in a single render,
-   * you need to pass the `batchUpdates` function from either `react-dom` or `react-native`.
-   *
-   * ```ts
-   * // With React DOM
-   * import { unstable_batchedUpdates as batchUpdates } from 'react-dom'
-   *
-   * // With React Native
-   * import { unstable_batchedUpdates as batchUpdates } from 'react-native'
-   * ```
-   */
-  batchUpdates: (run: () => void) => void
-  disableDevtools?: boolean
-  signal?: AbortSignal
-}
-
-const defaultRenderError = (error: UnexpectedError | unknown) => (
-  <>{Schema.is(UnexpectedError)(error) ? error.toString() : errorToString(error)}</>
-)
-const defaultRenderShutdown = (cause: IntentionalShutdownCause | StoreAbort) => {
-  const reason =
-    cause._tag === 'LiveStore.StoreAbort'
-      ? 'abort signal'
-      : cause.reason === 'devtools-import'
-        ? 'devtools import'
-        : cause.reason === 'devtools-reset'
-          ? 'devtools reset'
-          : 'unknown reason'
-
-  return <>LiveStore Shutdown due to {reason}</>
-}
-
-export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
-  renderLoading,
-  renderError = defaultRenderError,
-  renderShutdown = defaultRenderShutdown,
-  graphQLOptions,
-  otelOptions,
-  children,
-  schema,
-  storeId = 'default',
-  boot,
-  adapter,
-  batchUpdates,
-  disableDevtools,
-  signal,
-}: LiveStoreProviderProps<GraphQLContext> & { children?: ReactNode }): JSX.Element => {
-  const storeCtx = useCreateStore({
-    storeId,
-    schema,
-    graphQLOptions,
-    otelOptions,
-    boot,
-    adapter,
-    batchUpdates,
-    disableDevtools,
-    signal,
-  })
-
-  if (storeCtx.stage === 'error') {
-    return renderError(storeCtx.error)
-  }
-
-  if (storeCtx.stage === 'shutdown') {
-    return renderShutdown(storeCtx.cause)
-  }
-
-  if (storeCtx.stage !== 'running') {
-    return renderLoading(storeCtx)
-  }
-
-  window.__debugLiveStore ??= {}
-  window.__debugLiveStore[storeId] = storeCtx.store
-
-  return <LiveStoreContext.Provider value={storeCtx}>{children}</LiveStoreContext.Provider>
-}
-
-type SchemaKey = string
-const semaphoreMap = new Map<SchemaKey, Effect.Semaphore>()
-
-const withSemaphore = (schemaKey: SchemaKey) => {
-  let semaphore = semaphoreMap.get(schemaKey)
-  if (!semaphore) {
-    semaphore = Effect.makeSemaphore(1).pipe(Effect.runSync)
-    semaphoreMap.set(schemaKey, semaphore)
-  }
-  return semaphore.withPermits(1)
-}
-
-const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
-  schema,
-  storeId,
-  graphQLOptions,
-  otelOptions,
-  boot,
-  adapter,
-  batchUpdates,
-  disableDevtools,
-  reactivityGraph,
-  signal,
-}: CreateStoreOptions<GraphQLContext, LiveStoreSchema> & { signal?: AbortSignal }) => {
-  const [_, rerender] = React.useState(0)
-  const ctxValueRef = React.useRef<{
-    value: StoreContext_ | BootStatus
-    fiberSet: FiberSet.FiberSet | undefined
-    counter: number
-  }>({
-    value: { stage: 'loading' },
-    fiberSet: undefined,
-    counter: 0,
-  })
-
-  // console.debug(`useCreateStore (${ctxValueRef.current.counter})`, ctxValueRef.current.value.stage)
-
-  const inputPropsCacheRef = React.useRef({
-    schema,
-    graphQLOptions,
-    otelOptions,
-    boot,
-    adapter,
-    batchUpdates,
-    disableDevtools,
-    reactivityGraph,
-    signal,
-  })
-
-  const interrupt = (fiberSet: FiberSet.FiberSet, error: StoreAbort | StoreInterrupted) =>
-    Effect.gen(function* () {
-      yield* FiberSet.clear(fiberSet)
-      yield* FiberSet.run(fiberSet, Effect.fail(error))
-    }).pipe(
-      Effect.tapErrorCause((cause) => Effect.logDebug(`[@livestore/livestore/react] interupting`, cause)),
-      Effect.runFork,
-    )
-
-  if (
-    inputPropsCacheRef.current.schema !== schema ||
-    inputPropsCacheRef.current.graphQLOptions !== graphQLOptions ||
-    inputPropsCacheRef.current.otelOptions !== otelOptions ||
-    inputPropsCacheRef.current.boot !== boot ||
-    inputPropsCacheRef.current.adapter !== adapter ||
-    inputPropsCacheRef.current.batchUpdates !== batchUpdates ||
-    inputPropsCacheRef.current.disableDevtools !== disableDevtools ||
-    inputPropsCacheRef.current.reactivityGraph !== reactivityGraph ||
-    inputPropsCacheRef.current.signal !== signal
-  ) {
-    inputPropsCacheRef.current = {
-      schema,
-      graphQLOptions,
-      otelOptions,
-      boot,
-      adapter,
-      batchUpdates,
-      disableDevtools,
-      reactivityGraph,
-      signal,
-    }
-    if (ctxValueRef.current.fiberSet !== undefined) {
-      interrupt(ctxValueRef.current.fiberSet, new StoreInterrupted())
-      ctxValueRef.current.fiberSet = undefined
-    }
-    ctxValueRef.current = { value: { stage: 'loading' }, fiberSet: undefined, counter: ctxValueRef.current.counter + 1 }
-  }
-
-  React.useEffect(() => {
-    const counter = ctxValueRef.current.counter
-
-    const setContextValue = (value: StoreContext_ | BootStatus) => {
-      if (ctxValueRef.current.counter !== counter) return
-      ctxValueRef.current.value = value
-      rerender((c) => c + 1)
-    }
-
-    signal?.addEventListener('abort', () => {
-      if (ctxValueRef.current.fiberSet !== undefined && ctxValueRef.current.counter === counter) {
-        interrupt(ctxValueRef.current.fiberSet, new StoreAbort())
-        ctxValueRef.current.fiberSet = undefined
-      }
-    })
-
-    Effect.gen(function* () {
-      const fiberSet = yield* FiberSet.make<
-        unknown,
-        UnexpectedError | IntentionalShutdownCause | StoreAbort | StoreInterrupted
-      >()
-
-      ctxValueRef.current.fiberSet = fiberSet
-
-      yield* Effect.gen(function* () {
-        const store = yield* createStore({
-          fiberSet,
-          schema,
-          storeId,
-          graphQLOptions,
-          otelOptions,
-          boot,
-          adapter,
-          reactivityGraph,
-          batchUpdates,
-          disableDevtools,
-          onBootStatus: (status) => {
-            if (ctxValueRef.current.value.stage === 'running' || ctxValueRef.current.value.stage === 'error') return
-            setContextValue(status)
-          },
-        })
-
-        setContextValue({ stage: 'running', store })
-
-        yield* Effect.never
-      }).pipe(Effect.scoped, FiberSet.run(fiberSet))
-
-      const shutdownContext = (cause: IntentionalShutdownCause | StoreAbort) =>
-        Effect.sync(() => setContextValue({ stage: 'shutdown', cause }))
-
-      yield* FiberSet.join(fiberSet).pipe(
-        Effect.catchTag('LiveStore.IntentionalShutdownCause', (cause) => shutdownContext(cause)),
-        Effect.catchTag('LiveStore.StoreAbort', (cause) => shutdownContext(cause)),
-        Effect.tapError((error) => Effect.sync(() => setContextValue({ stage: 'error', error }))),
-        Effect.tapDefect((defect) => Effect.sync(() => setContextValue({ stage: 'error', error: defect }))),
-        Effect.exit,
-      )
-    }).pipe(
-      Effect.scoped,
-      // NOTE we're running the code above in a semaphore to make sure a previous store is always fully
-      // shutdown before a new one is created - especially when shutdown logic is async. You can't trust `React.useEffect`.
-      // Thank you to Mattia Manzati for this idea.
-      withSemaphore(storeId),
-      Effect.tapCauseLogPretty,
-      Effect.annotateLogs({ thread: 'window' }),
-      Effect.provide(Logger.pretty),
-      Logger.withMinimumLogLevel(LogLevel.Debug),
-      Effect.runFork,
-    )
-
-    return () => {
-      if (ctxValueRef.current.fiberSet !== undefined) {
-        interrupt(ctxValueRef.current.fiberSet, new StoreInterrupted())
-        ctxValueRef.current.fiberSet = undefined
-      }
-    }
-  }, [
-    schema,
-    graphQLOptions,
-    otelOptions,
-    boot,
-    adapter,
-    batchUpdates,
-    disableDevtools,
-    signal,
-    reactivityGraph,
-    storeId,
-  ])
-
-  return ctxValueRef.current.value
-}

package/src/react/components/LiveList.tsx

@@ -1,84 +0,0 @@
-import React from 'react'
-
-import type { LiveQuery } from '../../reactiveQueries/base-class.js'
-import { computed } from '../../reactiveQueries/js.js'
-import { useQuery } from '../useQuery.js'
-import { useTemporaryQuery } from '../useTemporaryQuery.js'
-
-/*
-TODO:
-- [ ] Bring back incremental rendering (see https://github.com/livestorejs/livestore/pull/55)
-- [ ] Enable exit animations
-*/
-
-export type LiveListProps<TItem> = {
-  items$: LiveQuery<ReadonlyArray<TItem>>
-  // TODO refactor render-flag to allow for transition animations on add/remove
-  renderItem: (item: TItem, opts: { index: number; isInitialListRender: boolean }) => React.ReactNode
-  /** Needs to be unique across all list items */
-  getKey: (item: TItem, index: number) => string | number
-}
-
-/**
- * This component is a helper component for rendering a list of items for a LiveQuery of an array of items.
- * The idea is that instead of letting React handle the rendering of the items array directly,
- * we derive a item LiveQuery for each item which moves the reactivity to the item level when a single item changes.
- *
- * In the future we want to make this component even more efficient by using incremental rendering (https://github.com/livestorejs/livestore/pull/55)
- * e.g. when an item is added/removed/moved to only re-render the affected DOM nodes.
- */
-export const LiveList = <TItem,>({ items$, renderItem, getKey }: LiveListProps<TItem>): React.ReactNode => {
-  const [hasMounted, setHasMounted] = React.useState(false)
-
-  React.useEffect(() => setHasMounted(true), [])
-
-  const keysCb = React.useCallback(() => computed((get) => get(items$).map(getKey)), [getKey, items$])
-  const keys = useTemporaryQuery(keysCb, 'fixed')
-  const arr = React.useMemo(
-    () =>
-      keys.map(
-        (key) =>
-          // TODO figure out a way so that `item$` returns an ordered lookup map to more efficiently find the item by key
-          [key, computed((get) => get(items$).find((item) => getKey(item, 0) === key)!) as LiveQuery<TItem>] as const,
-      ),
-    [getKey, items$, keys],
-  )
-
-  return (
-    <>
-      {arr.map(([key, item$], index) => (
-        <ItemWrapperMemo
-          key={key}
-          itemKey={key}
-          item$={item$}
-          opts={{ isInitialListRender: !hasMounted, index }}
-          renderItem={renderItem}
-        />
-      ))}
-    </>
-  )
-}
-
-const ItemWrapper = <TItem,>({
-  item$,
-  opts,
-  renderItem,
-}: {
-  itemKey: string | number
-  item$: LiveQuery<TItem>
-  opts: { index: number; isInitialListRender: boolean }
-  renderItem: (item: TItem, opts: { index: number; isInitialListRender: boolean }) => React.ReactNode
-}) => {
-  const item = useQuery(item$)
-
-  return <>{renderItem(item, opts)}</>
-}
-
-const ItemWrapperMemo = React.memo(
-  ItemWrapper,
-  (prev, next) =>
-    prev.itemKey === next.itemKey &&
-    prev.renderItem === prev.renderItem &&
-    prev.opts.index === next.opts.index &&
-    prev.opts.isInitialListRender === next.opts.isInitialListRender,
-) as typeof ItemWrapper

package/src/react/index.ts

@@ -1,19 +0,0 @@
-export { LiveStoreContext, useStore } from './LiveStoreContext.js'
-export { LiveStoreProvider } from './LiveStoreProvider.js'
-export { useQuery } from './useQuery.js'
-export { useTemporaryQuery } from './useTemporaryQuery.js'
-export { useStackInfo } from './utils/stack-info.js'
-export {
-  useRow,
-  type StateSetters,
-  type SetStateAction,
-  type Dispatch,
-  type UseRowResult as UseStateResult,
-} from './useRow.js'
-export { useAtom } from './useAtom.js'
-export { useLocalId, getLocalId } from './useLocalId.js'
-
-export { LiveList, type LiveListProps } from './components/LiveList.js'
-
-// Needed to make TS happy
-export type { TypedDocumentNode } from '@graphql-typed-document-node/core'

package/src/react/useAtom.ts

@@ -1,55 +0,0 @@
-import { type QueryInfoCol, type QueryInfoRow } from '@livestore/common'
-import type { DbSchema } from '@livestore/common/schema'
-import React from 'react'
-
-import type { LiveQuery } from '../reactiveQueries/base-class.js'
-import { useStore } from './LiveStoreContext.js'
-import { useQueryRef } from './useQuery.js'
-import type { Dispatch, SetStateAction } from './useRow.js'
-
-export const useAtom = <
-  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!']>>>] => {
-  const query$Ref = useQueryRef(query$)
-
-  const { store } = useStore()
-
-  // TODO make API equivalent to useRow
-  const setValue = React.useMemo<Dispatch<SetStateAction<TQuery['__result!']>>>(() => {
-    return (newValueOrFn: any) => {
-      const newValue = typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current) : newValueOrFn
-
-      if (query$.queryInfo._tag === 'Row') {
-        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(query$.queryInfo.table.update({ where: { id: query$.queryInfo.id }, values: newValue }))
-        }
-      } else {
-        if (query$.queryInfo.table.options.isSingleton && query$.queryInfo.table.isSingleColumn) {
-          store.mutate(query$.queryInfo.table.update({ [query$.queryInfo.column]: newValue }))
-        } else {
-          store.mutate(
-            query$.queryInfo.table.update({
-              where: { id: query$.queryInfo.id },
-              values: { [query$.queryInfo.column]: newValue },
-            }),
-          )
-        }
-      }
-    }
-  }, [query$.queryInfo, query$Ref, store])
-
-  return [query$Ref.current, setValue]
-}

package/src/react/useLocalId.ts

@@ -1,33 +0,0 @@
-import { cuid } from '@livestore/utils/cuid'
-import React from 'react'
-
-type LocalIdOptions = {
-  key: string
-  storageType: 'session' | 'local'
-  storageKeyPrefix: string
-  makeId: () => string
-}
-
-export const useLocalId = (opts?: Partial<LocalIdOptions>) => React.useMemo(() => getLocalId(opts), [opts])
-
-export const getLocalId = (opts?: Partial<LocalIdOptions>) => {
-  // TODO find a better way to handle this
-  // Currently `getLocalId` gets imported and called in some worker-side code
-  // during development where Vite isn't tree-shaking yet.
-  if (typeof window === 'undefined' || window.localStorage === undefined || window.sessionStorage === undefined) {
-    return ''
-  }
-
-  const { key = '', storageType = 'session', storageKeyPrefix = 'livestore:localid:', makeId = cuid } = opts ?? {}
-
-  const storage = storageType === 'session' ? window.sessionStorage : window.localStorage
-  const fullKey = `${storageKeyPrefix}:${key}`
-  const storedKey = storage.getItem(fullKey)
-
-  if (storedKey) return storedKey
-
-  const newKey = makeId()
-  storage.setItem(fullKey, newKey)
-
-  return newKey
-}

package/src/react/useQuery.test.tsx

@@ -1,82 +0,0 @@
-import { Effect, Schema } from '@livestore/utils/effect'
-import { renderHook } from '@testing-library/react'
-import React from 'react'
-import { describe, expect, it } from 'vitest'
-
-import { makeTodoMvc, tables, todos } from '../__tests__/react/fixture.js'
-import { querySQL } from '../reactiveQueries/sql.js'
-import * as LiveStoreReact from './index.js'
-
-describe('useQuery', () => {
-  it('simple', () =>
-    Effect.gen(function* () {
-      const { wrapper, store, makeRenderCount } = yield* makeTodoMvc()
-
-      const renderCount = makeRenderCount()
-
-      const allTodos$ = querySQL(`select * from todos`, { schema: Schema.Array(tables.todos.schema) })
-
-      const { result } = renderHook(
-        () => {
-          renderCount.inc()
-
-          return LiveStoreReact.useQuery(allTodos$)
-        },
-        { wrapper },
-      )
-
-      expect(result.current.length).toBe(0)
-      expect(renderCount.val).toBe(1)
-
-      React.act(() => store.mutate(todos.insert({ id: 't1', text: 'buy milk', completed: false })))
-
-      expect(result.current.length).toBe(1)
-      expect(result.current[0]!.text).toBe('buy milk')
-      expect(renderCount.val).toBe(2)
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
-
-  it('same `useQuery` hook invoked with different queries', () =>
-    Effect.gen(function* () {
-      const { wrapper, store, makeRenderCount } = yield* makeTodoMvc()
-
-      const renderCount = makeRenderCount()
-
-      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 }),
-        todos.insert({ id: 't2', text: 'buy eggs', completed: false }),
-      )
-
-      const { result, rerender } = renderHook(
-        (todoId: string) => {
-          renderCount.inc()
-
-          const query$ = React.useMemo(() => (todoId === 't1' ? todo1$ : todo2$), [todoId])
-
-          return LiveStoreReact.useQuery(query$)[0]!.text
-        },
-        { wrapper, initialProps: 't1' },
-      )
-
-      expect(result.current).toBe('buy milk')
-      expect(renderCount.val).toBe(1)
-
-      React.act(() => store.mutate(todos.update({ where: { id: 't1' }, values: { text: 'buy soy milk' } })))
-
-      expect(result.current).toBe('buy soy milk')
-      expect(renderCount.val).toBe(2)
-
-      rerender('t2')
-
-      expect(result.current).toBe('buy eggs')
-      expect(renderCount.val).toBe(3)
-    }).pipe(Effect.scoped, Effect.tapCauseLogPretty, Effect.runPromise))
-})

package/src/react/useQuery.ts

@@ -1,105 +0,0 @@
-import { deepEqual } from '@livestore/utils'
-import * as otel from '@opentelemetry/api'
-import React from 'react'
-
-import type { GetResult, LiveQueryAny } from '../reactiveQueries/base-class.js'
-import { useStore } from './LiveStoreContext.js'
-import { extractStackInfoFromStackTrace, originalStackLimit } from './utils/stack-info.js'
-import { useStateRefWithReactiveInput } from './utils/useStateRefWithReactiveInput.js'
-
-/**
- * NOTE Some folks have suggested to use `React.useSyncExternalStore`, however, it's not doing anything special
- * for what's needed here, so we handle everything manually.
- */
-
-/**
- * This is needed because the `React.useMemo` call below, can sometimes be called multiple times 🤷,
- * so we need to "cache" the fact that we've already started a span for this component.
- * The map entry is being removed again in the `React.useEffect` call below.
- */
-const spanAlreadyStartedCache = new Map<LiveQueryAny, { span: otel.Span; otelContext: otel.Context }>()
-
-export const useQuery = <TQuery extends LiveQueryAny>(query: TQuery): GetResult<TQuery> => useQueryRef(query).current
-
-/**
- *
- */
-export const useQueryRef = <TQuery extends LiveQueryAny>(
-  query$: TQuery,
-  parentOtelContext?: otel.Context,
-): React.MutableRefObject<GetResult<TQuery>> => {
-  const { store } = useStore()
-
-  React.useDebugValue(`LiveStore:useQuery:${query$.id}:${query$.label}`)
-
-  const stackInfo = React.useMemo(() => {
-    Error.stackTraceLimit = 10
-    // eslint-disable-next-line unicorn/error-message
-    const stack = new Error().stack!
-    Error.stackTraceLimit = originalStackLimit
-    return extractStackInfoFromStackTrace(stack)
-  }, [])
-
-  // The following `React.useMemo` and `React.useEffect` calls are used to start and end a span for the lifetime of this component.
-  const { span, otelContext } = React.useMemo(() => {
-    const existingSpan = spanAlreadyStartedCache.get(query$)
-    if (existingSpan !== undefined) return existingSpan
-
-    const span = store.otel.tracer.startSpan(
-      `LiveStore:useQuery:${query$.label}`,
-      { attributes: { label: query$.label, stackInfo: JSON.stringify(stackInfo) } },
-      parentOtelContext ?? store.otel.queriesSpanContext,
-    )
-
-    const otelContext = otel.trace.setSpan(otel.context.active(), span)
-
-    spanAlreadyStartedCache.set(query$, { span, otelContext })
-
-    return { span, otelContext }
-  }, [parentOtelContext, query$, stackInfo, store.otel.queriesSpanContext, store.otel.tracer])
-
-  const initialResult = React.useMemo(
-    () =>
-      query$.run(otelContext, {
-        _tag: 'react',
-        api: 'useQuery',
-        label: query$.label,
-        stackInfo,
-      }),
-    [otelContext, query$, stackInfo],
-  )
-
-  // We know the query has a result by the time we use it; so we can synchronously populate a default state
-  const [valueRef, setValue] = useStateRefWithReactiveInput<GetResult<TQuery>>(initialResult)
-
-  React.useEffect(
-    () => () => {
-      spanAlreadyStartedCache.delete(query$)
-      span.end()
-    },
-    [query$, span],
-  )
-
-  // Subscribe to future updates for this query
-  React.useEffect(() => {
-    query$.activeSubscriptions.add(stackInfo)
-
-    return store.subscribe(
-      query$,
-      (newValue) => {
-        // NOTE: we return a reference to the result object within LiveStore;
-        // this implies that app code must not mutate the results, or else
-        // there may be weird reactivity bugs.
-        if (deepEqual(newValue, valueRef.current) === false) {
-          setValue(newValue)
-        }
-      },
-      () => {
-        query$.activeSubscriptions.delete(stackInfo)
-      },
-      { label: query$.label, otelContext },
-    )
-  }, [stackInfo, query$, setValue, store, valueRef, otelContext, span])
-
-  return valueRef
-}