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

@@ -1,6 +1,6 @@
-import { HttpClient, HttpClientError } from "@effect/platform"
+import { HttpClientError } from "@effect/platform"
 import { QueryService } from "@reffuse/extension-query"
-import { Console, Effect, ParseResult, Schema } from "effect"
+import { ParseResult, Schema } from "effect"
 
 
 export const Result = Schema.Array(Schema.String)
@@ -9,14 +9,3 @@ export class Uuid4Query extends QueryService.Tag("Uuid4Query")<Uuid4Query,
     typeof Result.Type,
     HttpClientError.HttpClientError | ParseResult.ParseError
 >() {}
-
-export const Uuid4QueryLive = QueryService.layer(Uuid4Query, {
-    query: Console.log("Querying...").pipe(
-        Effect.andThen(Effect.sleep("500 millis")),
-        Effect.andThen(HttpClient.get("https://www.uuidtools.com/api/generate/v4")),
-        HttpClient.withTracerPropagation(false),
-        Effect.flatMap(res => res.json),
-        Effect.flatMap(Schema.decodeUnknown(Result)),
-        Effect.scoped,
-    )
-})

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>
     )
 }

packages/extension-query/src/QueryExtension.ts

@@ -1,13 +1,13 @@
 import * as AsyncData from "@typed/async-data"
-import { Array, Context, Effect, ExecutionStrategy, Fiber, Layer, Ref, Schema, Stream, SubscriptionRef } from "effect"
+import { Context, Effect, Fiber, Layer, Ref, Stream, SubscriptionRef } from "effect"
 import * as React from "react"
 import { ReffuseExtension, type ReffuseHelpers } from "reffuse"
 import * as QueryRunner from "./QueryRunner.js"
 import * as QueryService from "./QueryService.js"
 
 
-export interface UseQueryProps<A, E, R> {
+export interface UseQueryProps<K extends readonly unknown[], A, E, R> {
-    readonly key: Stream.Stream<readonly unknown[]> | readonly unknown[]
+    readonly key: Stream.Stream<K>
     readonly query: () => Effect.Effect<A, E, R>
     readonly refreshOnWindowFocus?: boolean
 }
@@ -22,29 +22,22 @@ export interface UseQueryResult<A, E> {
 
 
 export const QueryExtension = ReffuseExtension.make(() => ({
-    useQuery<A, E, R>(
+    useQuery<K extends readonly unknown[], A, E, R>(
         this: ReffuseHelpers.ReffuseHelpers<R>,
-        props: UseQueryProps<A, E, R>,
+        props: UseQueryProps<K, A, E, R>,
     ): UseQueryResult<A, E> {
         const runner = this.useMemo(() => QueryRunner.make({
-            query: props.query()
+            key: props.key,
-        }), [])
+            query: props.query(),
+        }), [props.key])
 
-        const key = React.useMemo(() =>
+        this.useFork(() => Effect.addFinalizer(() => runner.forkInterrupt).pipe(
-            (Array.isArray as (self: unknown) => self is readonly unknown[])(props.key)
+            Effect.andThen(Stream.runForEach(runner.key, () =>
-                ? props.key
+                Ref.set(runner.queryRef, props.query()).pipe(
-                : props.key,
+                    Effect.andThen(runner.forkFetch)
-        [props.key])
+                )
-
+            ))
-        this.useEffect(
+        ), [runner])
-            () => Effect.addFinalizer(() => runner.forkInterrupt).pipe(
-                Effect.andThen(Ref.set(runner.queryRef, props.query())),
-                Effect.andThen(runner.forkFetch),
-            ),
-
-            [runner, ...(Array.isArray(props.key) ? props.key : [])],
-            { finalizerExecutionStrategy: ExecutionStrategy.parallel },
-        )
 
         this.useFork(() => (props.refreshOnWindowFocus ?? true)
             ? runner.refreshOnWindowFocus

packages/extension-query/src/QueryRunner.ts

@@ -3,7 +3,8 @@ import * as AsyncData from "@typed/async-data"
 import { Effect, Fiber, identity, Option, Ref, Stream, SubscriptionRef } from "effect"
 
 
-export interface QueryRunner<A, E, R> {
+export interface QueryRunner<K extends readonly unknown[], A, E, R> {
+    readonly key: Stream.Stream<K>
     readonly queryRef: SubscriptionRef.SubscriptionRef<Effect.Effect<A, E, R>>
     readonly stateRef: SubscriptionRef.SubscriptionRef<AsyncData.AsyncData<A, E>>
     readonly fiberRef: SubscriptionRef.SubscriptionRef<Option.Option<Fiber.RuntimeFiber<void>>>
@@ -16,13 +17,14 @@ export interface QueryRunner<A, E, R> {
 }
 
 
-export interface MakeProps<A, E, R> {
+export interface MakeProps<K extends readonly unknown[], A, E, R> {
+    readonly key: Stream.Stream<K>
     readonly query: Effect.Effect<A, E, R>
 }
 
-export const make = <A, E, R>(
+export const make = <K extends readonly unknown[], A, E, R>(
-    props: MakeProps<A, E, R>
+    props: MakeProps<K, A, E, R>
-): Effect.Effect<QueryRunner<A, E, R>, never, R> => Effect.gen(function*() {
+): Effect.Effect<QueryRunner<K, A, E, R>, never, R> => Effect.gen(function*() {
     const context = yield* Effect.context<R>()
 
     const queryRef = yield* SubscriptionRef.make(props.query)
@@ -112,6 +114,7 @@ export const make = <A, E, R>(
     )
 
     return {
+        key: props.key,
         queryRef,
         stateRef,
         fiberRef,

packages/extension-query/src/QueryService.ts

@@ -1,6 +1,5 @@
 import * as AsyncData from "@typed/async-data"
-import { Context, Effect, Fiber, Layer, SubscriptionRef } from "effect"
+import { Effect, Fiber, SubscriptionRef } from "effect"
-import * as QueryRunner from "./QueryRunner.js"
 
 
 export interface QueryService<A, E> {
@@ -13,20 +12,20 @@ export const Tag = <const Id extends string>(id: Id) => <
 >() => Effect.Tag(id)<Self, QueryService<A, E>>()
 
 
-export interface LayerProps<A, E, R> {
+// export interface LayerProps<A, E, R> {
-    readonly query: Effect.Effect<A, E, R>
+//     readonly query: Effect.Effect<A, E, R>
-}
+// }
 
-export const layer = <Self, Id extends string, A, E, R>(
+// export const layer = <Self, Id extends string, A, E, R>(
-    tag: Context.TagClass<Self, Id, QueryService<A, E>>,
+//     tag: Context.TagClass<Self, Id, QueryService<A, E>>,
-    props: LayerProps<A, E, R>,
+//     props: LayerProps<A, E, R>,
-): Layer.Layer<Self, never, R> => Layer.effect(tag, Effect.gen(function*() {
+// ): Layer.Layer<Self, never, R> => Layer.effect(tag, Effect.gen(function*() {
-    const runner = yield* QueryRunner.make({
+//     const runner = yield* QueryRunner.make({
-        query: props.query
+//         query: props.query
-    })
+//     })
 
-    return {
+//     return {
-        state: runner.stateRef,
+//         state: runner.stateRef,
-        refresh: runner.forkRefresh,
+//         refresh: runner.forkRefresh,
-    }
+//     }
-}))
+// }))

packages/reffuse/src/ReffuseHelpers.ts

@@ -1,4 +1,4 @@
-import { type Context, Effect, ExecutionStrategy, Exit, type Fiber, Layer, Pipeable, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
+import { type Context, Effect, ExecutionStrategy, Exit, type Fiber, Layer, Pipeable, Queue, Ref, Runtime, Scope, Stream, SubscriptionRef } from "effect"
 import * as React from "react"
 import * as ReffuseContext from "./ReffuseContext.js"
 import * as ReffuseRuntime from "./ReffuseRuntime.js"
@@ -407,6 +407,19 @@ export abstract class ReffuseHelpers<R> {
 
         return [reactStateValue, setValue]
     }
+
+    useStreamFromValues<const A extends React.DependencyList, R>(
+        this: ReffuseHelpers<R>,
+        values: A,
+    ): Stream.Stream<A> {
+        const [queue, stream] = this.useMemo(() => Queue.unbounded<A>().pipe(
+            Effect.map(queue => [queue, Stream.fromQueue(queue)] as const)
+        ), [])
+
+        this.useEffect(() => Queue.offer(queue, values), values)
+
+        return stream
+    }
 }