packages/example/src/routes/query.tsx

@@ -21,13 +21,23 @@ function RouteComponent() {
 
     const query = R.useQuery({
         query: () => Console.log(`Querying ${ count } IDs...`).pipe(
-            // Effect.andThen(Effect.sleep("500 millis")),
+            Effect.andThen(Effect.sleep("500 millis")),
             Effect.andThen(HttpClient.get(`https://www.uuidtools.com/api/generate/v4/count/${ count }`)),
             HttpClient.withTracerPropagation(false),
             Effect.flatMap(res => res.json),
             Effect.flatMap(Schema.decodeUnknown(Result)),
             Effect.scoped,
         ),
+        // query: () => Console.log(`Creating ${ count } IDs...`).pipe(
+        //     Effect.andThen(Effect.sleep("500 millis")),
+        //     Effect.andThen(pipe(
+        //         Array.range(1, count),
+        //         Array.map(() => makeUuid4),
+        //         Effect.all,
+        //     )),
+        //     Effect.flatMap(Schema.decode(Result)),
+        //     Effect.provide(GetRandomValues.CryptoRandom),
+        // ),
         key: ["uuid4", count],
     })
 

packages/extension-query/src/QueryExtension.ts

@@ -21,14 +21,20 @@ export const QueryExtension = ReffuseExtension.make(() => ({
         this: ReffuseHelpers.ReffuseHelpers<R>,
         props: UseQueryProps<A, E, R>,
     ): UseQueryResult<A, E> {
+        const runSync = this.useRunSync()
+
         const runner = this.useMemo(() => QueryRunner.make({
             query: props.query()
         }), [])
 
-        this.useEffect(() => Effect.addFinalizer(() => runner.forkInterrupt).pipe(
-            Effect.andThen(Ref.set(runner.queryRef, props.query())),
-            Effect.andThen(runner.forkFetch),
-        ), [runner, ...props.key])
+        React.useEffect(() => {
+            Ref.set(runner.queryRef, props.query()).pipe(
+                Effect.andThen(runner.forkFetch),
+                runSync,
+            )
+
+            return () => { runSync(runner.forkInterrupt) }
+        }, [runner, ...props.key])
 
         this.useFork(() => runner.refreshOnWindowFocus, [runner])
 

packages/extension-query/src/QueryRunner.ts

@@ -31,17 +31,28 @@ export const make = <A, E, R>(
 
     const interrupt = fiberRef.pipe(
         Effect.flatMap(Option.match({
-            onSome: Fiber.interrupt,
+            onSome: fiber => Ref.set(fiberRef, Option.none()).pipe(
+                Effect.andThen(Fiber.interrupt(fiber))
+            ),
             onNone: () => Effect.void,
         }))
     )
 
-    const forkInterrupt = Effect.forkDaemon(interrupt)
+    const forkInterrupt = fiberRef.pipe(
+        Effect.flatMap(Option.match({
+            onSome: fiber => Ref.set(fiberRef, Option.none()).pipe(
+                Effect.andThen(Fiber.interrupt(fiber).pipe(
+                    Effect.asVoid,
+                    Effect.forkDaemon,
+                ))
+            ),
+            onNone: () => Effect.forkDaemon(Effect.void),
+        }))
+    )
 
     const forkFetch = interrupt.pipe(
         Effect.andThen(
-            Effect.addFinalizer(() => Ref.set(fiberRef, Option.none())).pipe(
-                Effect.andThen(Ref.set(stateRef, AsyncData.loading())),
+            Ref.set(stateRef, AsyncData.loading()).pipe(
                 Effect.andThen(queryRef.pipe(Effect.flatMap(identity))),
                 Effect.matchCauseEffect({
                     onSuccess: v => Ref.set(stateRef, AsyncData.success(v)),
@@ -49,14 +60,14 @@ export const make = <A, E, R>(
                 }),
 
                 Effect.provide(context),
-                Effect.scoped,
                 Effect.fork,
             )
         ),
 
         Effect.flatMap(fiber =>
             Ref.set(fiberRef, Option.some(fiber)).pipe(
-                Effect.andThen(Fiber.join(fiber))
+                Effect.andThen(Fiber.join(fiber)),
+                Effect.andThen(Ref.set(fiberRef, Option.none())),
             )
         ),
 
@@ -65,14 +76,13 @@ export const make = <A, E, R>(
 
     const forkRefresh = interrupt.pipe(
         Effect.andThen(
-            Effect.addFinalizer(() => Ref.set(fiberRef, Option.none())).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()
-                })),
+            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()
+            }).pipe(
                 Effect.andThen(queryRef.pipe(Effect.flatMap(identity))),
                 Effect.matchCauseEffect({
                     onSuccess: v => Ref.set(stateRef, AsyncData.success(v)),
@@ -80,14 +90,14 @@ export const make = <A, E, R>(
                 }),
 
                 Effect.provide(context),
-                Effect.scoped,
                 Effect.fork,
             )
         ),
 
         Effect.flatMap(fiber =>
             Ref.set(fiberRef, Option.some(fiber)).pipe(
-                Effect.andThen(Fiber.join(fiber))
+                Effect.andThen(Fiber.join(fiber)),
+                Effect.andThen(Ref.set(fiberRef, Option.none())),
             )
         ),