Query service work
Some checks failed
Lint / lint (push) Failing after 11s

This commit is contained in:
Julien Valverdé
2025-03-04 22:44:40 +01:00
parent 00b7228073
commit 3af7c3bf7a
9 changed files with 164 additions and 7 deletions

View File

@@ -0,0 +1,10 @@
import { GlobalReffuse } from "@/reffuse"
import { Reffuse, ReffuseContext } from "reffuse"
import { Uuid4Query } from "./services"
export const QueryContext = ReffuseContext.make<Uuid4Query.Uuid4Query>()
export const R = new class QueryReffuse extends GlobalReffuse.pipe(
Reffuse.withContexts(QueryContext)
) {}

View File

@@ -0,0 +1,20 @@
import { HttpClient, HttpClientError } from "@effect/platform"
import { QueryService } from "@reffuse/extension-query"
import { Console, Effect, ParseResult, Schema } from "effect"
export const Result = Schema.Tuple(Schema.String)
export class Uuid4Query extends QueryService.Tag("Uuid4Query")<Uuid4Query,
typeof Result.Type,
HttpClientError.HttpClientError | ParseResult.ParseError
>() {}
export const Uuid4QueryLive = QueryService.layer(Uuid4Query, 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,
))

View File

@@ -0,0 +1 @@
export * as Uuid4Query from "./Uuid4Query"

View File

@@ -0,0 +1,32 @@
import { Button, Container, Flex, Text } from "@radix-ui/themes"
import * as AsyncData from "@typed/async-data"
import { R } from "../reffuse"
import { Uuid4Query } from "../services"
export function Uuid4QueryService() {
const runSync = R.useRunSync()
const { state, refresh } = R.useMemo(() => Uuid4Query.Uuid4Query, [])
const [queryState] = R.useRefState(state)
return (
<Container>
<Flex direction="column" align="center" gap="2">
<Text>
{AsyncData.match(queryState, {
NoData: () => "No data yet",
Loading: () => "Loading...",
Success: (value, { isRefreshing, isOptimistic }) =>
`Value: ${value} ${isRefreshing ? "(refreshing)" : ""} ${isOptimistic ? "(optimistic)" : ""}`,
Failure: (cause, { isRefreshing }) =>
`Error: ${cause} ${isRefreshing ? "(refreshing)" : ""}`,
})}
</Text>
<Button onClick={() => runSync(refresh)}>Refresh</Button>
</Flex>
</Container>
)
}

View File

@@ -19,6 +19,7 @@ import { Route as LazyrefImport } from './routes/lazyref'
import { Route as CountImport } from './routes/count'
import { Route as BlankImport } from './routes/blank'
import { Route as IndexImport } from './routes/index'
import { Route as QueryServiceImport } from './routes/query/service'
// Create/Update Routes
@@ -70,6 +71,12 @@ const IndexRoute = IndexImport.update({
getParentRoute: () => rootRoute,
} as any)
const QueryServiceRoute = QueryServiceImport.update({
id: '/service',
path: '/service',
getParentRoute: () => QueryRoute,
} as any)
// Populate the FileRoutesByPath interface
declare module '@tanstack/react-router' {
@@ -130,20 +137,38 @@ declare module '@tanstack/react-router' {
preLoaderRoute: typeof TimeImport
parentRoute: typeof rootRoute
}
'/query/service': {
id: '/query/service'
path: '/service'
fullPath: '/query/service'
preLoaderRoute: typeof QueryServiceImport
parentRoute: typeof QueryImport
}
}
}
// Create and export the route tree
interface QueryRouteChildren {
QueryServiceRoute: typeof QueryServiceRoute
}
const QueryRouteChildren: QueryRouteChildren = {
QueryServiceRoute: QueryServiceRoute,
}
const QueryRouteWithChildren = QueryRoute._addFileChildren(QueryRouteChildren)
export interface FileRoutesByFullPath {
'/': typeof IndexRoute
'/blank': typeof BlankRoute
'/count': typeof CountRoute
'/lazyref': typeof LazyrefRoute
'/promise': typeof PromiseRoute
'/query': typeof QueryRoute
'/query': typeof QueryRouteWithChildren
'/tests': typeof TestsRoute
'/time': typeof TimeRoute
'/query/service': typeof QueryServiceRoute
}
export interface FileRoutesByTo {
@@ -152,9 +177,10 @@ export interface FileRoutesByTo {
'/count': typeof CountRoute
'/lazyref': typeof LazyrefRoute
'/promise': typeof PromiseRoute
'/query': typeof QueryRoute
'/query': typeof QueryRouteWithChildren
'/tests': typeof TestsRoute
'/time': typeof TimeRoute
'/query/service': typeof QueryServiceRoute
}
export interface FileRoutesById {
@@ -164,9 +190,10 @@ export interface FileRoutesById {
'/count': typeof CountRoute
'/lazyref': typeof LazyrefRoute
'/promise': typeof PromiseRoute
'/query': typeof QueryRoute
'/query': typeof QueryRouteWithChildren
'/tests': typeof TestsRoute
'/time': typeof TimeRoute
'/query/service': typeof QueryServiceRoute
}
export interface FileRouteTypes {
@@ -180,6 +207,7 @@ export interface FileRouteTypes {
| '/query'
| '/tests'
| '/time'
| '/query/service'
fileRoutesByTo: FileRoutesByTo
to:
| '/'
@@ -190,6 +218,7 @@ export interface FileRouteTypes {
| '/query'
| '/tests'
| '/time'
| '/query/service'
id:
| '__root__'
| '/'
@@ -200,6 +229,7 @@ export interface FileRouteTypes {
| '/query'
| '/tests'
| '/time'
| '/query/service'
fileRoutesById: FileRoutesById
}
@@ -209,7 +239,7 @@ export interface RootRouteChildren {
CountRoute: typeof CountRoute
LazyrefRoute: typeof LazyrefRoute
PromiseRoute: typeof PromiseRoute
QueryRoute: typeof QueryRoute
QueryRoute: typeof QueryRouteWithChildren
TestsRoute: typeof TestsRoute
TimeRoute: typeof TimeRoute
}
@@ -220,7 +250,7 @@ const rootRouteChildren: RootRouteChildren = {
CountRoute: CountRoute,
LazyrefRoute: LazyrefRoute,
PromiseRoute: PromiseRoute,
QueryRoute: QueryRoute,
QueryRoute: QueryRouteWithChildren,
TestsRoute: TestsRoute,
TimeRoute: TimeRoute,
}
@@ -261,13 +291,20 @@ export const routeTree = rootRoute
"filePath": "promise.tsx"
},
"/query": {
"filePath": "query.tsx"
"filePath": "query.tsx",
"children": [
"/query/service"
]
},
"/tests": {
"filePath": "tests.tsx"
},
"/time": {
"filePath": "time.tsx"
},
"/query/service": {
"filePath": "query/service.tsx",
"parent": "/query"
}
}
}

View File

@@ -0,0 +1,26 @@
import { QueryContext } from "@/query/reffuse"
import { Uuid4Query } from "@/query/services"
import { R } from "@/reffuse"
import { createFileRoute } from "@tanstack/react-router"
import { Effect, Layer } from "effect"
import { useMemo } from "react"
export const Route = createFileRoute("/query/service")({
component: RouteComponent
})
function RouteComponent() {
const context = R.useContext()
const layer = useMemo(() => Layer.empty.pipe(
Layer.provideMerge(Uuid4Query.Uuid4QueryLive),
Layer.provide(context)
), [])
return (
<QueryContext.Provider layer={layer}>
</QueryContext.Provider>
)
}