packages/example/src/routes/query.tsx

@@ -16,7 +16,7 @@ const Result = Schema.Tuple(Schema.String)
 function RouteComponent() {
     const runSync = R.useRunSync()
 
-    const { state, refresh } = R.useQuery({
+    const { state, triggerRefresh } = R.useQuery({
         effect: () => HttpClient.get("https://www.uuidtools.com/api/generate/v4").pipe(
             HttpClient.withTracerPropagation(false),
             Effect.flatMap(res => res.json),
@@ -26,11 +26,14 @@ function RouteComponent() {
         deps: [],
     })
 
+    const [queryState] = R.useRefState(state)
+
+
     return (
         <Container>
             <Flex direction="column" align="center" gap="2">
                 <Text>
-                    {AsyncData.match(state, {
+                    {AsyncData.match(queryState, {
                         NoData: () => "No data yet",
                         Loading: () => "Loading...",
                         Success: (value, { isRefreshing, isOptimistic }) =>
@@ -40,7 +43,7 @@ function RouteComponent() {
                     })}
                 </Text>
 
-                <Button onClick={() => runSync(refresh)}>Refresh</Button>
+                <Button onClick={() => runSync(triggerRefresh)}>Refresh</Button>
             </Flex>
         </Container>
     )

packages/extension-query/src/index.ts

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