Fix

packages/example/src/QueryErrorHandler.tsx

@@ -0,0 +1,50 @@
+import { AlertDialog, Button, Flex, Text } from "@radix-ui/themes"
+import { ErrorHandler } from "@reffuse/extension-query"
+import { Cause, Chunk, Context, Effect, Match, Option, Stream } from "effect"
+import { useState } from "react"
+import { AppQueryErrorHandler } from "./query"
+import { R } from "./reffuse"
+
+
+export function VQueryErrorHandler() {
+    const [failure, setFailure] = useState(Option.none<Cause.Cause<
+        ErrorHandler.Error<Context.Tag.Service<AppQueryErrorHandler>>
+    >>())
+
+    R.useFork(() => AppQueryErrorHandler.pipe(Effect.flatMap(handler =>
+        Stream.runForEach(handler.errors, v => Effect.sync(() =>
+            setFailure(Option.some(v))
+        ))
+    )), [])
+
+    return Option.match(failure, {
+        onSome: v => (
+            <AlertDialog.Root open>
+                <AlertDialog.Content maxWidth="450px">
+                    <AlertDialog.Title>Error</AlertDialog.Title>
+                    <AlertDialog.Description size="2">
+                        {Cause.failures(v).pipe(
+                            Chunk.head,
+                            Option.getOrThrow,
+
+                            Match.value,
+                            Match.tag("RequestError", () => <Text>HTTP request error</Text>),
+                            Match.tag("ResponseError", () => <Text>HTTP response error</Text>),
+                            Match.exhaustive,
+                        )}
+                    </AlertDialog.Description>
+
+                    <Flex gap="3" mt="4" justify="end">
+                        <AlertDialog.Action>
+                            <Button variant="solid" color="red" onClick={() => setFailure(Option.none())}>
+                                Ok
+                            </Button>
+                        </AlertDialog.Action>
+                    </Flex>
+                </AlertDialog.Content>
+            </AlertDialog.Root>
+        ),
+
+        onNone: () => <></>,
+    })
+}

packages/example/src/main.tsx

@@ -5,6 +5,7 @@ import { Layer } from "effect"
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import { ReffuseRuntime } from "reffuse"
+import { AppQueryClient, AppQueryErrorHandler } from "./query"
 import { GlobalContext } from "./reffuse"
 import { routeTree } from "./routeTree.gen"
 
@@ -14,6 +15,8 @@ const layer = Layer.empty.pipe(
     Layer.provideMerge(Geolocation.layer),
     Layer.provideMerge(Permissions.layer),
     Layer.provideMerge(FetchHttpClient.layer),
+    Layer.provideMerge(AppQueryClient.Live),
+    Layer.provideMerge(AppQueryErrorHandler.Live),
 )
 
 const router = createRouter({ routeTree })

packages/example/src/query.ts

@@ -0,0 +1,9 @@
+import { HttpClientError } from "@effect/platform"
+import { ErrorHandler, QueryClient } from "@reffuse/extension-query"
+
+
+export class AppQueryErrorHandler extends ErrorHandler.Service("AppQueryErrorHandler")<AppQueryErrorHandler,
+    HttpClientError.HttpClientError
+>() {}
+
+export class AppQueryClient extends QueryClient.Service({ ErrorHandler: AppQueryErrorHandler })<AppQueryClient>() {}

packages/example/src/query/services/Uuid4Query.ts

@@ -1,4 +1,3 @@
-import { HttpClientError } from "@effect/platform"
 import { QueryService } from "@reffuse/extension-query"
 import { ParseResult, Schema } from "effect"
 
@@ -8,5 +7,5 @@ export const Result = Schema.Array(Schema.String)
 export class Uuid4Query extends QueryService.Tag("Uuid4Query")<Uuid4Query,
     readonly ["uuid4", number],
     typeof Result.Type,
-    HttpClientError.HttpClientError | ParseResult.ParseError
+    ParseResult.ParseError
 >() {}

packages/example/src/reffuse.ts

@@ -3,6 +3,7 @@ import { Clipboard, Geolocation, Permissions } from "@effect/platform-browser"
 import { LazyRefExtension } from "@reffuse/extension-lazyref"
 import { QueryExtension } from "@reffuse/extension-query"
 import { Reffuse, ReffuseContext } from "reffuse"
+import { AppQueryClient, AppQueryErrorHandler } from "./query"
 
 
 export const GlobalContext = ReffuseContext.make<
@@ -10,6 +11,8 @@ export const GlobalContext = ReffuseContext.make<
     | Geolocation.Geolocation
     | Permissions.Permissions
     | HttpClient.HttpClient
+    | AppQueryClient
+    | AppQueryErrorHandler
 >()
 
 export class GlobalReffuse extends Reffuse.Reffuse.pipe(

packages/example/src/routes/__root.tsx

@@ -1,3 +1,4 @@
+import { VQueryErrorHandler } from "@/QueryErrorHandler"
 import { Container, Flex, Theme } from "@radix-ui/themes"
 import { createRootRoute, Link, Outlet } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/router-devtools"
@@ -26,6 +27,8 @@ function Root() {
             </Container>
 
             <Outlet />
+
+            <VQueryErrorHandler />
             <TanStackRouterDevtools />
         </Theme>
     )

packages/extension-query/src/ErrorHandler.ts

@@ -0,0 +1,37 @@
+import { type Cause, Context, Effect, Layer, Queue, Stream } from "effect"
+import type { Mutable } from "effect/Types"
+
+
+export interface ErrorHandler<E> {
+    readonly errors: Stream.Stream<Cause.Cause<E>>
+    readonly handle: <A, SelfE, R>(self: Effect.Effect<A, SelfE, R>) => Effect.Effect<A, Exclude<SelfE, E>, R>
+}
+
+export type Error<T> = T extends ErrorHandler<infer E> ? E : never
+
+
+export interface ServiceResult<Self, Id extends string, E> extends Context.TagClass<Self, Id, ErrorHandler<E>> {
+    readonly Live: Layer.Layer<Self>
+}
+
+export const Service = <const Id extends string>(id: Id) => (
+    <Self, E = never>(): ServiceResult<Self, Id, E> => {
+        const TagClass = Context.Tag(id)() as ServiceResult<Self, Id, E>
+        (TagClass as Mutable<typeof TagClass>).Live = Layer.effect(TagClass, Effect.gen(function*() {
+            const queue = yield* Queue.unbounded<Cause.Cause<E>>()
+            const errors = Stream.fromQueue(queue)
+
+            const handle = <A, SelfE, R>(
+                self: Effect.Effect<A, SelfE, R>
+            ) => Effect.tapErrorCause(self, cause =>
+                Queue.offer(queue, cause as Cause.Cause<E>)
+            ) as Effect.Effect<A, Exclude<SelfE, E>, R>
+
+            return { errors, handle }
+        }))
+        return TagClass
+    }
+)
+
+
+export class DefaultErrorHandler extends Service("@reffuse/extension-query/DefaultErrorHandler")<DefaultErrorHandler>() {}

packages/extension-query/src/QueryClient.ts

@@ -0,0 +1,39 @@
+import { Context, Layer } from "effect"
+import type { Mutable } from "effect/Types"
+import * as ErrorHandler from "./ErrorHandler.js"
+
+
+export interface QueryClient<EH, HandledE> {
+    readonly ErrorHandler: Context.Tag<EH, ErrorHandler.ErrorHandler<HandledE>>
+}
+
+
+const id = "@reffuse/extension-query/QueryClient"
+
+export type TagClassShape<EH, HandledE> = Context.TagClassShape<typeof id, QueryClient<EH, HandledE>>
+export type GenericTagClass<EH, HandledE> = Context.TagClass<TagClassShape<EH, HandledE>, typeof id, QueryClient<EH, HandledE>>
+export const makeGenericTagClass = <EH = never, HandledE = never>(): GenericTagClass<EH, HandledE> => Context.Tag(id)()
+
+
+export interface ServiceProps<EH, HandledE> {
+    readonly ErrorHandler?: Context.Tag<EH, ErrorHandler.ErrorHandler<HandledE>>
+}
+
+export interface ServiceResult<Self, EH, HandledE> extends Context.TagClass<Self, typeof id, QueryClient<EH, HandledE>> {
+    readonly Live: Layer.Layer<Self>
+}
+
+export const Service = <
+    EH = ErrorHandler.DefaultErrorHandler,
+    HandledE = ErrorHandler.Error<Context.Tag.Service<ErrorHandler.DefaultErrorHandler>>,
+>(
+    props?: ServiceProps<EH, HandledE>
+) => (
+    <Self>(): ServiceResult<Self, EH, HandledE> => {
+        const TagClass = Context.Tag(id)() as ServiceResult<Self, EH, HandledE>
+        (TagClass as Mutable<typeof TagClass>).Live = Layer.succeed(TagClass, {
+            ErrorHandler: (props?.ErrorHandler ?? ErrorHandler.DefaultErrorHandler) as Context.Tag<EH, ErrorHandler.ErrorHandler<HandledE>>
+        })
+        return TagClass
+    }
+)

packages/extension-query/src/QueryExtension.ts

@@ -2,6 +2,7 @@ import type * as AsyncData from "@typed/async-data"
 import { type Cause, type Context, Effect, type Fiber, Layer, type Option, type Stream, type SubscriptionRef } from "effect"
 import * as React from "react"
 import { ReffuseExtension, type ReffuseHelpers } from "reffuse"
+import * as QueryClient from "./QueryClient.js"
 import * as QueryRunner from "./QueryRunner.js"
 import type * as QueryService from "./QueryService.js"
 
@@ -24,11 +25,20 @@ export interface UseQueryResult<K extends readonly unknown[], A, E> {
 
 
 export const QueryExtension = ReffuseExtension.make(() => ({
-    useQuery<K extends readonly unknown[], A, E, R>(
+    useQuery<
-        this: ReffuseHelpers.ReffuseHelpers<R>,
+        EH,
-        props: UseQueryProps<K, A, E, R>,
+        QK extends readonly unknown[],
-    ): UseQueryResult<K, A, E> {
+        QA,
+        QE,
+        HandledE,
+        QR extends R,
+        R,
+    >(
+        this: ReffuseHelpers.ReffuseHelpers<R | QueryClient.TagClassShape<EH, HandledE> | EH>,
+        props: UseQueryProps<QK, QA, QE, QR>,
+    ): UseQueryResult<QK, QA, Exclude<QE, HandledE>> {
         const runner = this.useMemo(() => QueryRunner.make({
+            QueryClient: QueryClient.makeGenericTagClass<EH, HandledE>(),
             key: props.key,
             query: props.query,
         }), [props.key])

packages/extension-query/src/QueryRunner.ts

@@ -1,10 +1,11 @@
 import { BrowserStream } from "@effect/platform-browser"
 import * as AsyncData from "@typed/async-data"
-import { type Cause, Effect, Fiber, identity, Option, Ref, type Scope, Stream, SubscriptionRef } from "effect"
+import { type Cause, type Context, Effect, Fiber, identity, Option, Ref, type Scope, Stream, SubscriptionRef } from "effect"
+import type * as QueryClient from "./QueryClient.js"
 
 
 export interface QueryRunner<K extends readonly unknown[], A, E, R> {
-    readonly query: (key: K) => Effect.Effect<A, E, R>
+    readonly context: Context.Context<R>
 
     readonly latestKeyRef: SubscriptionRef.SubscriptionRef<Option.Option<K>>
     readonly stateRef: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<A, E>>
@@ -19,18 +20,27 @@ export interface QueryRunner<K extends readonly unknown[], A, E, R> {
 }
 
 
-export interface MakeProps<K extends readonly unknown[], A, E, R> {
+export interface MakeProps<EH, K extends readonly unknown[], A, E, HandledE, R> {
+    readonly QueryClient: QueryClient.GenericTagClass<EH, HandledE>
     readonly key: Stream.Stream<K>
     readonly query: (key: K) => Effect.Effect<A, E, R>
 }
 
-export const make = <K extends readonly unknown[], A, E, R>(
+export const make = <EH, K extends readonly unknown[], A, E, HandledE, R>(
-    { key, query }: MakeProps<K, A, E, R>
+    {
-): Effect.Effect<QueryRunner<K, A, E, R>, never, R> => Effect.gen(function*() {
+        QueryClient,
-    const context = yield* Effect.context<R>()
+        key,
+        query,
+    }: MakeProps<EH, K, A, E, HandledE, R>
+): Effect.Effect<
+    QueryRunner<K, A, Exclude<E, HandledE>, R>,
+    never,
+    R | QueryClient.TagClassShape<EH, HandledE> | EH
+> => Effect.gen(function*() {
+    const context = yield* Effect.context<R | QueryClient.TagClassShape<EH, HandledE> | EH>()
 
     const latestKeyRef = yield* SubscriptionRef.make(Option.none<K>())
-    const stateRef = yield* SubscriptionRef.make(AsyncData.noData<A, E>())
+    const stateRef = yield* SubscriptionRef.make(AsyncData.noData<A, Exclude<E, HandledE>>())
     const fiberRef = yield* SubscriptionRef.make(Option.none<Fiber.RuntimeFiber<void, Cause.NoSuchElementException>>())
 
     const interrupt = fiberRef.pipe(
@@ -54,22 +64,27 @@ export const make = <K extends readonly unknown[], A, E, R>(
         }))
     )
 
-    const forkFetch = interrupt.pipe(
+    const run = QueryClient.pipe(
-        Effect.andThen(
+        Effect.flatMap(client => client.ErrorHandler),
-            Ref.set(stateRef, AsyncData.loading()).pipe(
+        Effect.flatMap(errorHandler => latestKeyRef.pipe(
-                Effect.andThen(latestKeyRef),
             Effect.flatMap(identity),
             Effect.flatMap(key => query(key).pipe(
+                errorHandler.handle,
                 Effect.matchCauseEffect({
                     onSuccess: v => Ref.set(stateRef, AsyncData.success(v)),
                     onFailure: c => Ref.set(stateRef, AsyncData.failure(c)),
-                    })
+                }),
+            )),
         )),
 
         Effect.provide(context),
-                Effect.fork,
     )
-        ),
+
+    const forkFetch = interrupt.pipe(
+        Effect.andThen(Ref.set(stateRef, AsyncData.loading()).pipe(
+            Effect.andThen(run),
+            Effect.fork,
+        )),
 
         Effect.flatMap(fiber =>
             Ref.set(fiberRef, Option.some(fiber)).pipe(
@@ -82,27 +97,16 @@ export const make = <K extends readonly unknown[], A, E, R>(
     )
 
     const forkRefresh = interrupt.pipe(
-        Effect.andThen(
+        Effect.andThen(Ref.update(stateRef, previous => {
-            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(latestKeyRef),
+            Effect.andThen(run),
-                Effect.flatMap(identity),
-                Effect.flatMap(key => query(key).pipe(
-                    Effect.matchCauseEffect({
-                        onSuccess: v => Ref.set(stateRef, AsyncData.success(v)),
-                        onFailure: c => Ref.set(stateRef, AsyncData.failure(c)),
-                    })
-                )),
-
-                Effect.provide(context),
             Effect.fork,
-            )
+        )),
-        ),
 
         Effect.flatMap(fiber =>
             Ref.set(fiberRef, Option.some(fiber)).pipe(
@@ -128,7 +132,7 @@ export const make = <K extends readonly unknown[], A, E, R>(
     )
 
     return {
-        query,
+        context,
 
         latestKeyRef,
         stateRef,

packages/extension-query/src/index.ts

@@ -1,3 +1,5 @@
+export * as ErrorHandler from "./ErrorHandler.js"
+export * as QueryClient from "./QueryClient.js"
 export * from "./QueryExtension.js"
 export * as QueryRunner from "./QueryRunner.js"
 export * as QueryService from "./QueryService.js"