@effect-app/vue 4.0.0-beta.273 → 4.0.0-beta.275

package/src/atomQuery.ts

@@ -206,6 +206,28 @@ export interface AtomQueryOptions {
 
 const defaults = { staleTime: Duration.seconds(5), gcTime: Duration.minutes(5) }
 
+export interface AtomQueryMetadata {
+  readonly staleTimeMs: number
+}
+
+const atomQueryMetadata = new WeakMap<Atom.Atom<AsyncResult.AsyncResult<any, any>>, AtomQueryMetadata>()
+
+const setAtomQueryMetadata = <A, E>(
+  atom: Atom.Atom<AsyncResult.AsyncResult<A, E>>,
+  opts: AtomQueryOptions = {}
+) => {
+  const staleTimeMs = staleTimeMsOf(opts)
+  const previous = atomQueryMetadata.get(atom)
+  atomQueryMetadata.set(atom, {
+    staleTimeMs: previous === undefined ? staleTimeMs : Math.min(previous.staleTimeMs, staleTimeMs)
+  })
+  return atom
+}
+
+export const getAtomQueryMetadata = <A, E>(
+  atom: Atom.Atom<AsyncResult.AsyncResult<A, E>>
+): AtomQueryMetadata | undefined => atomQueryMetadata.get(atom)
+
 /** Exported so the vue hook can do refetch-on-mount-per-observer with the same rule as swr. */
 export const isStaleResult = (r: AsyncResult.AsyncResult<any, any>, staleTimeMs: number): boolean => {
   if (r.waiting) return false
@@ -225,10 +247,8 @@ export const withQueryOptions = <A, E>(
   self: Atom.Atom<AsyncResult.AsyncResult<A, E>>,
   opts: AtomQueryOptions = {}
 ): Atom.Atom<AsyncResult.AsyncResult<A, E>> => {
+  setAtomQueryMetadata(self, opts)
   const staleTime: Duration.Input = opts.staleTime ?? defaults.staleTime
-  const gcTime = opts.gcTime === "infinity"
-    ? "infinity" as const
-    : Duration.fromInputUnsafe(opts.gcTime ?? defaults.gcTime)
   let atom = self
   const revalidateOnFocus = opts.revalidateOnFocus ?? true
   atom = Atom.swr({
@@ -238,7 +258,7 @@ export const withQueryOptions = <A, E>(
   })(atom)
   if (opts.refetchInterval) atom = Atom.withRefresh(Duration.millis(opts.refetchInterval))(atom)
   if (opts.structuralSharing ?? true) atom = structuralShare(atom)
-  return gcTime === "infinity" ? Atom.keepAlive(atom) : Atom.setIdleTTL(atom, gcTime)
+  return atom
 }
 
 /** Constant atom for disabled / `mode:"optional"`-None queries: stays Initial, never fetches. */
@@ -321,7 +341,7 @@ export const buildQueryFamily = <I, A, E>(
     // gcTime LAST so the whole chain (incl. the registration + tracking) stays alive through the
     // idle window, letting invalidation reach a cached-but-unmounted query.
     atom = Atom.setIdleTTL(atom, defaults.gcTime)
-    return Atom.withLabel(`query:${self.id}`)(atom)
+    return setAtomQueryMetadata(Atom.withLabel(`query:${self.id}`)(atom))
   })
 }
 
@@ -350,7 +370,7 @@ export const buildStreamQueryFamily = <I, A, E>(
     atom = rt.factory.withReactivity(reactivityKeys)(atom)
     atom = trackWritableByKeys(reactivityKeys)(atom)
     atom = Atom.setIdleTTL(atom, defaults.gcTime)
-    return Atom.withLabel(`stream-query:${self.id}`)(atom)
+    return setAtomQueryMetadata(Atom.withLabel(`stream-query:${self.id}`)(atom))
   })
 }
 

package/src/internal/tanstackQuery.ts

@@ -14,7 +14,7 @@ import * as Atom from "effect/unstable/reactivity/Atom"
 import { computed, type MaybeRefOrGetter, shallowRef, toValue, watch, type WatchSource } from "vue"
 import { reportRuntimeError } from "../lib.ts"
 import type { QueryInvalidator } from "../mutate.ts"
-import type { CustomDefinedInitialQueryOptions, CustomDefinedPlaceholderQueryOptions, CustomUndefinedInitialQueryOptions, CustomUseQueryOptions, MakeQuery2, QueryHandle, QueryObserverResult, RefetchOptions } from "../query.ts"
+import type { CustomDefinedInitialQueryOptions, CustomDefinedPlaceholderQueryOptions, CustomUndefinedInitialQueryOptions, CustomUseQueryOptions, MakeQuery2, QueryCacheUpdater, QueryHandle, QueryObserverResult, RefetchOptions } from "../query.ts"
 import { makeRunPromise } from "../runtime.ts"
 
 const swrToQuery = <E, A>(r: {
@@ -104,6 +104,28 @@ export const makeTanstackQueryInvalidator = (queryClient: QueryClient): QueryInv
     )
 })
 
+const fullQueryKey = (
+  q: { readonly queryKeyProjectionHash?: string },
+  queryKey: ReadonlyArray<unknown>,
+  input: unknown
+) => q.queryKeyProjectionHash === undefined ? [...queryKey, input] : [...queryKey, q.queryKeyProjectionHash, input]
+
+export const makeTanstackQueryCacheUpdater = (queryClient: QueryClient): QueryCacheUpdater => ({
+  update: <I, A, E, R, Request extends Req, Name extends string>(
+    _registry: ReturnType<typeof injectRegistry>,
+    query: RequestHandlerWithInput<I, A, E, R, Request, Name>,
+    input: I,
+    updater: (data: NoInfer<A>) => NoInfer<A>
+  ) => {
+    const queryKey = fullQueryKey(query, makeQueryKey(query), input)
+    if (queryClient.getQueryData(queryKey) === undefined) {
+      console.warn(`Query ${query.id} has not been used yet; nothing to update`)
+      return
+    }
+    queryClient.setQueryData(queryKey, (data: A | undefined) => data === undefined ? data : updater(data))
+  }
+})
+
 export const makeTanstackQuery = <R>(
   getRuntime: () => Context.Context<R>,
   queryClient: QueryClient
@@ -117,7 +139,6 @@ export const makeTanstackQuery = <R>(
   ) => {
     const runPromise = makeRunPromise(getRuntime())
     const queryKey = makeQueryKey(q)
-    const projectionHash = q.queryKeyProjectionHash
     const enabled = resolveEnabled(arg, options)
     const tanstackOptions = {
       ...(options?.staleTime !== undefined ? { staleTime: options.staleTime } : {}),
@@ -134,7 +155,7 @@ export const makeTanstackQuery = <R>(
       retry: (retryCount: number, error: unknown) => isRetryable(error) && retryCount < 5,
       queryKey: computed(() => {
         const input = resolveInput(arg, options?.mode)
-        return projectionHash === undefined ? [...queryKey, input] : [...queryKey, projectionHash, input]
+        return fullQueryKey(q, queryKey, input)
       }),
       queryFn: ({ signal }: { readonly signal: AbortSignal }) =>
         runPromise(

package/src/makeClient.ts

@@ -16,28 +16,58 @@ import type * as Stream from "effect/Stream"
 import * as Struct from "effect/Struct"
 import type * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
 import * as Reactivity from "effect/unstable/reactivity/Reactivity"
-import { computed, type ComputedRef, onBeforeUnmount, ref, type WatchSource } from "vue"
+import { computed, type ComputedRef, effectScope, onBeforeUnmount, onScopeDispose, ref, type WatchSource } from "vue"
 import { type AtomClientRuntime, invalidateAndAwait, makeAtomClientRuntime } from "./atomQuery.ts"
 import { type Commander, CommanderStatic, type Progress } from "./commander.ts"
-import { makeTanstackQuery, makeTanstackQueryClient, makeTanstackQueryInvalidator } from "./internal/tanstackQuery.ts"
+import { makeTanstackQuery, makeTanstackQueryCacheUpdater, makeTanstackQueryClient, makeTanstackQueryInvalidator } from "./internal/tanstackQuery.ts"
 import { type I18n } from "./intl.ts"
 import { type CommanderResolved, makeUseCommand } from "./makeUseCommand.ts"
 import { atomQueryInvalidator, combineQueryInvalidators, type InvalidationEntry, makeMutation, makeStreamMutation2, type MutationOptionsBase, type QueryInvalidator, useMakeMutation } from "./mutate.ts"
-import { type AtomQueryNewOptions, type CustomUndefinedInitialQueryOptions, makeQuery, makeQueryAtom, makeQueryFamily, makeQueryNew, makeStreamQuery, makeStreamQueryAtom, makeStreamQueryFamily, makeStreamQueryNew, type QueryObserverResult, type RefetchOptions, type StreamQueryAtomFamily, type SuspenseQueryView, type UseQueryReturnType } from "./query.ts"
+import { atomQueryCacheUpdater, type AtomQueryNewOptions, combineQueryCacheUpdaters, type CustomUndefinedInitialQueryOptions, makeQuery, makeQueryAtom, makeQueryFamily, makeQueryNew, makeStreamQuery, makeStreamQueryAtom, makeStreamQueryFamily, makeStreamQueryNew, optionalAtomQueryCacheUpdater, type QueryObserverResult, type RefetchOptions, setQueryCacheUpdater, type StreamQueryAtomFamily, type SuspenseQueryView, type UseQueryReturnType } from "./query.ts"
 import { makeRunPromise } from "./runtime.ts"
 import { type Toast } from "./toast.ts"
 
 export type { Progress }
 
+const useScopedSuspenseSetup = <A>(setup: () => A) => {
+  const scope = effectScope()
+  const controller = new AbortController()
+  const value = scope.run(setup)
+  if (value === undefined) {
+    throw new Error("Internal Error: suspense setup scope did not initialize")
+  }
+
+  const isMounted = ref(true)
+  let stopped = false
+  const stop = () => {
+    if (stopped) return
+    stopped = true
+    isMounted.value = false
+    controller.abort()
+    scope.stop()
+  }
+  onBeforeUnmount(stop)
+  onScopeDispose(stop)
+
+  return [value, isMounted, controller.signal] as const
+}
+
 // TODO: optimize - work from encoded shape directly
-const projectHandler = <I, A, E, R, ProjSchema extends S.Decoder<unknown, never>>(
+const projectHandler = <
+  I,
+  A,
+  E,
+  R,
+  SuccessSchema extends S.Top & { readonly "EncodingServices": R },
+  ProjSchema extends S.Top & { readonly "DecodingServices": R }
+>(
   handler: (i: I) => Effect.Effect<A, E, R>,
-  successSchema: S.Top,
+  successSchema: SuccessSchema,
   projectionSchema: ProjSchema
 ) => {
-  const encode = S.encodeSync(successSchema as S.Encoder<A>)
-  const decode = S.decodeSync(projectionSchema)
-  return (i: I) => handler(i).pipe(Effect.map((value) => decode(encode(value))))
+  const encode = S.encodeUnknownEffect(successSchema)
+  const decode = S.decodeUnknownEffect(projectionSchema)
+  return (i: I) => handler(i).pipe(Effect.flatMap(encode), Effect.flatMap(decode))
 }
 
 const projectionSchemaHash = (schema: S.Top) => String(Hash.hash(schema.ast))
@@ -484,18 +514,20 @@ export class QueryImpl<R> {
       argOrOptions: I | WatchSource<I>,
       options?: CustomUndefinedInitialQueryOptions<A, CauseException<E>, TData>
     ) => {
-      const [resultRef, latestRef, fetch, uqrt] = q<TData>(argOrOptions, options)
-      const latestDefinedRef = computed<TData>(() => {
-        const latest = latestRef.value
-        if (latest === undefined) {
-          throw new Error("Internal Error: suspense resolved without a latest value")
-        }
-        return latest
-      })
-
-      const isMounted = ref(true)
-      onBeforeUnmount(() => {
-        isMounted.value = false
+      const [
+        [resultRef, latestDefinedRef, fetch, uqrt],
+        isMounted,
+        signal
+      ] = useScopedSuspenseSetup(() => {
+        const [resultRef, latestRef, fetch, uqrt] = q<TData>(argOrOptions, options)
+        const latestDefinedRef = computed<TData>(() => {
+          const latest = latestRef.value
+          if (latest === undefined) {
+            throw new Error("Internal Error: suspense resolved without a latest value")
+          }
+          return latest
+        })
+        return [resultRef, latestDefinedRef, fetch, uqrt] as const
       })
 
       // @effect-diagnostics effect/missingEffectError:off
@@ -511,7 +543,7 @@ export class QueryImpl<R> {
         return [resultRef, latestDefinedRef, fetch, uqrt] as const
       })
 
-      return runPromise(eff)
+      return runPromise(eff, { signal })
     }
   }
 
@@ -539,18 +571,16 @@ export class QueryImpl<R> {
       argOrOptions: I | WatchSource<I>,
       options?: AtomQueryNewOptions<A, TData>
     ) => {
-      const view = q<TData>(argOrOptions, options)
-      const data = computed<TData>(() => {
-        const latest = view.data.value
-        if (latest === undefined) {
-          throw new Error("Internal Error: suspenseNew resolved without a latest value")
-        }
-        return latest
-      })
-
-      const isMounted = ref(true)
-      onBeforeUnmount(() => {
-        isMounted.value = false
+      const [{ view, data }, isMounted, signal] = useScopedSuspenseSetup(() => {
+        const view = q<TData>(argOrOptions, options)
+        const data = computed<TData>(() => {
+          const latest = view.data.value
+          if (latest === undefined) {
+            throw new Error("Internal Error: suspenseNew resolved without a latest value")
+          }
+          return latest
+        })
+        return { view, data }
       })
 
       // @effect-diagnostics effect/missingEffectError:off
@@ -585,7 +615,7 @@ export class QueryImpl<R> {
         )
       })
 
-      return runPromise(eff)
+      return runPromise(eff, { signal })
     }
   }
 }
@@ -694,6 +724,14 @@ export const makeClient = <RT_, RTHooks>(
   const queryInvalidator = legacyQueryEngine === "tanstack"
     ? combineQueryInvalidators(atomInvalidator, makeTanstackQueryInvalidator(getTanstackQueryClient()))
     : atomInvalidator
+  setQueryCacheUpdater(
+    legacyQueryEngine === "tanstack"
+      ? combineQueryCacheUpdaters(
+        makeTanstackQueryCacheUpdater(getTanstackQueryClient()),
+        optionalAtomQueryCacheUpdater
+      )
+      : atomQueryCacheUpdater
+  )
 
   let m: ReturnType<typeof useMutationInt>
   const useMutation = () => m ??= useMutationInt(queryInvalidator)
@@ -742,10 +780,16 @@ export const makeClient = <RT_, RTHooks>(
     queryNew: useStreamQueryNew(handler)
   })
 
-  const projectQueryFor = <I, A, E, Request extends Req, Name extends string>(
+  const projectQueryFor = <
+    I,
+    A,
+    E,
+    Request extends Req & { readonly success: S.Top & { readonly "EncodingServices": RT } },
+    Name extends string
+  >(
     handler: RequestHandlerWithInput<I, A, E, RT, Request, Name>
   ) =>
-  <ProjSchema extends S.Decoder<unknown, never>>(projectionSchema: ProjSchema) => {
+  <ProjSchema extends S.Top & { readonly "DecodingServices": RT }>(projectionSchema: ProjSchema) => {
     const successSchema = handler.Request.success
     const projectionHash = projectionSchemaHash(projectionSchema)
     const projected = projectHandler(handler.handler, successSchema, projectionSchema)

package/src/query.ts

@@ -16,7 +16,7 @@ import * as Exit from "effect/Exit"
 import * as Stream from "effect/Stream"
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
 import * as Atom from "effect/unstable/reactivity/Atom"
-import { computed, type ComputedRef, type MaybeRefOrGetter, onBeforeUnmount, onMounted, ref, toValue, type WatchSource } from "vue"
+import { computed, type ComputedRef, effectScope, type MaybeRefOrGetter, onBeforeUnmount, onMounted, onScopeDispose, ref, toValue, type WatchSource } from "vue"
 import { type AtomClientRuntime, type AtomQueryOptions, awaitAtomResult, buildQueryFamily, buildStreamQueryFamily, disabledQueryAtom, isStaleResult, staleTimeMsOf, withQueryOptions } from "./atomQuery.ts"
 
 // --- minimal local types (replacing the former @tanstack/vue-query type imports) ---
@@ -40,6 +40,38 @@ export interface QueryView<A, E> extends QueryHandle<A, E> {
   readonly data: ComputedRef<A | undefined>
 }
 
+const useScopedSuspenseSetup = <A>(setup: () => A) => {
+  const scope = effectScope()
+  const controller = new AbortController()
+  const value = scope.run(setup)
+  if (value === undefined) {
+    throw new Error("Internal Error: atom suspense setup scope did not initialize")
+  }
+
+  const isMounted = ref(true)
+  let stopped = false
+  const stop = () => {
+    if (stopped) return
+    stopped = true
+    isMounted.value = false
+    controller.abort()
+    scope.stop()
+  }
+  onBeforeUnmount(stop)
+  onScopeDispose(stop)
+
+  return [value, isMounted, controller.signal] as const
+}
+
+export interface QueryCacheUpdater {
+  readonly update: <I, A, E, R, Request extends Req, Name extends string>(
+    registry: ReturnType<typeof injectRegistry>,
+    query: RequestHandlerWithInput<I, A, E, R, Request, Name>,
+    input: I,
+    updater: (data: NoInfer<A>) => NoInfer<A>
+  ) => void
+}
+
 // retained generic aliases so the exported option-interface arity is unchanged for consumers
 export type UseQueryReturnType<A = any, E = any> = QueryHandle<A, E>
 export type UseQueryDefinedReturnType<A = any, E = any> = QueryHandle<A, E>
@@ -111,6 +143,35 @@ const getStreamQueryFamily = <I, A, E>(
   return f
 }
 
+const makeAtomQueryCacheUpdater = (warnIfMissing: boolean): QueryCacheUpdater => ({
+  update: (registry, query, input) => {
+    const family = queryFamilyByKey.get(queryFamilyCacheKey(query))
+    if (!family) {
+      if (warnIfMissing) {
+        console.warn(`Query ${query.id} has not been used yet; nothing to update`)
+      }
+      return
+    }
+    registry.refresh(family(input))
+  }
+})
+
+export const atomQueryCacheUpdater = makeAtomQueryCacheUpdater(true)
+export const optionalAtomQueryCacheUpdater = makeAtomQueryCacheUpdater(false)
+
+export const combineQueryCacheUpdaters = (first: QueryCacheUpdater, second: QueryCacheUpdater): QueryCacheUpdater => ({
+  update: (registry, query, input, updater) => {
+    first.update(registry, query, input, updater)
+    second.update(registry, query, input, updater)
+  }
+})
+
+let activeQueryCacheUpdater = atomQueryCacheUpdater
+
+export const setQueryCacheUpdater = (updater: QueryCacheUpdater) => {
+  activeQueryCacheUpdater = updater
+}
+
 // Atom-engine query options (formerly reconstructed from @tanstack/vue-query types).
 // The generic arity is kept so the exported interface signatures are unchanged for consumers.
 export interface CustomUseQueryOptions<
@@ -252,18 +313,16 @@ export const useAtomQuery = <A, E>(
 export const useAtomSuspense = <A, E>(
   atom: () => Atom.Atom<AsyncResult.AsyncResult<A, E>>
 ): Promise<SuspenseQueryView<A, E>> => {
-  const view = useAtomQuery(atom)
-  const data = computed<A>(() => {
-    const latest = view.data.value
-    if (latest === undefined) {
-      throw new Error("Internal Error: atom suspense resolved without a latest value")
-    }
-    return latest
-  })
-
-  const isMounted = ref(true)
-  onBeforeUnmount(() => {
-    isMounted.value = false
+  const [{ view, data }, isMounted, signal] = useScopedSuspenseSetup(() => {
+    const view = useAtomQuery(atom)
+    const data = computed<A>(() => {
+      const latest = view.data.value
+      if (latest === undefined) {
+        throw new Error("Internal Error: atom suspense resolved without a latest value")
+      }
+      return latest
+    })
+    return { view, data }
   })
 
   const eff = Effect.gen(function*() {
@@ -297,7 +356,7 @@ export const useAtomSuspense = <A, E>(
     )
   })
 
-  return Effect.runPromise(eff)
+  return Effect.runPromise(eff, { signal })
 }
 
 export type StreamQueryPullValue<A> = {
@@ -795,22 +854,12 @@ export function composeQueries<
 export const useUpdateQuery = () => {
   const registry = injectRegistry()
 
-  // NOTE: query atoms are derived (read-only) here, so unlike tanstack's `setQueryData` we can't
-  // optimistically patch the cache in place — this refetches the query (the `updater` is ignored).
-  // A first-class optimistic-update layer is planned for the atom-native redesign.
   const f: {
-    <I, A>(
-      query: RequestHandlerWithInput<I, A, any, any, any, any>,
+    <I, A, E, R, Request extends Req, Name extends string>(
+      query: RequestHandlerWithInput<I, A, E, R, Request, Name>,
       input: I,
       updater: (data: NoInfer<A>) => NoInfer<A>
     ): void
-  } = (query: any, input: any, _updater: any) => {
-    const family = queryFamilyByKey.get(queryFamilyCacheKey(query))
-    if (!family) {
-      console.warn(`Query ${query.id} has not been used yet; nothing to update`)
-      return
-    }
-    registry.refresh(family(input))
-  }
+  } = (query, input, updater) => activeQueryCacheUpdater.update(registry, query, input, updater)
   return f
 }

package/test/dist/patchableQueryAtom.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"patchableQueryAtom.test.d.ts","sourceRoot":"","sources":["../patchableQueryAtom.test.ts"],"names":[],"mappings":""}

package/test/dist/queryOptions.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"queryOptions.test.d.ts","sourceRoot":"","sources":["../queryOptions.test.ts"],"names":[],"mappings":""}

package/test/dist/retrySchedule.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"retrySchedule.test.d.ts","sourceRoot":"","sources":["../retrySchedule.test.ts"],"names":[],"mappings":""}

package/test/suspense.test.ts

@@ -1,8 +1,14 @@
+import { defaultRegistry, registryKey } from "@effect/atom-vue"
 import { Effect, Option } from "effect-app"
 import * as AsyncResult from "effect/unstable/reactivity/AsyncResult"
-import { computed, ref } from "vue"
+import * as Atom from "effect/unstable/reactivity/Atom"
+import { computed, createApp, nextTick, ref } from "vue"
+import { withQueryOptions } from "../src/atomQuery.js"
+import { useAtomQuery, useAtomSuspense } from "../src/query.js"
 import { awaitResolvedSuspenseResult } from "../src/suspense.js"
 
+const listenerCount = (atom: Atom.Atom<unknown>) => defaultRegistry.getNodes().get(atom)?.listeners.size ?? 0
+
 it("waits for the query result ref after suspense resolves", async () => {
   const result = ref<AsyncResult.AsyncResult<number, never>>(AsyncResult.initial(true))
   const promise = Effect.runPromise(awaitResolvedSuspenseResult(computed(() => result.value)))
@@ -18,3 +24,137 @@ it("keeps unresolved query results initial", async () => {
 
   expect(AsyncResult.isInitial(settled)).toBe(true)
 })
+
+it("stops atom suspense subscriptions when the setup scope is disposed", async () => {
+  defaultRegistry.reset()
+  const atom = Atom.make(Effect.succeed(123))
+  let promise: ReturnType<typeof useAtomSuspense<number, never>> | undefined
+  const host = document.createElement("div")
+  const app = createApp({
+    setup() {
+      promise = useAtomSuspense(() => atom)
+      return () => null
+    }
+  })
+  app.provide(registryKey, defaultRegistry)
+  app.mount(host)
+
+  if (promise === undefined) {
+    throw new Error("suspense setup did not initialize")
+  }
+
+  await promise
+  expect(listenerCount(atom)).toBe(1)
+
+  app.unmount()
+  await nextTick()
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  expect(listenerCount(atom)).toBe(0)
+  defaultRegistry.reset()
+})
+
+it("does not keep query option wrapper subscriptions after unmount", async () => {
+  defaultRegistry.reset()
+  const atom = Atom.make(Effect.succeed(123))
+  const observed = withQueryOptions(atom)
+  let promise: ReturnType<typeof useAtomSuspense<number, never>> | undefined
+  const host = document.createElement("div")
+  const app = createApp({
+    setup() {
+      promise = useAtomSuspense(() => observed)
+      return () => null
+    }
+  })
+  app.provide(registryKey, defaultRegistry)
+  app.mount(host)
+
+  if (promise === undefined) {
+    throw new Error("suspense setup did not initialize")
+  }
+
+  await promise
+  expect(listenerCount(atom)).toBe(1)
+
+  app.unmount()
+  await nextTick()
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  expect(listenerCount(atom)).toBe(0)
+  defaultRegistry.reset()
+})
+
+it("aborts atom suspense promises when the component unmounts", async () => {
+  defaultRegistry.reset()
+  const atom = Atom.make(Effect.never)
+  let promise: ReturnType<typeof useAtomSuspense<number, never>> | undefined
+  const host = document.createElement("div")
+  const app = createApp({
+    setup() {
+      promise = useAtomSuspense(() => atom)
+      return () => null
+    }
+  })
+  app.provide(registryKey, defaultRegistry)
+  app.mount(host)
+
+  if (promise === undefined) {
+    throw new Error("suspense setup did not initialize")
+  }
+
+  app.unmount()
+  await nextTick()
+  const settled = await Promise.race([
+    promise.then(() => "resolved" as const, () => "rejected" as const),
+    new Promise<"pending">((resolve) => setTimeout(() => resolve("pending"), 20))
+  ])
+  expect(settled).toBe("rejected")
+  defaultRegistry.reset()
+})
+
+it("stops atom query subscriptions when the component unmounts", async () => {
+  defaultRegistry.reset()
+  const atom = Atom.make(Effect.succeed(123))
+  const host = document.createElement("div")
+  const app = createApp({
+    setup() {
+      useAtomQuery(() => atom)
+      return () => null
+    }
+  })
+  app.provide(registryKey, defaultRegistry)
+  app.mount(host)
+
+  await nextTick()
+  expect(listenerCount(atom)).toBe(1)
+
+  app.unmount()
+  await nextTick()
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  expect(listenerCount(atom)).toBe(0)
+  defaultRegistry.reset()
+})
+
+it("does not keep non-suspense query option wrapper subscriptions after unmount", async () => {
+  defaultRegistry.reset()
+  const atom = Atom.make(Effect.succeed(123))
+  const observed = withQueryOptions(atom)
+  const host = document.createElement("div")
+  const app = createApp({
+    setup() {
+      useAtomQuery(() => observed)
+      return () => null
+    }
+  })
+  app.provide(registryKey, defaultRegistry)
+  app.mount(host)
+
+  await nextTick()
+  expect(listenerCount(observed)).toBe(1)
+  expect(listenerCount(atom)).toBe(1)
+
+  app.unmount()
+  await nextTick()
+  await new Promise((resolve) => setTimeout(resolve, 0))
+  expect(listenerCount(observed)).toBe(0)
+  expect(listenerCount(atom)).toBe(0)
+  defaultRegistry.reset()
+})