Service query

packages/example/src/routes/__root.tsx

@@ -20,7 +20,7 @@ function Root() {
                     <Link to="/count">Count</Link>
                     <Link to="/tests">Tests</Link>
                     <Link to="/promise">Promise</Link>
-                    <Link to="/query">Query</Link>
+                    <Link to="/query/usequery">Query</Link>
                     <Link to="/blank">Blank</Link>
                 </Flex>
             </Container>

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

@@ -2,8 +2,9 @@ import { QueryContext } from "@/query/reffuse"
 import { Uuid4Query } from "@/query/services"
 import { Uuid4QueryService } from "@/query/views/Uuid4QueryService"
 import { R } from "@/reffuse"
+import { HttpClient } from "@effect/platform"
 import { createFileRoute } from "@tanstack/react-router"
-import { Layer } from "effect"
+import { Console, Effect, Schema } from "effect"
 import { useMemo } from "react"
 
 
@@ -12,12 +13,26 @@ export const Route = createFileRoute("/query/service")({
 })
 
 function RouteComponent() {
-    const context = R.useLayer()
+    // const context = R.useLayer()
 
-    const layer = useMemo(() => Layer.empty.pipe(
-        Layer.provideMerge(Uuid4Query.Uuid4QueryLive),
-        Layer.provide(context),
-    ), [context])
+    // const layer = useMemo(() => Layer.empty.pipe(
+    //     Layer.provideMerge(Uuid4Query.Uuid4QueryLive),
+    //     Layer.provide(context),
+    // ), [context])
+
+    const query = R.useQuery({
+        key: ["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`)),
+            HttpClient.withTracerPropagation(false),
+            Effect.flatMap(res => res.json),
+            Effect.flatMap(Schema.decodeUnknown(Uuid4Query.Result)),
+            Effect.scoped,
+        ),
+    })
+
+    const layer = useMemo(() => query.layer(Uuid4Query.Uuid4Query), [query])
 
     return (
         <QueryContext.Provider layer={layer}>

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

@@ -7,7 +7,7 @@ import { Array, Console, Effect, flow, Option, Schema } from "effect"
 import { useState } from "react"
 
 
-export const Route = createFileRoute("/query")({
+export const Route = createFileRoute("/query/usequery")({
     component: RouteComponent
 })
 
@@ -20,6 +20,7 @@ function RouteComponent() {
     const [count, setCount] = useState(1)
 
     const query = R.useQuery({
+        key: ["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 }`)),
@@ -28,7 +29,6 @@ function RouteComponent() {
             Effect.flatMap(Schema.decodeUnknown(Result)),
             Effect.scoped,
         ),
-        key: ["uuid4", count],
     })
 
     const [state] = R.useRefState(query.state)