packages/example/src/routes/query.tsx

@@ -1,9 +1,10 @@
 import { R } from "@/reffuse"
 import { HttpClient } from "@effect/platform"
-import { Button, Container, Flex, Text } from "@radix-ui/themes"
+import { Button, Container, Flex, Slider, Text } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
 import * as AsyncData from "@typed/async-data"
-import { Console, Effect, Schema } from "effect"
+import { Array, Console, Effect, flow, Option, Schema } from "effect"
+import { useState } from "react"
 
 
 export const Route = createFileRoute("/query")({
@@ -11,21 +12,23 @@ export const Route = createFileRoute("/query")({
 })
 
 
-const Result = Schema.Tuple(Schema.String)
+const Result = Schema.Array(Schema.String)
 
 function RouteComponent() {
     const runSync = R.useRunSync()
 
+    const [count, setCount] = useState(1)
+
     const query = R.useQuery({
-        query: () => Console.log("Querying...").pipe(
-            Effect.andThen(Effect.sleep("500 millis")),
-            Effect.andThen(HttpClient.get("https://www.uuidtools.com/api/generate/v4")),
+        query: () => Console.log(`Querying ${ count } IDs...`).pipe(
+            // 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,
         ),
-        key: [],
+        key: ["uuid4", count],
     })
 
     const [state] = R.useRefState(query.state)
@@ -34,6 +37,17 @@ function RouteComponent() {
     return (
         <Container>
             <Flex direction="column" align="center" gap="2">
+                <Slider
+                    min={1}
+                    max={100}
+                    value={[count]}
+                    onValueChange={flow(
+                        Array.head,
+                        Option.getOrThrow,
+                        setCount,
+                    )}
+                />
+
                 <Text>
                     {AsyncData.match(state, {
                         NoData: () => "No data yet",