packages/example/src/routes/query.tsx

@@ -16,12 +16,13 @@ const Result = Schema.Tuple(Schema.String)
 function RouteComponent() {
     const runSync = R.useRunSync()
 
-    const { state, triggerRefresh } = R.useQuery({
+    const { state, refresh } = R.useQuery({
         effect: () => HttpClient.get("https://www.uuidtools.com/api/generate/v4").pipe(
             HttpClient.withTracerPropagation(false),
             Effect.flatMap(res => res.json),
             Effect.flatMap(Schema.decodeUnknown(Result)),
             Effect.delay("500 millis"),
+            Effect.scoped,
         ),
         deps: [],
     })
@@ -43,7 +44,7 @@ function RouteComponent() {
                     })}
                 </Text>
 
-                <Button onClick={() => runSync(triggerRefresh)}>Refresh</Button>
+                <Button onClick={() => runSync(refresh)}>Refresh</Button>
             </Flex>
         </Container>
     )

packages/extension-query/src/Query.ts

@@ -1,35 +0,0 @@
-import { Effect, Fiber, Option, SubscriptionRef, type Ref } from "effect"
-import * as AsyncData from "@typed/async-data"
-
-
-export interface QueryRunner<A, E, R> {
-    readonly stateRef: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<A, E>>
-    readonly fiberRef: SubscriptionRef.SubscriptionRef<Option.Option<Fiber.Fiber<void>>>
-
-    readonly interrupt: Effect.Effect<void>
-    fetch(effect: Effect.Effect<A, E, R>): Effect.Effect<void>
-    // refetch(effect: Effect.Effect<A, E, R>): Effect.Effect<void>
-}
-
-export const make = Effect.fnUntraced(function*<A, E, R>(): Effect.Effect<QueryRunner<A, E, R>> {
-    const stateRef = yield* SubscriptionRef.make(AsyncData.noData<A, E>())
-    const fiberRef = yield* SubscriptionRef.make(Option.none<Fiber.Fiber<void>>())
-
-    const interrupt = fiberRef.pipe(
-        Effect.flatMap(Option.match({
-            onSome: Fiber.interrupt,
-            onNone: () => Effect.void,
-        }))
-    )
-
-    const fetch = Effect.fnUntraced(function*(effect: Effect.Effect<A, E, R>) {
-
-    })
-
-    return {
-        stateRef,
-        fiberRef,
-        interrupt,
-        fetch,
-    }
-})

packages/extension-query/src/QueryRunner.ts

@@ -0,0 +1,75 @@
+import * as AsyncData from "@typed/async-data"
+import { Effect, Fiber, flow, identity, Option, Ref, SubscriptionRef } from "effect"
+
+
+export interface QueryRunner<A, E, R> {
+    readonly queryRef: SubscriptionRef.SubscriptionRef<Effect.Effect<A, E, R>>
+    readonly stateRef: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<A, E>>
+    readonly fiberRef: SubscriptionRef.SubscriptionRef<Option.Option<Fiber.Fiber<void>>>
+
+    readonly interrupt: Effect.Effect<void>
+    readonly forkFetch: Effect.Effect<void>
+    readonly forkRefetch: Effect.Effect<void>
+}
+
+
+export const make = <A, E, R>(
+    query: Effect.Effect<A, E, R>
+): Effect.Effect<QueryRunner<A, E, R>, never, R> => Effect.gen(function*() {
+    const context = yield* Effect.context<R>()
+
+    const queryRef = yield* SubscriptionRef.make(query)
+    const stateRef = yield* SubscriptionRef.make(AsyncData.noData<A, E>())
+    const fiberRef = yield* SubscriptionRef.make(Option.none<Fiber.Fiber<void>>())
+
+    const interrupt = fiberRef.pipe(
+        Effect.flatMap(Option.match({
+            onSome: flow(
+                Fiber.interrupt,
+                Effect.andThen(Ref.set(fiberRef, Option.none())),
+            ),
+            onNone: () => Effect.void,
+        }))
+    )
+
+    const forkFetch = interrupt.pipe(
+        Effect.andThen(Ref.set(stateRef, AsyncData.loading())),
+        Effect.andThen(queryRef.pipe(Effect.flatMap(identity))),
+        Effect.matchCauseEffect({
+            onSuccess: v => Ref.set(stateRef, AsyncData.success(v)),
+            onFailure: c => Ref.set(stateRef, AsyncData.failure(c)),
+        }),
+        Effect.provide(context),
+        Effect.forkDaemon,
+
+        Effect.flatMap(fiber => Ref.set(fiberRef, Option.some(fiber))),
+    )
+
+    const forkRefetch = interrupt.pipe(
+        Effect.andThen(Ref.update(stateRef, previous => {
+            if (AsyncData.isSuccess(previous) || AsyncData.isFailure(previous))
+                return AsyncData.refreshing(previous)
+            if (AsyncData.isRefreshing(previous))
+                return AsyncData.refreshing(previous.previous)
+            return AsyncData.loading()
+        })),
+        Effect.andThen(queryRef.pipe(Effect.flatMap(identity))),
+        Effect.matchCauseEffect({
+            onSuccess: v => Ref.set(stateRef, AsyncData.success(v)),
+            onFailure: c => Ref.set(stateRef, AsyncData.failure(c)),
+        }),
+        Effect.provide(context),
+        Effect.forkDaemon,
+
+        Effect.flatMap(fiber => Ref.set(fiberRef, Option.some(fiber))),
+    )
+
+    return {
+        queryRef,
+        stateRef,
+        fiberRef,
+        interrupt,
+        forkFetch,
+        forkRefetch,
+    }
+})

packages/extension-query/src/index.ts

@@ -1,71 +1,39 @@
 import * as AsyncData from "@typed/async-data"
-import { Effect, Fiber, Option, Ref, Scope, SubscriptionRef } from "effect"
+import { Effect, Ref, SubscriptionRef } from "effect"
 import * as React from "react"
 import { ReffuseExtension, type ReffuseHelpers } from "reffuse"
+import * as QueryRunner from "./QueryRunner.js"
 
 
 export interface UseQueryProps<A, E, R> {
-    effect: () => Effect.Effect<A, E, R | Scope.Scope>
+    effect: () => Effect.Effect<A, E, R>
     readonly deps: React.DependencyList
 }
 
 export interface UseQueryResult<A, E> {
     readonly state: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<A, E>>
-    readonly triggerRefresh: Effect.Effect<void>
+    readonly refresh: Effect.Effect<void>
 }
 
 
-const interruptRunningQuery = (fiberRef: Ref.Ref<Option.Option<Fiber.Fiber<void>>>) => fiberRef.pipe(
-    Effect.flatMap(Option.match({
-        onSome: Fiber.interrupt,
-        onNone: () => Effect.void,
-    }))
-)
-
-const runQuery = <A, E, R>(
-    effect: Effect.Effect<A, E, R | Scope.Scope>,
-    stateRef: Ref.Ref<AsyncData.AsyncData<A, E>>,
-) => effect.pipe(
-    Effect.matchCauseEffect({
-        onSuccess: v => Ref.set(stateRef, AsyncData.success(v)),
-        onFailure: c => Ref.set(stateRef, AsyncData.failure(c)),
-    })
-)
-
-
 export const QueryExtension = ReffuseExtension.make(() => ({
     useQuery<A, E, R>(
         this: ReffuseHelpers.ReffuseHelpers<R>,
         props: UseQueryProps<A, E, R>,
     ): UseQueryResult<A, E> {
-        const context = this.useContext()
+        const runner = this.useMemo(() => QueryRunner.make(props.effect()), [])
 
-        const fiberRef = this.useRef(Option.none<Fiber.Fiber<void>>())
+        this.useFork(() => Effect.addFinalizer(() => runner.interrupt).pipe(
-        const stateRef = this.useRef(AsyncData.noData<A, E>())
+            Effect.andThen(Ref.set(runner.queryRef, props.effect())),
+            Effect.andThen(runner.forkFetch),
+        ), [runner, ...props.deps])
 
-        const triggerRefresh = React.useMemo(() => interruptRunningQuery(fiberRef).pipe(
+        return React.useMemo(() => ({
-            Effect.andThen(Ref.update(stateRef, prev =>
+            state: runner.stateRef,
-                AsyncData.isSuccess(prev) || AsyncData.isFailure(prev)
+            refresh: runner.forkRefetch,
-                    ? AsyncData.refreshing(prev)
+        }), [runner])
-                    : AsyncData.loading()
-            )),
-            Effect.andThen(runQuery(props.effect(), stateRef)),
-            Effect.provide(context),
-            Effect.scoped,
-            Effect.forkDaemon,
-
-            Effect.flatMap(fiber => Ref.set(fiberRef, Option.some(fiber))),
-        ), [stateRef, context, fiberRef])
-
-        this.useEffect(() => interruptRunningQuery(fiberRef).pipe(
-            Effect.andThen(Ref.set(stateRef, AsyncData.loading())),
-            Effect.andThen(runQuery(props.effect(), stateRef)),
-            Effect.scoped,
-            Effect.forkDaemon,
-
-            Effect.flatMap(fiber => Ref.set(fiberRef, Option.some(fiber))),
-        ), [...props.deps, stateRef, fiberRef])
-
-        return React.useMemo(() => ({ state: stateRef, triggerRefresh }), [stateRef, triggerRefresh])
     }
 }))
+
+
+export * as QueryRunner from "./QueryRunner.js"