QueryClient.make

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(QueryErrorHandlerLive),
+    Layer.provideMerge(AppQueryClientLive),
+    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>
-    | QueryErrorHandler
+    | Context.Tag.Service<typeof AppQueryClient>
+    | AppQueryErrorHandler
 >()
 
 export class GlobalReffuse extends Reffuse.Reffuse.pipe(