play with effect-atom

api/src/HelloWorld.controllers.ts

@@ -30,6 +30,9 @@ export default Router(HelloWorldRsc)({
           currentUser: user,
           randomUser: generate(S.A.make(User)).value
         })
+      },
+      *Set({ echo }) {
+        yield* Effect.logInfo("Bogus", { echo })
       }
     })
   }

api/src/resources/HelloWorld.ts

@@ -14,6 +14,10 @@ export class GetHelloWorld extends S.Req<GetHelloWorld>()("GetHelloWorld", {
   echo: S.String
 }, { allowAnonymous: true, allowRoles: ["user"], success: Response }) {}
 
+export class Set extends S.Req<Set>()("Set", {
+  echo: S.String
+}, { allowAnonymous: true, allowRoles: ["user"] }) {}
+
 // codegen:start {preset: meta, sourcePrefix: src/resources/}
 export const meta = { moduleName: "HelloWorld" } as const
 // codegen:end

frontend/composables/runtime.ts

@@ -81,8 +81,7 @@ export type RT = ApiClientFactory
 const config = (globalThis as any).__NUXT__.config as ReturnType<
   typeof useRuntimeConfig
 >
-const isRemote = config.public.env !== "local-dev"
-const disableTracing = !isRemote || !config.public.telemetry
+const disableTracing = false //  !isRemote || !config.public.telemetry
 
 export const runtime = makeRuntime(
   config.public.feVersion,

frontend/pages/index.vue

@@ -2,6 +2,9 @@
 import { HelloWorldRsc } from "#resources"
 import { buildFormFromSchema } from "@effect-app/vue/form"
 import { S } from "effect-app"
+import { Atom, AtomRpc, useAtomSet, useAtomValue } from "@effect-atom/atom-vue"
+import { makeRpcGroup } from "effect-app/client"
+import { RpcClientProtocolLayers } from "~/composables/runtime"
 
 class Input extends S.Class<Input>("Input")({
   title: S.NonEmptyString255,
@@ -27,8 +30,32 @@ const makeReq = () => ({
 
 const req = ref(makeReq())
 
-const helloWorldClient = clientFor(HelloWorldRsc)
-const [result] = useSafeQuery(helloWorldClient.GetHelloWorld, req)
+const helloWorldRpcs = makeRpcGroup(HelloWorldRsc)
+class HelloWorldClient extends AtomRpc.Tag<HelloWorldClient>()(
+  "HelloWorldClient",
+  {
+    protocol: RpcClientProtocolLayers("/HelloWorld"),
+    group: helloWorldRpcs,
+  },
+) {}
+
+const result = useAtomValue(() => {
+  console.log("Recomputing HelloWorld.GetHelloWorld atom with:", req.value)
+  return Atom.refreshOnWindowFocus(
+    HelloWorldClient.query("HelloWorld.GetHelloWorld", req.value, {
+      reactivityKeys: ["echo"],
+    }),
+  )
+})
+
+const increment = useAtomSet(() => HelloWorldClient.mutation("HelloWorld.Set"))
+const test = () =>
+  increment({ payload: { echo: "test" }, reactivityKeys: { echo: ["echo"] } })
+
+// const mutation = Effect.fn("MySpan")(function* () {
+//   yield* Effect.logInfo("doing something")
+//   increment({ payload: { echo: "test" }, reactivityKeys: { echo: ["echo"] } })
+// })
 
 // onMounted(() => {
 //   setInterval(() => {
@@ -41,14 +68,15 @@ const [result] = useSafeQuery(helloWorldClient.GetHelloWorld, req)
 // })
 
 onMounted(() => {
-  const t = setInterval(() => (req.value = makeReq()), 5000)
+  const t = setInterval(() => (req.value = makeReq()), 10_000)
   return () => clearInterval(t)
 })
 </script>
 
 <template>
   <div>
     Hi world!
+    <v-btn @click="test()">Test</v-btn>
     <v-form @submit.prevent="form.submit">
       <template v-for="(field, name) in form.fields" :key="name">
         <!-- TODO: field.type text, or via length, or is multiLine -->