Mutation example

packages/example/src/routeTree.gen.ts

@@ -19,6 +19,7 @@ import { Route as CountImport } from './routes/count'
 import { Route as BlankImport } from './routes/blank'
 import { Route as IndexImport } from './routes/index'
 import { Route as QueryUsequeryImport } from './routes/query/usequery'
+import { Route as QueryUsemutationImport } from './routes/query/usemutation'
 import { Route as QueryServiceImport } from './routes/query/service'
 
 // Create/Update Routes
@@ -71,6 +72,12 @@ const QueryUsequeryRoute = QueryUsequeryImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
+const QueryUsemutationRoute = QueryUsemutationImport.update({
+  id: '/query/usemutation',
+  path: '/query/usemutation',
+  getParentRoute: () => rootRoute,
+} as any)
+
 const QueryServiceRoute = QueryServiceImport.update({
   id: '/query/service',
   path: '/query/service',
@@ -137,6 +144,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof QueryServiceImport
       parentRoute: typeof rootRoute
     }
+    '/query/usemutation': {
+      id: '/query/usemutation'
+      path: '/query/usemutation'
+      fullPath: '/query/usemutation'
+      preLoaderRoute: typeof QueryUsemutationImport
+      parentRoute: typeof rootRoute
+    }
     '/query/usequery': {
       id: '/query/usequery'
       path: '/query/usequery'
@@ -158,6 +172,7 @@ export interface FileRoutesByFullPath {
   '/tests': typeof TestsRoute
   '/time': typeof TimeRoute
   '/query/service': typeof QueryServiceRoute
+  '/query/usemutation': typeof QueryUsemutationRoute
   '/query/usequery': typeof QueryUsequeryRoute
 }
 
@@ -170,6 +185,7 @@ export interface FileRoutesByTo {
   '/tests': typeof TestsRoute
   '/time': typeof TimeRoute
   '/query/service': typeof QueryServiceRoute
+  '/query/usemutation': typeof QueryUsemutationRoute
   '/query/usequery': typeof QueryUsequeryRoute
 }
 
@@ -183,6 +199,7 @@ export interface FileRoutesById {
   '/tests': typeof TestsRoute
   '/time': typeof TimeRoute
   '/query/service': typeof QueryServiceRoute
+  '/query/usemutation': typeof QueryUsemutationRoute
   '/query/usequery': typeof QueryUsequeryRoute
 }
 
@@ -197,6 +214,7 @@ export interface FileRouteTypes {
     | '/tests'
     | '/time'
     | '/query/service'
+    | '/query/usemutation'
     | '/query/usequery'
   fileRoutesByTo: FileRoutesByTo
   to:
@@ -208,6 +226,7 @@ export interface FileRouteTypes {
     | '/tests'
     | '/time'
     | '/query/service'
+    | '/query/usemutation'
     | '/query/usequery'
   id:
     | '__root__'
@@ -219,6 +238,7 @@ export interface FileRouteTypes {
     | '/tests'
     | '/time'
     | '/query/service'
+    | '/query/usemutation'
     | '/query/usequery'
   fileRoutesById: FileRoutesById
 }
@@ -232,6 +252,7 @@ export interface RootRouteChildren {
   TestsRoute: typeof TestsRoute
   TimeRoute: typeof TimeRoute
   QueryServiceRoute: typeof QueryServiceRoute
+  QueryUsemutationRoute: typeof QueryUsemutationRoute
   QueryUsequeryRoute: typeof QueryUsequeryRoute
 }
 
@@ -244,6 +265,7 @@ const rootRouteChildren: RootRouteChildren = {
   TestsRoute: TestsRoute,
   TimeRoute: TimeRoute,
   QueryServiceRoute: QueryServiceRoute,
+  QueryUsemutationRoute: QueryUsemutationRoute,
   QueryUsequeryRoute: QueryUsequeryRoute,
 }
 
@@ -265,6 +287,7 @@ export const routeTree = rootRoute
         "/tests",
         "/time",
         "/query/service",
+        "/query/usemutation",
         "/query/usequery"
       ]
     },
@@ -292,6 +315,9 @@ export const routeTree = rootRoute
     "/query/service": {
       "filePath": "query/service.tsx"
     },
+    "/query/usemutation": {
+      "filePath": "query/usemutation.tsx"
+    },
     "/query/usequery": {
       "filePath": "query/usequery.tsx"
     }

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

@@ -0,0 +1,67 @@
+import { R } from "@/reffuse"
+import { HttpClient } from "@effect/platform"
+import { Button, Container, Flex, Slider, Text } from "@radix-ui/themes"
+import { createFileRoute } from "@tanstack/react-router"
+import * as AsyncData from "@typed/async-data"
+import { Array, Console, Effect, flow, Option, Schema } from "effect"
+import { useState } from "react"
+
+
+export const Route = createFileRoute("/query/usemutation")({
+    component: RouteComponent
+})
+
+
+const Result = Schema.Array(Schema.String)
+
+function RouteComponent() {
+    const runSync = R.useRunSync()
+
+    const [count, setCount] = useState(1)
+
+    const mutation = R.useMutation({
+        mutation: ([count]: readonly [count: number]) => 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,
+        )
+    })
+
+    const [state] = R.useRefState(mutation.state)
+
+
+    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",
+                        Loading: () => "Loading...",
+                        Success: value =>
+                            `Value: ${value}`,
+                        Failure: cause =>
+                            `Error: ${cause}`,
+                    })}
+                </Text>
+
+                <Button onClick={() => runSync(mutation.forkMutate(count))}>
+                    Get
+                </Button>
+            </Flex>
+        </Container>
+    )
+}