@livestore/livestore 0.0.54-dev.5 → 0.0.55-dev.0

package/src/react/LiveStoreProvider.test.tsx

@@ -7,27 +7,25 @@ import { describe, expect, it } from 'vitest'
 
 import { parseTodos, schema } from '../__tests__/react/fixture.js'
 import { querySQL } from '../reactiveQueries/sql.js'
-import type { Store } from '../store.js'
 import * as LiveStoreReact from './index.js'
 import { LiveStoreProvider } from './LiveStoreProvider.js'
 
 describe('LiveStoreProvider', () => {
   it('simple', async () => {
-    let renderCount = 0
+    let appRenderCount = 0
 
     const allTodos$ = querySQL(`select * from todos`, { map: parseTodos })
-    let latestStoreCtx: { store: Store } | undefined = undefined
 
     const App = () => {
-      renderCount++
-
-      latestStoreCtx = LiveStoreReact.useStore()
+      appRenderCount++
 
       const todos = LiveStoreReact.useQuery(allTodos$)
 
       return <div>{JSON.stringify(todos)}</div>
     }
 
+    const abortController = new AbortController()
+
     const Root = ({ forceUpdate }: { forceUpdate: number }) => {
       const bootCb = React.useCallback(
         (db: BootDb) =>
@@ -37,7 +35,13 @@ describe('LiveStoreProvider', () => {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       const adapterMemo = React.useMemo(() => makeInMemoryAdapter(), [forceUpdate])
       return (
-        <LiveStoreProvider schema={schema} fallback={<div>Loading LiveStore</div>} adapter={adapterMemo} boot={bootCb}>
+        <LiveStoreProvider
+          schema={schema}
+          renderLoading={(status) => <div>Loading LiveStore: {status.stage}</div>}
+          adapter={adapterMemo}
+          boot={bootCb}
+          signal={abortController.signal}
+        >
           <App />
         </LiveStoreProvider>
       )
@@ -45,19 +49,57 @@ describe('LiveStoreProvider', () => {
 
     const { rerender } = render(<Root forceUpdate={1} />)
 
-    expect(renderCount).toBe(0)
+    expect(appRenderCount).toBe(0)
 
-    await waitForElementToBeRemoved(() => screen.getByText('Loading LiveStore'))
+    await waitForElementToBeRemoved(() => screen.getByText((_) => _.startsWith('Loading LiveStore')))
 
-    expect(renderCount).toBe(1)
+    expect(appRenderCount).toBe(1)
 
     rerender(<Root forceUpdate={2} />)
 
-    await waitFor(() => screen.getByText('Loading LiveStore'))
-    await waitForElementToBeRemoved(() => screen.getByText('Loading LiveStore'))
+    await waitFor(() => screen.getByText('Loading LiveStore: loading'))
+    await waitFor(() => screen.getByText((_) => _.includes('buy milk')))
+
+    expect(appRenderCount).toBe(2)
+
+    abortController.abort()
+
+    await waitFor(() => screen.getByText('LiveStore Shutdown'))
+  })
+
+  it('error during boot', async () => {
+    let appRenderCount = 0
+
+    const App = () => {
+      appRenderCount++
+
+      return <div>hello world</div>
+    }
+
+    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);`),
+        [],
+      )
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      const adapterMemo = React.useMemo(() => makeInMemoryAdapter(), [forceUpdate])
+      return (
+        <LiveStoreProvider
+          schema={schema}
+          renderLoading={(status) => <div>Loading LiveStore: {status.stage}</div>}
+          adapter={adapterMemo}
+          boot={bootCb}
+        >
+          <App />
+        </LiveStoreProvider>
+      )
+    }
+
+    render(<Root forceUpdate={1} />)
 
-    expect(renderCount).toBe(2)
+    expect(appRenderCount).toBe(0)
 
-    await latestStoreCtx!.store.destroy()
+    await waitFor(() => screen.getByText((_) => _.startsWith('LiveStore.UnexpectedError')))
   })
 })

package/src/react/LiveStoreProvider.tsx

@@ -1,53 +1,66 @@
-import type { BootDb, StoreAdapterFactory } from '@livestore/common'
+import { type BootDb, type BootStatus, type StoreAdapterFactory, UnexpectedError } from '@livestore/common'
 import type { LiveStoreSchema } from '@livestore/common/schema'
-import { shouldNeverHappen } from '@livestore/utils'
+import { errorToString } from '@livestore/utils'
+import { Effect, Exit, FiberSet, Logger, LogLevel, Schema, Scope } from '@livestore/utils/effect'
 import type * as otel from '@opentelemetry/api'
 import type { ReactElement, ReactNode } from 'react'
 import React from 'react'
 
 // TODO refactor so the `react` module doesn't depend on `effect` module
 import type { LiveStoreContext as StoreContext_, LiveStoreCreateStoreOptions } from '../effect/LiveStore.js'
-import type { BaseGraphQLContext, GraphQLOptions, Store } from '../store.js'
+import type { BaseGraphQLContext, GraphQLOptions, OtelOptions } from '../store.js'
 import { createStore } from '../store.js'
 import { LiveStoreContext } from './LiveStoreContext.js'
 
 interface LiveStoreProviderProps<GraphQLContext> {
   schema: LiveStoreSchema
-  boot?: (db: BootDb, parentSpan: otel.Span) => unknown | Promise<unknown>
+  boot?: (db: BootDb, parentSpan: otel.Span) => void | Promise<void> | Effect.Effect<void, unknown, otel.Tracer>
   graphQLOptions?: GraphQLOptions<GraphQLContext>
-  otelTracer?: otel.Tracer
-  otelRootSpanContext?: otel.Context
-  fallback: ReactElement
+  otelOptions?: OtelOptions
+  renderLoading: (status: BootStatus) => ReactElement
   adapter: StoreAdapterFactory
   batchUpdates?: (run: () => void) => void
   disableDevtools?: boolean
+  signal?: AbortSignal
 }
 
 export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
-  fallback,
+  renderLoading,
   graphQLOptions,
-  otelTracer,
-  otelRootSpanContext,
+  otelOptions,
   children,
   schema,
   boot,
   adapter,
   batchUpdates,
   disableDevtools,
+  signal,
 }: LiveStoreProviderProps<GraphQLContext> & { children?: ReactNode }): JSX.Element => {
   const storeCtx = useCreateStore({
     schema,
     graphQLOptions,
-    otelTracer,
-    otelRootSpanContext,
+    otelOptions,
     boot,
     adapter,
     batchUpdates,
     disableDevtools,
+    signal,
   })
 
-  if (storeCtx === undefined) {
-    return fallback
+  if (storeCtx.stage === 'error') {
+    return (
+      <div>
+        {Schema.is(UnexpectedError)(storeCtx.error) ? storeCtx.error.toString() : errorToString(storeCtx.error)}
+      </div>
+    )
+  }
+
+  if (storeCtx.stage === 'shutdown') {
+    return <div>LiveStore Shutdown</div>
+  }
+
+  if (storeCtx.stage !== 'running') {
+    return <div>{renderLoading(storeCtx)}</div>
   }
 
   window.__debugLiveStore = storeCtx.store
@@ -58,78 +71,124 @@ export const LiveStoreProvider = <GraphQLContext extends BaseGraphQLContext>({
 const useCreateStore = <GraphQLContext extends BaseGraphQLContext>({
   schema,
   graphQLOptions,
-  otelTracer,
-  otelRootSpanContext,
+  otelOptions,
   boot,
   adapter,
   batchUpdates,
   disableDevtools,
+  signal,
 }: LiveStoreCreateStoreOptions<GraphQLContext>) => {
   const [_, rerender] = React.useState(0)
-  const ctxValueRef = React.useRef<StoreContext_ | undefined>(undefined)
+  const ctxValueRef = React.useRef<{
+    value: StoreContext_ | BootStatus
+    scope: Scope.CloseableScope | undefined
+    counter: number
+  }>({
+    value: { stage: 'loading' },
+    scope: undefined,
+    counter: 0,
+  })
+
+  // console.debug(`useCreateStore (${ctxValueRef.current.counter})`, ctxValueRef.current.value.stage)
+
   const inputPropsCacheRef = React.useRef({
     schema,
     graphQLOptions,
-    otelTracer,
-    otelRootSpanContext,
+    otelOptions,
     boot,
     adapter,
     batchUpdates,
+    disableDevtools,
+    signal,
   })
-  const oldStoreAlreadyDestroyedRef = React.useRef(false)
 
   if (
     inputPropsCacheRef.current.schema !== schema ||
     inputPropsCacheRef.current.graphQLOptions !== graphQLOptions ||
-    inputPropsCacheRef.current.otelTracer !== otelTracer ||
-    inputPropsCacheRef.current.otelRootSpanContext !== otelRootSpanContext ||
+    inputPropsCacheRef.current.otelOptions !== otelOptions ||
     inputPropsCacheRef.current.boot !== boot ||
     inputPropsCacheRef.current.adapter !== adapter ||
-    inputPropsCacheRef.current.batchUpdates !== batchUpdates
+    inputPropsCacheRef.current.batchUpdates !== batchUpdates ||
+    inputPropsCacheRef.current.disableDevtools !== disableDevtools ||
+    inputPropsCacheRef.current.signal !== signal
   ) {
     inputPropsCacheRef.current = {
       schema,
       graphQLOptions,
-      otelTracer,
-      otelRootSpanContext,
+      otelOptions,
       boot,
       adapter,
       batchUpdates,
+      disableDevtools,
+      signal,
+    }
+    if (ctxValueRef.current.scope !== undefined) {
+      Scope.close(ctxValueRef.current.scope, Exit.void).pipe(Effect.tapCauseLogPretty, Effect.runFork)
     }
-    ctxValueRef.current?.store.destroy()
-    oldStoreAlreadyDestroyedRef.current = true
-    ctxValueRef.current = undefined
+    ctxValueRef.current = { value: { stage: 'loading' }, scope: undefined, counter: ctxValueRef.current.counter + 1 }
   }
 
   React.useEffect(() => {
-    let store: Store | undefined
+    const storeScope = Scope.make().pipe(Effect.runSync)
 
-    void (async () => {
-      try {
-        store = await createStore({
+    const counter = ctxValueRef.current.counter
+
+    const setContextValue = (value: StoreContext_ | BootStatus) => {
+      if (ctxValueRef.current.counter !== counter) return
+      ctxValueRef.current.value = value
+      rerender((c) => c + 1)
+    }
+
+    Scope.addFinalizer(
+      storeScope,
+      Effect.sync(() => setContextValue({ stage: 'shutdown' })),
+    ).pipe(Effect.runSync)
+
+    ctxValueRef.current.scope = storeScope
+
+    signal?.addEventListener('abort', () => {
+      if (ctxValueRef.current.scope !== undefined && ctxValueRef.current.counter === counter) {
+        Scope.close(ctxValueRef.current.scope, Exit.void).pipe(Effect.tapCauseLogPretty, Effect.runFork)
+        ctxValueRef.current.scope = undefined
+      }
+    })
+
+    FiberSet.make().pipe(
+      Effect.andThen((fiberSet) =>
+        createStore({
+          fiberSet,
           schema,
           graphQLOptions,
-          otelTracer,
-          otelRootSpanContext,
+          otelOptions,
           boot,
           adapter,
           batchUpdates,
           disableDevtools,
-        })
-        ctxValueRef.current = { store }
-        oldStoreAlreadyDestroyedRef.current = false
-        rerender((c) => c + 1)
-      } catch (e) {
-        shouldNeverHappen(`Error creating LiveStore store: ${e}`)
-      }
-    })()
+          onBootStatus: (status) => {
+            if (ctxValueRef.current.value.stage === 'running' || ctxValueRef.current.value.stage === 'error') return
+            setContextValue(status)
+          },
+        }),
+      ),
+      Effect.tapSync((store) => setContextValue({ stage: 'running', store })),
+      Effect.tapError((error) => Effect.sync(() => setContextValue({ stage: 'error', error }))),
+      Effect.tapDefect((defect) => Effect.sync(() => setContextValue({ stage: 'error', error: defect }))),
+      Scope.extend(storeScope),
+      Effect.forkIn(storeScope),
+      Effect.tapCauseLogPretty,
+      Effect.annotateLogs({ thread: 'window' }),
+      Effect.provide(Logger.pretty),
+      Logger.withMinimumLogLevel(LogLevel.Debug),
+      Effect.runFork,
+    )
 
     return () => {
-      if (oldStoreAlreadyDestroyedRef.current === false) {
-        store?.destroy()
+      if (ctxValueRef.current.scope !== undefined) {
+        Scope.close(ctxValueRef.current.scope, Exit.void).pipe(Effect.tapCauseLogPretty, Effect.runFork)
+        ctxValueRef.current.scope = undefined
       }
     }
-  }, [schema, graphQLOptions, otelTracer, otelRootSpanContext, boot, adapter, batchUpdates, disableDevtools])
+  }, [schema, graphQLOptions, otelOptions, boot, adapter, batchUpdates, disableDevtools, signal])
 
-  return ctxValueRef.current
+  return ctxValueRef.current.value
 }

package/src/react/useQuery.ts

@@ -1,5 +1,5 @@
+import { deepEqual } from '@livestore/utils'
 import * as otel from '@opentelemetry/api'
-import { isEqual } from 'lodash-es'
 import React from 'react'
 
 import type { GetResult, LiveQueryAny } from '../reactiveQueries/base-class.js'
@@ -90,7 +90,7 @@ export const useQueryRef = <TQuery extends LiveQueryAny>(
         // 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 (isEqual(newValue, valueRef.current) === false) {
+        if (deepEqual(newValue, valueRef.current) === false) {
           setValue(newValue)
         }
       },

package/src/react/useRow.test.tsx

@@ -15,9 +15,9 @@ 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({ useGlobalDbGraph: false })
+    using inputs = await makeTodoMvc({ useGlobalReactivityGraph: false })
 
-    const { wrapper, AppComponentSchema, store, dbGraph, makeRenderCount } = inputs
+    const { wrapper, AppComponentSchema, store, reactivityGraph, makeRenderCount } = inputs
 
     const renderCount = makeRenderCount()
 
@@ -25,7 +25,7 @@ describe.concurrent('useRow', () => {
       (userId: string) => {
         renderCount.inc()
 
-        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { dbGraph })
+        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
         return { state, setState }
       },
       { wrapper, initialProps: 'u1' },
@@ -53,9 +53,9 @@ describe.concurrent('useRow', () => {
   // 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({ useGlobalDbGraph: false })
+    using inputs = await makeTodoMvc({ useGlobalReactivityGraph: false })
 
-    const { wrapper, AppComponentSchema, dbGraph, makeRenderCount } = inputs
+    const { wrapper, AppComponentSchema, reactivityGraph, makeRenderCount } = inputs
 
     const renderCount = makeRenderCount()
 
@@ -63,7 +63,7 @@ describe.concurrent('useRow', () => {
       (userId: string) => {
         renderCount.inc()
 
-        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { dbGraph })
+        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
         return { state, setState }
       },
       { wrapper, initialProps: 'u1' },
@@ -81,9 +81,9 @@ describe.concurrent('useRow', () => {
   })
 
   it('should update the data reactively - via raw store mutation', async () => {
-    using inputs = await makeTodoMvc({ useGlobalDbGraph: false })
+    using inputs = await makeTodoMvc({ useGlobalReactivityGraph: false })
 
-    const { wrapper, AppComponentSchema, store, dbGraph, makeRenderCount } = inputs
+    const { wrapper, AppComponentSchema, store, reactivityGraph, makeRenderCount } = inputs
 
     const renderCount = makeRenderCount()
 
@@ -91,7 +91,7 @@ describe.concurrent('useRow', () => {
       (userId: string) => {
         renderCount.inc()
 
-        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { dbGraph })
+        const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
         return { state, setState }
       },
       { wrapper, initialProps: 'u1' },
@@ -115,17 +115,17 @@ describe.concurrent('useRow', () => {
   })
 
   it('should work for a larger app', async () => {
-    using inputs = await makeTodoMvc({ useGlobalDbGraph: false })
-    const { wrapper, store, dbGraph, makeRenderCount, AppRouterSchema } = inputs
+    using inputs = await makeTodoMvc({ useGlobalReactivityGraph: false })
+    const { wrapper, store, reactivityGraph, makeRenderCount, AppRouterSchema } = inputs
 
-    const allTodos$ = LiveStore.querySQL<Todo[]>(`select * from todos`, { label: 'allTodos', dbGraph })
+    const allTodos$ = LiveStore.querySQL<Todo[]>(`select * from todos`, { label: 'allTodos', reactivityGraph })
 
     const appRouterRenderCount = makeRenderCount()
     let globalSetState: LiveStoreReact.StateSetters<typeof AppRouterSchema> | undefined
     const AppRouter: React.FC = () => {
       appRouterRenderCount.inc()
 
-      const [state, setState] = LiveStoreReact.useRow(AppRouterSchema, { dbGraph })
+      const [state, setState] = LiveStoreReact.useRow(AppRouterSchema, { reactivityGraph })
 
       globalSetState = setState
 
@@ -153,7 +153,7 @@ describe.concurrent('useRow', () => {
     }
 
     const TaskDetails: React.FC<{ id: string }> = ({ id }) => {
-      const [todo] = LiveStoreReact.useRow(todos, id, { dbGraph })
+      const [todo] = LiveStoreReact.useRow(todos, id, { reactivityGraph })
       return <div role="content">{JSON.stringify(todo)}</div>
     }
 
@@ -198,8 +198,8 @@ describe.concurrent('useRow', () => {
   })
 
   it('should work for a useRow query chained with a useTemporary query', async () => {
-    using inputs = await makeTodoMvc({ useGlobalDbGraph: false })
-    const { store, wrapper, AppComponentSchema, dbGraph, makeRenderCount } = inputs
+    using inputs = await makeTodoMvc({ useGlobalReactivityGraph: false })
+    const { store, wrapper, AppComponentSchema, reactivityGraph, makeRenderCount } = inputs
     const renderCount = makeRenderCount()
 
     store.mutate(
@@ -211,12 +211,12 @@ describe.concurrent('useRow', () => {
       (userId: string) => {
         renderCount.inc()
 
-        const [_row, _setRow, rowState$] = LiveStoreReact.useRow(AppComponentSchema, userId, { dbGraph })
+        const [_row, _setRow, rowState$] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
         const todos = LiveStoreReact.useTemporaryQuery(
           () =>
             LiveStore.querySQL<any[]>(
               (get) => LiveStore.sql`select * from todos where text like '%${get(rowState$).text}%'`,
-              { dbGraph, label: 'todosFiltered' },
+              { reactivityGraph, label: 'todosFiltered' },
             ),
           userId,
         )
@@ -262,9 +262,9 @@ 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({ useGlobalDbGraph: false, otelContext, otelTracer })
+      using inputs = await makeTodoMvc({ useGlobalReactivityGraph: false, otelContext, otelTracer })
 
-      const { wrapper, AppComponentSchema, store, dbGraph, makeRenderCount, strictMode } = inputs
+      const { wrapper, AppComponentSchema, store, reactivityGraph, makeRenderCount, strictMode } = inputs
 
       const renderCount = makeRenderCount()
 
@@ -272,7 +272,7 @@ describe.concurrent('useRow', () => {
         (userId: string) => {
           renderCount.inc()
 
-          const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { dbGraph })
+          const [state, setState] = LiveStoreReact.useRow(AppComponentSchema, userId, { reactivityGraph })
           return { state, setState }
         },
         { wrapper, initialProps: 'u1' },
@@ -297,7 +297,7 @@ describe.concurrent('useRow', () => {
       expect(renderCount.val).toBe(2)
 
       unmount()
-      store.destroy()
+      await store.destroy()
       span.end()
 
       const mapAttributes = (attributes: otel.Attributes) => {

package/src/react/useRow.ts

@@ -1,14 +1,11 @@
 import type { QueryInfo } from '@livestore/common'
-import {} from // deriveCreateMutationDef as deriveCreateMutationDef_,
-// updateMutationForQueryInfo as updateMutationForQueryInfo_,
-'@livestore/common'
 import { DbSchema } from '@livestore/common/schema'
 import { shouldNeverHappen } from '@livestore/utils'
+import { ReadonlyRecord } from '@livestore/utils/effect'
 import type { SqliteDsl } from 'effect-db-schema'
-import { mapValues } from 'lodash-es'
 import React from 'react'
 
-import type { DbGraph, LiveQuery } from '../index.js'
+import type { LiveQuery, ReactivityGraph } from '../index.js'
 import type { RowResult } from '../row-query.js'
 import { rowQuery } from '../row-query.js'
 import { useStore } from './LiveStoreContext.js'
@@ -26,7 +23,7 @@ export type UseRowOptionsDefaulValues<TTableDef extends DbSchema.TableDef> = {
 }
 
 export type UseRowOptionsBase = {
-  dbGraph?: DbGraph
+  reactivityGraph?: ReactivityGraph
 }
 
 /**
@@ -76,7 +73,7 @@ export const useRow: {
   const id = typeof idOrOptions === 'string' ? idOrOptions : undefined
   const options: (UseRowOptionsBase & UseRowOptionsDefaulValues<TTableDef>) | undefined =
     typeof idOrOptions === 'string' ? options_ : idOrOptions
-  const { defaultValues, dbGraph } = options ?? {}
+  const { defaultValues, reactivityGraph } = options ?? {}
 
   type TComponentState = SqliteDsl.FromColumns.RowDecoded<TTableDef['sqliteDef']['columns']>
 
@@ -100,11 +97,11 @@ export const useRow: {
   const { query$, otelContext } = useMakeTemporaryQuery(
     (otelContext) =>
       DbSchema.tableIsSingleton(table)
-        ? (rowQuery(table, { otelContext, dbGraph }) as LiveQuery<RowResult<TTableDef>, QueryInfo>)
+        ? (rowQuery(table, { otelContext, reactivityGraph }) as LiveQuery<RowResult<TTableDef>, QueryInfo>)
         : (rowQuery(table as TTableDef & { options: { isSingleton: false } }, id!, {
             otelContext,
             defaultValues: defaultValues!,
-            dbGraph,
+            reactivityGraph,
           }) as any as LiveQuery<RowResult<TTableDef>, QueryInfo>),
     [id!, tableName],
     {
@@ -133,7 +130,7 @@ export const useRow: {
       }
     } else {
       const setState = // TODO: do we have a better type for the values that can go in SQLite?
-        mapValues(sqliteTableDef.columns, (column, columnName) => (newValueOrFn: any) => {
+        ReadonlyRecord.map(sqliteTableDef.columns, (column, columnName) => (newValueOrFn: any) => {
           const newValue =
             // @ts-expect-error TODO fix typing
             typeof newValueOrFn === 'function' ? newValueOrFn(query$Ref.current[columnName]) : newValueOrFn

package/src/react/useTemporaryQuery.ts

@@ -53,8 +53,8 @@ export const useMakeTemporaryQuery = <TResult, TQueryInfo extends QueryInfo>(
   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.graph.id + '-' + makeQuery.toString(),
-    [key, makeQuery, store.graph.id],
+    () => (Array.isArray(key) ? key.join('-') : key) + '-' + store.reactivityGraph.id + '-' + makeQuery.toString(),
+    [key, makeQuery, store.reactivityGraph.id],
   )
   const fullKeyRef = React.useRef<string>()
 

package/src/reactive.ts

@@ -25,9 +25,8 @@
 
 import { BoundArray } from '@livestore/common'
 import type { PrettifyFlat } from '@livestore/utils'
-import { shouldNeverHappen } from '@livestore/utils'
+import { deepEqual, shouldNeverHappen } from '@livestore/utils'
 import type * as otel from '@opentelemetry/api'
-import { isEqual } from 'lodash-es'
 // import { getDurationMsFromSpan } from './otel.js'
 
 export const NOT_REFRESHED_YET = Symbol.for('NOT_REFRESHED_YET')
@@ -234,7 +233,7 @@ export class ReactiveGraph<
       super: new Set(),
       label: options?.label,
       meta: options?.meta,
-      equal: options?.equal ?? isEqual,
+      equal: options?.equal ?? deepEqual,
       refreshes: 0,
     }
 
@@ -331,7 +330,7 @@ export class ReactiveGraph<
       recomputations: 0,
       label: options?.label,
       meta: options?.meta,
-      equal: options?.equal ?? isEqual,
+      equal: options?.equal ?? deepEqual,
       __getResult: getResult,
     }
 
@@ -618,7 +617,9 @@ const serializeAtom = (atom: Atom<any, unknown, any>, includeResult: boolean): S
   }
 
   const previousResult: EncodedOption<string> = includeResult
-    ? encodedOptionSome(JSON.stringify(atom.previousResult))
+    ? encodedOptionSome(
+        atom.previousResult === NOT_REFRESHED_YET ? '"SYMBOL_NOT_REFRESHED_YET"' : JSON.stringify(atom.previousResult),
+      )
     : encodedOptionNone()
 
   if (atom._tag === 'ref') {

package/src/reactiveQueries/base-class.ts

@@ -6,15 +6,15 @@ import type { StackInfo } from '../react/utils/stack-info.js'
 import { type Atom, type GetAtom, ReactiveGraph, throwContextNotSetError, type Thunk } from '../reactive.js'
 import type { QueryDebugInfo, RefreshReason, Store } from '../store.js'
 
-export type DbGraph = ReactiveGraph<RefreshReason, QueryDebugInfo, DbContext>
+export type ReactivityGraph = ReactiveGraph<RefreshReason, QueryDebugInfo, QueryContext>
 
-export const makeDbGraph = (): DbGraph =>
-  new ReactiveGraph<RefreshReason, QueryDebugInfo, DbContext>({
+export const makeReactivityGraph = (): ReactivityGraph =>
+  new ReactiveGraph<RefreshReason, QueryDebugInfo, QueryContext>({
     // TODO also find a better way to only use this effects wrapper when used in a React app
     effectsWrapper: (run) => ReactDOM.unstable_batchedUpdates(() => run()),
   })
 
-export type DbContext = {
+export type QueryContext = {
   store: Store
   otelTracer: otel.Tracer
   rootOtelContext: otel.Context
@@ -37,7 +37,7 @@ export interface LiveQuery<TResult, TQueryInfo extends QueryInfo = QueryInfoNone
   '__result!': TResult
 
   /** A reactive thunk representing the query results */
-  results$: Thunk<TResult, DbContext, RefreshReason>
+  results$: Thunk<TResult, QueryContext, RefreshReason>
 
   label: string
 
@@ -72,11 +72,11 @@ export abstract class LiveStoreQueryBase<TResult, TQueryInfo extends QueryInfo>
   /** Human-readable label for the query for debugging */
   abstract label: string
 
-  abstract results$: Thunk<TResult, DbContext, RefreshReason>
+  abstract results$: Thunk<TResult, QueryContext, RefreshReason>
 
   activeSubscriptions: Set<StackInfo> = new Set()
 
-  protected abstract dbGraph: DbGraph
+  protected abstract reactivityGraph: ReactivityGraph
 
   abstract queryInfo: TQueryInfo
 
@@ -102,8 +102,8 @@ export abstract class LiveStoreQueryBase<TResult, TQueryInfo extends QueryInfo>
     onUnsubsubscribe?: () => void,
     options?: { label?: string; otelContext?: otel.Context } | undefined,
   ): (() => void) =>
-    this.dbGraph.context?.store.subscribe(this, onNewValue, onUnsubsubscribe, options) ??
-    throwContextNotSetError(this.dbGraph)
+    this.reactivityGraph.context?.store.subscribe(this, onNewValue, onUnsubsubscribe, options) ??
+    throwContextNotSetError(this.reactivityGraph)
 }
 
 export type GetAtomResult = <T>(atom: Atom<T, any, RefreshReason> | LiveQuery<T, any>) => T