Query work

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

@@ -21,7 +21,7 @@ function RouteComponent() {
     // ), [context])
 
     const query = R.useQuery({
-        key: ["uuid4", 10],
+        key: R.useStreamFromValues(["uuid4", 10]),
         query: () => Console.log(`Querying 10 IDs...`).pipe(
             Effect.andThen(Effect.sleep("500 millis")),
             Effect.andThen(HttpClient.get(`https://www.uuidtools.com/api/generate/v4/count/10`)),

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

@@ -20,7 +20,7 @@ function RouteComponent() {
     const [count, setCount] = useState(1)
 
     const query = R.useQuery({
-        key: ["uuid4", count],
+        key: R.useStreamFromValues(["uuid4", count]),
         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 }`)),

packages/example/src/routes/tests.tsx

@@ -1,7 +1,9 @@
 import { R } from "@/reffuse"
-import { Button } from "@radix-ui/themes"
+import { Button, Flex } from "@radix-ui/themes"
 import { createFileRoute } from "@tanstack/react-router"
-import { Console, Effect } from "effect"
+import { GetRandomValues, makeUuid4 } from "@typed/id"
+import { Console, Effect, Stream } from "effect"
+import { useState } from "react"
 
 
 export const Route = createFileRoute("/tests")({
@@ -20,12 +22,25 @@ function RouteComponent() {
         Effect.delay("1 second"),
     ), [])
 
+    const [reactValue, setReactValue] = useState("initial")
+    const reactValueStream = R.useStreamFromValues([reactValue])
+    R.useFork(() => Stream.runForEach(reactValueStream, Console.log), [reactValueStream])
+
+
     const logValue = R.useCallbackSync(Effect.fn(function*(value: string) {
         yield* Effect.log(value)
     }), [])
 
+    const generateUuid = R.useCallbackSync(() => makeUuid4.pipe(
+        Effect.provide(GetRandomValues.CryptoRandom),
+        Effect.map(setReactValue),
+    ), [])
+
 
     return (
-        <Button onClick={() => logValue("test")}>Log value</Button>
+        <Flex direction="row" justify="center" align="center" gap="2">
+            <Button onClick={() => logValue("test")}>Log value</Button>
+            <Button onClick={() => generateUuid()}>Generate UUID</Button>
+        </Flex>
     )
 }