packages/example/src/QueryErrorHandler.tsx

@@ -1,24 +1,17 @@
-import { HttpClientError } from "@effect/platform"
 import { AlertDialog, Button, Flex, Text } from "@radix-ui/themes"
 import { ErrorHandler } from "@reffuse/extension-query"
 import { Cause, Chunk, Context, Effect, Match, Option, Stream } from "effect"
 import { useState } from "react"
+import { AppQueryErrorHandler } from "./query"
 import { R } from "./reffuse"
 
 
-export class QueryErrorHandler extends ErrorHandler.Tag("QueryErrorHandler")<QueryErrorHandler,
-    HttpClientError.HttpClientError
->() {}
-
-export const QueryErrorHandlerLive = ErrorHandler.layer(QueryErrorHandler)
-
-
 export function VQueryErrorHandler() {
     const [failure, setFailure] = useState(Option.none<Cause.Cause<
-        ErrorHandler.Error<Context.Tag.Service<QueryErrorHandler>>
+        ErrorHandler.Error<Context.Tag.Service<AppQueryErrorHandler>>
     >>())
 
-    R.useFork(() => QueryErrorHandler.pipe(Effect.flatMap(handler =>
+    R.useFork(() => AppQueryErrorHandler.pipe(Effect.flatMap(handler =>
         Stream.runForEach(handler.errors, v => Effect.sync(() =>
             setFailure(Option.some(v))
         ))

packages/example/src/main.tsx

@@ -1,12 +1,11 @@
 import { FetchHttpClient } from "@effect/platform"
 import { Clipboard, Geolocation, Permissions } from "@effect/platform-browser"
-import { QueryClient } from "@reffuse/extension-query"
 import { createRouter, RouterProvider } from "@tanstack/react-router"
 import { Layer } from "effect"
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
 import { ReffuseRuntime } from "reffuse"
-import { QueryErrorHandler, QueryErrorHandlerLive } from "./QueryErrorHandler"
+import { AppQueryClientLive, AppQueryErrorHandlerLive } from "./query"
 import { GlobalContext } from "./reffuse"
 import { routeTree } from "./routeTree.gen"
 
@@ -16,8 +15,8 @@ const layer = Layer.empty.pipe(
     Layer.provideMerge(Geolocation.layer),
     Layer.provideMerge(Permissions.layer),
     Layer.provideMerge(FetchHttpClient.layer),
-    Layer.provideMerge(QueryClient.layer({ ErrorHandler: QueryErrorHandler })),
+    Layer.provideMerge(AppQueryClientLive),
-    Layer.provideMerge(QueryErrorHandlerLive),
+    Layer.provideMerge(AppQueryErrorHandlerLive),
 )
 
 const router = createRouter({ routeTree })

packages/example/src/query.ts

@@ -0,0 +1,10 @@
+import { HttpClientError } from "@effect/platform"
+import { ErrorHandler, QueryClient } from "@reffuse/extension-query"
+
+
+export class AppQueryErrorHandler extends ErrorHandler.Tag("AppQueryErrorHandler")<AppQueryErrorHandler,
+    HttpClientError.HttpClientError
+>() {}
+export const AppQueryErrorHandlerLive = ErrorHandler.layer(AppQueryErrorHandler)
+
+export const [AppQueryClient, AppQueryClientLive] = QueryClient.make({ ErrorHandler: AppQueryErrorHandler })

packages/example/src/reffuse.ts

@@ -1,9 +1,10 @@
-import { HttpClient, HttpClientError } from "@effect/platform"
+import { HttpClient } from "@effect/platform"
 import { Clipboard, Geolocation, Permissions } from "@effect/platform-browser"
 import { LazyRefExtension } from "@reffuse/extension-lazyref"
-import { QueryClient, QueryExtension } from "@reffuse/extension-query"
+import { QueryExtension } from "@reffuse/extension-query"
+import { Context } from "effect"
 import { Reffuse, ReffuseContext } from "reffuse"
-import { QueryErrorHandler } from "./QueryErrorHandler"
+import { AppQueryClient, AppQueryErrorHandler } from "./query"
 
 
 export const GlobalContext = ReffuseContext.make<
@@ -11,8 +12,8 @@ export const GlobalContext = ReffuseContext.make<
     | Geolocation.Geolocation
     | Permissions.Permissions
     | HttpClient.HttpClient
-    | QueryClient.QueryClient<QueryErrorHandler, HttpClientError.HttpClientError>
+    | Context.Tag.Service<typeof AppQueryClient>
-    | QueryErrorHandler
+    | AppQueryErrorHandler
 >()
 
 export class GlobalReffuse extends Reffuse.Reffuse.pipe(

packages/extension-query/src/QueryClient.ts

@@ -6,26 +6,33 @@ export interface QueryClient<EH, HandledE> {
     readonly ErrorHandler: Context.Tag<EH, ErrorHandler.ErrorHandler<HandledE>>
 }
 
-
 export type Tag<EH, HandledE> = Context.Tag<QueryClient<EH, HandledE>, QueryClient<EH, HandledE>>
 export const makeTag = <EH = never, HandledE = never>(): Tag<EH, HandledE> => Context.GenericTag("@reffuse/extension-query/QueryClient")
 
 
-export interface LayerProps<EH, HandledE> {
+export interface MakeProps<EH, HandledE> {
     readonly ErrorHandler?: Context.Tag<EH, ErrorHandler.ErrorHandler<HandledE>>
 }
 
-export const layer = <
+export type MakeResult<EH, HandledE> = [
-    EH = ErrorHandler.DefaultErrorHandler,
+    tag: Tag<EH, HandledE>,
-    HandledE = never,
+    layer: Layer.Layer<
->(
-    props?: LayerProps<EH, HandledE>
-): Layer.Layer<
         | QueryClient<EH, HandledE>
         | (EH extends ErrorHandler.DefaultErrorHandler
             ? ErrorHandler.DefaultErrorHandler
             : never)
-> => Layer.empty.pipe(
+    >,
+]
+
+export const make = <
+    EH = ErrorHandler.DefaultErrorHandler,
+    HandledE = never,
+>(
+    props?: MakeProps<EH, HandledE>
+): MakeResult<EH, HandledE> => [
+    makeTag(),
+
+    Layer.empty.pipe(
         Layer.provideMerge(
             Layer.effect(makeTag<EH, HandledE>(), Effect.succeed({
                 ErrorHandler: (props?.ErrorHandler ?? ErrorHandler.DefaultErrorHandler) as Context.Tag<EH, ErrorHandler.ErrorHandler<HandledE>>
@@ -36,4 +43,5 @@ export const layer = <
             ? Layer.empty
             : ErrorHandler.DefaultErrorHandlerLive
         ) as Layer.Layer<ErrorHandler.DefaultErrorHandler>),
-)
+    ),
+]