packages/example/src/QueryErrorHandler.tsx

@@ -1,6 +1,6 @@
 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 { Cause, Console, Context, Effect, Either, flow, Match, Option, Stream } from "effect"
 import { useState } from "react"
 import { AppQueryErrorHandler } from "./query"
 import { R } from "./reffuse"
@@ -12,8 +12,8 @@ export function VQueryErrorHandler() {
     >>())
 
     R.useFork(() => AppQueryErrorHandler.pipe(Effect.flatMap(handler =>
-        Stream.runForEach(handler.errors, v => Effect.sync(() =>
-            setFailure(Option.some(v))
+        Stream.runForEach(handler.errors, v => Console.error(v).pipe(
+            Effect.andThen(Effect.sync(() => { setFailure(Option.some(v)) }))
         ))
     )), [])
 
@@ -23,15 +23,22 @@ export function VQueryErrorHandler() {
                 <AlertDialog.Content maxWidth="450px">
                     <AlertDialog.Title>Error</AlertDialog.Title>
                     <AlertDialog.Description size="2">
-                        {Cause.failures(v).pipe(
-                            Chunk.head,
-                            Option.getOrThrow,
-
+                        {Either.match(Cause.failureOrCause(v), {
+                            onLeft: flow(
                                 Match.value,
                                 Match.tag("RequestError", () => <Text>HTTP request error</Text>),
                                 Match.tag("ResponseError", () => <Text>HTTP response error</Text>),
                                 Match.exhaustive,
-                        )}
+                            ),
+
+                            onRight: flow(
+                                Cause.dieOption,
+                                Option.match({
+                                    onSome: () => <Text>Unrecoverable defect</Text>,
+                                    onNone: () => <Text>Unknown error</Text>,
+                                }),
+                            ),
+                        })}
                     </AlertDialog.Description>
 
                     <Flex gap="3" mt="4" justify="end">

packages/example/src/routes/query/usemutation.tsx

@@ -16,14 +16,19 @@ export const Route = createFileRoute("/query/usemutation")({
 const Result = Schema.Array(Schema.String)
 
 function RouteComponent() {
-    const runSync = R.useRunSync()
+    const runFork = R.useRunFork()
 
     const [count, setCount] = useState(1)
 
     const mutation = R.useMutation({
         mutation: ([count]: readonly [count: number]) => Console.log(`Querying ${ count } IDs...`).pipe(
+            Effect.andThen(QueryProgress.QueryProgress.update(() =>
+                AsyncData.Progress.make({ loaded: 0, total: Option.some(100) })
+            )),
             Effect.andThen(Effect.sleep("500 millis")),
-            Effect.tap(() => QueryProgress.QueryProgress.get),
+            Effect.tap(() => QueryProgress.QueryProgress.update(() =>
+                AsyncData.Progress.make({ loaded: 50, total: Option.some(100) })
+            )),
             Effect.andThen(HttpClient.get(`https://www.uuidtools.com/api/generate/v4/count/${ count }`)),
             HttpClient.withTracerPropagation(false),
             Effect.flatMap(res => res.json),
@@ -63,8 +68,7 @@ function RouteComponent() {
                 <Button onClick={() => mutation.forkMutate(count).pipe(
                     Effect.flatMap(([, state]) => Stream.runForEach(state, Console.log)),
                     Effect.andThen(Console.log("Mutation done.")),
-                    Effect.forkDaemon,
-                    runSync,
+                    runFork,
                 )}>
                     Get
                 </Button>