diff --git a/packages/example/src/routes/query.tsx b/packages/example/src/routes/query.tsx
index cfca90c..c8f1374 100644
--- a/packages/example/src/routes/query.tsx
+++ b/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 (
- {AsyncData.match(state, {
+ {AsyncData.match(queryState, {
NoData: () => "No data yet",
Loading: () => "Loading...",
Success: (value, { isRefreshing, isOptimistic }) =>
@@ -40,7 +43,7 @@ function RouteComponent() {
})}
-
+
)
diff --git a/packages/extension-query/src/index.ts b/packages/extension-query/src/index.ts
index c5e7731..c5694cd 100644
--- a/packages/extension-query/src/index.ts
+++ b/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 {
readonly deps: React.DependencyList
}
-export interface UseQueryResult {
- readonly state: AsyncData.AsyncData
- readonly refresh: Effect.Effect
+export interface UseQueryResult {
+ readonly state: SubscriptionRef.SubscriptionRef>
+ readonly triggerRefresh: Effect.Effect
}
@@ -19,7 +19,9 @@ export const QueryExtension = ReffuseExtension.make(() => ({
useQuery(
this: ReffuseHelpers.ReffuseHelpers,
props: UseQueryProps,
- ): UseQueryResult {
+ ): UseQueryResult {
+ const context = this.useContext()
+
const fiberRef = this.useRef(Option.none>())
const stateRef = this.useRef(AsyncData.noData())
@@ -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 { state, refresh }
+ return React.useMemo(() => ({ state: stateRef, triggerRefresh }), [stateRef, triggerRefresh])
}
}))