@effectify/react-query 0.0.3

package/README.md

@@ -0,0 +1,110 @@
+# @effectify/react-query
+
+Integration of [Effect](https://effect.website/) with [TanStack Query](https://tanstack.com/query/latest) for [React](https://react.dev/).
+
+## Installation
+
+```bash
+# npm
+npm install @effectify/react-query
+
+# yarn
+yarn add @effectify/react-query
+
+# pnpm
+pnpm add @effectify/react-query
+
+# bun
+bun add @effectify/react-query
+```
+
+## Basic Usage
+
+```tsx
+import * as Layer from "effect/Layer"
+import * as Effect from "effect/Effect"
+import { QueryClient } from "@tanstack/react-query"
+import { tanstackQueryEffect } from "@effectify/react-query"
+
+// Create an Effect layer
+const AppLayer = Layer.succeed("AppConfig", { apiUrl: "https://api.example.com" })
+
+// Create a QueryClient instance
+const queryClient = new QueryClient()
+
+// Initialize the TanStack Query integration
+const {
+  RuntimeProvider,
+  useRuntime,
+  useEffectQuery,
+  useEffectMutation,
+  useRxSubscribe,
+  useRxSubscriptionRef,
+} = tanstackQueryEffect({ layer: AppLayer, queryClient })
+
+// Wrap your application with the provider
+function App() {
+  return (
+    <RuntimeProvider>
+      <YourApp />
+    </RuntimeProvider>
+  )
+}
+
+// Use in components
+function YourComponent() {
+  const query = useEffectQuery({
+    queryKey: ["data"],
+    queryFn: () => Effect.succeed(["item1", "item2"]),
+  })
+
+  return (
+    <div>
+      {query.isPending ? <p>Loading...</p> : query.isError ? <p>Error: {query.error.message}</p> : (
+        <ul>
+          {query.data.map((item) => <li>{item}</li>)}
+        </ul>
+      )}
+    </div>
+  )
+}
+```
+
+## API
+
+### `tanstackQueryEffect({ layer, queryClient })`
+
+Creates an instance of the TanStack Query integration.
+
+#### Parameters
+
+- `layer`: An Effect layer that provides the necessary dependencies.
+- `queryClient`: A TanStack Query QueryClient instance.
+
+#### Returns
+
+An object with the following properties:
+
+- `RuntimeProvider`: Provider component that should wrap your application.
+- `useRuntime`: Hook to access the Effect runtime.
+- `useEffectQuery`: Hook to perform queries with Effect.
+- `useEffectMutation`: Hook to perform mutations with Effect.
+- `useRxSubscribe`: Hook to subscribe to Effect streams.
+- `useRxSubscriptionRef`: Hook to maintain a reference to a subscription.
+
+### Helpers
+
+- `createQueryDataHelpers`: Utility to create query data manipulation helpers.
+- `createQueryKey`: Utility to create typed query keys.
+
+## Complete Example
+
+Check out the example application in [apps/tanstack-react-app](../../apps/tanstack-react-app) to see a complete use case.
+
+## Credits & Inspiration
+
+This package was inspired by the excellent educational content from [Lucas Barake](https://www.youtube.com/@lucas-barake), particularly his [video on Effect and TanStack Query](https://www.youtube.com/watch?v=zl4w3BQAoJM&t=1011s) which provides great insights into these technologies.
+
+## License
+
+MIT

package/dist/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@effectify/react-query",
+  "version": "0.0.3",
+  "description": "Integration of Effect with TanStack Query for React",
+  "type": "module",
+  "main": "./dist/src/index.js",
+  "module": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "@effectify/source": "./src/index.ts",
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/src/index.js",
+      "default": "./dist/src/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "dependencies": {
+    "tslib": "catalog:",
+    "@tanstack/react-query": "5.90.10",
+    "@tanstack/query-core": "5.90.10",
+    "effect": "catalog:",
+    "react": "catalog:"
+  },
+  "devDependencies": {
+    "typescript": "catalog:",
+    "@types/react": "catalog:"
+  },
+  "optionalDependencies": {},
+  "peerDependencies": {
+    "effect": "^3.19.16 || ^4.0.0-beta"
+  }
+}

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./lib/internal/query-data-helpers.js";
+export * from "./lib/tanstack-query-effect.jsx";
+export * from "./lib/types.js";

package/dist/src/index.js

@@ -0,0 +1,5 @@
+// Effect v4 Beta - React Query Integration
+// @beta
+export * from "./lib/internal/query-data-helpers.js";
+export * from "./lib/tanstack-query-effect.jsx";
+export * from "./lib/types.js";

package/dist/src/lib/internal/make-use-effect-mutation.d.ts

@@ -0,0 +1,3 @@
+import { type UseMutationResult } from "@tanstack/react-query";
+import type { EffectfulError, EffectfulMutationOptions, Runner } from "../types.js";
+export declare const makeUseEffectMutation: <R>(createRunner: Runner<R>) => <TData, TError extends EffectfulError, TVariables>(options: EffectfulMutationOptions<TData, TError, TVariables, R>) => UseMutationResult<TData, Error, TVariables>;

package/dist/src/lib/internal/make-use-effect-mutation.js

@@ -0,0 +1,13 @@
+import { useMutation } from "@tanstack/react-query";
+export const makeUseEffectMutation = (createRunner) => (options) => {
+    const effectRunner = createRunner();
+    const [spanName] = options.mutationKey;
+    const mutationFn = (variables) => {
+        const effect = options.mutationFn(variables);
+        return effectRunner(spanName)(effect);
+    };
+    return useMutation({
+        ...options,
+        mutationFn,
+    });
+};

package/dist/src/lib/internal/make-use-effect-query.d.ts

@@ -0,0 +1,3 @@
+import { type UseQueryResult } from "@tanstack/react-query";
+import type { EffectfulError, EffectfulQueryOptions, QueryKey, Runner } from "../types.js";
+export declare const makeUseEffectQuery: <R>(createRunner: Runner<R>) => <TData, TError extends EffectfulError, TQueryKey extends QueryKey = QueryKey>({ gcTime, staleTime, ...options }: EffectfulQueryOptions<TData, TError, R, TQueryKey>) => UseQueryResult<TData, Error>;

package/dist/src/lib/internal/make-use-effect-query.js

@@ -0,0 +1,22 @@
+import { skipToken, useQuery } from "@tanstack/react-query";
+import * as Duration from "effect/Duration";
+import { useMemo } from "react";
+export const makeUseEffectQuery = (createRunner) => ({ gcTime, staleTime, ...options }) => {
+    const effectRunner = createRunner();
+    const [spanName] = options.queryKey;
+    const queryFn = useMemo(() => (context) => {
+        const effect = options.queryFn(context);
+        return effectRunner(spanName)(effect);
+    }, [effectRunner, spanName, options.queryFn]);
+    return useQuery({
+        ...options,
+        queryKey: options.queryKey,
+        queryFn: options.queryFn === skipToken ? skipToken : queryFn,
+        ...(staleTime !== undefined && {
+            staleTime: Duration.toMillis(Duration.millis(staleTime)),
+        }),
+        ...(gcTime !== undefined && {
+            gcTime: Duration.toMillis(Duration.millis(gcTime)),
+        }),
+    });
+};

package/dist/src/lib/internal/make-use-rx-subsciption-ref.d.ts

@@ -0,0 +1,20 @@
+import { type Context } from "react";
+import type * as ManagedRuntime from "effect/ManagedRuntime";
+import type { Subscribable, SubscriptionOptions } from "../types.js";
+import type * as Effect from "effect/Effect";
+/**
+ * ⚠️ TEMPORARILY DISABLED - Effect v4 Migration
+ *
+ * This hook is temporarily disabled due to significant API changes in Effect v4:
+ * - SubscriptionRef.SubscriptionRefTypeId was removed
+ * - Stream APIs reorganized under effect/unstable/*
+ * - Migration documentation is incomplete (see Effect-TS/effect-smol#1378)
+ *
+ * The core functionality (useEffectQuery, useEffectMutation) works with v4.
+ * This advanced subscription feature will be revisited when v4 documentation
+ * is complete or when the beta stabilizes.
+ *
+ * TODO: Re-enable after Effect v4 stable release and documentation update
+ * @deprecated Temporarily disabled during Effect v4 beta migration
+ */
+export declare const makeUseRxSubscriptionRef: <R, E>(RuntimeContext: Context<ManagedRuntime.ManagedRuntime<R, E> | null>) => <A, E2>(_subscribable: Subscribable<A, E2> | Effect.Effect<Subscribable<A, E2>, never, R> | Effect.Effect<unknown, never, R>, _onNext: (value: A) => void, _opts?: SubscriptionOptions) => A;

package/dist/src/lib/internal/make-use-rx-subsciption-ref.js

@@ -0,0 +1,25 @@
+import { useContext } from "react";
+/**
+ * ⚠️ TEMPORARILY DISABLED - Effect v4 Migration
+ *
+ * This hook is temporarily disabled due to significant API changes in Effect v4:
+ * - SubscriptionRef.SubscriptionRefTypeId was removed
+ * - Stream APIs reorganized under effect/unstable/*
+ * - Migration documentation is incomplete (see Effect-TS/effect-smol#1378)
+ *
+ * The core functionality (useEffectQuery, useEffectMutation) works with v4.
+ * This advanced subscription feature will be revisited when v4 documentation
+ * is complete or when the beta stabilizes.
+ *
+ * TODO: Re-enable after Effect v4 stable release and documentation update
+ * @deprecated Temporarily disabled during Effect v4 beta migration
+ */
+export const makeUseRxSubscriptionRef = (RuntimeContext) => (_subscribable, _onNext, _opts) => {
+    const runtime = useContext(RuntimeContext);
+    if (!runtime) {
+        throw new Error("Runtime context not found. Make sure to wrap your app with RuntimeProvider");
+    }
+    throw new Error("useRxSubscriptionRef is temporarily disabled during Effect v4 beta migration. " +
+        "Please use useEffectQuery or useEffectMutation instead, or wait for v4 stable release. " +
+        "See: https://github.com/Effect-TS/effect-smol/issues/1378");
+};

package/dist/src/lib/internal/make-use-rx-subscribe.d.ts

@@ -0,0 +1,5 @@
+import * as Effect from "effect/Effect";
+import type * as ManagedRuntime from "effect/ManagedRuntime";
+import * as Stream from "effect/Stream";
+import { type Context } from "react";
+export declare const makeUseRxSubscribe: <R, E>(RuntimeContext: Context<ManagedRuntime.ManagedRuntime<R, E> | null>) => <E2, A>(stream: Stream.Stream<A, E2, R> | Effect.Effect<Stream.Stream<A, E2, R>, E2, R>, initialValue: A, onNext: (value: A) => void, onError?: (error: E2) => void) => A | undefined;

package/dist/src/lib/internal/make-use-rx-subscribe.js

@@ -0,0 +1,40 @@
+import * as Effect from "effect/Effect";
+import * as Exit from "effect/Exit";
+import * as Fiber from "effect/Fiber";
+import * as Stream from "effect/Stream";
+import { useContext, useEffect, useRef, useState } from "react";
+export const makeUseRxSubscribe = (RuntimeContext) => {
+    return (stream, initialValue, onNext, onError) => {
+        const runtime = useContext(RuntimeContext);
+        if (!runtime) {
+            throw new Error("Runtime context not found. Make sure to wrap your app with RuntimeProvider");
+        }
+        const [value, setValue] = useState(initialValue);
+        const fiberRef = useRef(null);
+        const finalStream = Effect.isEffect(stream)
+            ? Stream.unwrap(stream)
+            : stream;
+        useEffect(() => {
+            const subscription = finalStream.pipe(Stream.tap((a) => Effect.sync(() => {
+                setValue(a);
+                onNext(a);
+            })), Stream.catch((e) => Stream.fromEffect(Effect.sync(() => {
+                onError?.(e);
+                return;
+            }))), Stream.runDrain, Effect.forever, Effect.forkDetach);
+            runtime.runCallback(subscription, {
+                onExit: (exit) => {
+                    if (Exit.isSuccess(exit)) {
+                        fiberRef.current = exit.value;
+                    }
+                },
+            });
+            return () => {
+                if (fiberRef.current !== null) {
+                    runtime.runCallback(Fiber.interrupt(fiberRef.current));
+                }
+            };
+        }, [finalStream, runtime, onNext, onError]);
+        return value;
+    };
+};

package/dist/src/lib/internal/query-data-helpers.d.ts

@@ -0,0 +1,75 @@
+import type { QueryClient } from "@tanstack/react-query";
+type DeepMutable<T> = {
+    -readonly [P in keyof T]: T[P] extends object ? DeepMutable<T[P]> : T[P];
+};
+export type QueryDataUpdater<TData> = (draft: DeepMutable<TData>) => void;
+type QueryKey<TKey extends string, TVariables = void> = TVariables extends void ? readonly [TKey] : readonly [TKey, TVariables];
+/**
+ * Creates a type-safe query key factory that can be used with or without variables
+ * @template TKey The string literal type for the query key
+ * @template TVariables Optional variables type. If not provided, the factory will not accept variables
+ * @param key The query key string
+ * @returns A function that creates a query key tuple
+ *
+ * @example Without variables:
+ * ```typescript
+ * const userKey = createQueryKey("user");
+ * const key = userKey(); // returns ["user"]
+ * ```
+ *
+ * @example With variables:
+ * ```typescript
+ * type UserVars = { id: string };
+ * const userKey = createQueryKey<"user", UserVars>("user");
+ * const key = userKey({ id: "123" }); // returns ["user", { id: "123" }]
+ * ```
+ */
+export declare function createQueryKey<TKey extends string, TVariables = void>(key: TKey): TVariables extends void ? () => QueryKey<TKey> : (variables: TVariables) => QueryKey<TKey, TVariables>;
+type QueryDataHelpers<TData, TVariables> = {
+    removeQuery: (variables: TVariables) => void;
+    removeAllQueries: () => void;
+    setData: (variables: TVariables, updater: QueryDataUpdater<TData>) => TData | undefined;
+    invalidateQuery: (variables: TVariables) => Promise<void>;
+    invalidateAllQueries: () => Promise<void>;
+    refetchQuery: (variables: TVariables) => Promise<void>;
+    refetchAllQueries: () => Promise<void>;
+};
+/**
+ * Creates a set of helpers to manage query data in the cache
+ * @template TData The type of data stored in the query
+ * @template TVariables Automatically inferred from the queryKey function parameter
+ * @param queryKey A function that creates a query key tuple from variables
+ * @returns An object with methods to remove, update, invalidate, and invalidate all query data
+ *
+ * @example Without variables:
+ * ```typescript
+ * const userKey = createQueryKey("user");
+ * type User = { name: string };
+ *
+ * // Types are inferred from userKey
+ * const helpers = createQueryDataHelpers<User>(userKey);
+ * helpers.setData(undefined, (draft) => {
+ *   draft.name = "New Name";
+ * });
+ * ```
+ *
+ * @example With variables and explicit types:
+ * ```typescript
+ * type UserVars = { id: string };
+ * type User = { id: string; name: string };
+ *
+ * const userKey = createQueryKey<"user", UserVars>("user");
+ * const helpers = createQueryDataHelpers<User, UserVars>(userKey);
+ *
+ * helpers.setData({ id: "123" }, (draft) => {
+ *   draft.name = "New Name";
+ * });
+ *
+ * // Other helper methods
+ * await helpers.invalidateQuery({ id: "123" });
+ * await helpers.refetchQuery({ id: "123" });
+ * helpers.removeQuery({ id: "123" });
+ * ```
+ */
+export declare const makeCreateQueryDataHelpers: (queryClient: QueryClient) => <TData, TVariables = void>(queryKey: (variables: TVariables) => readonly [string, ...unknown[]]) => QueryDataHelpers<TData, TVariables>;
+export {};

package/dist/src/lib/internal/query-data-helpers.js

@@ -0,0 +1,107 @@
+// Simple deep clone function to replace mutative
+function deepClone(obj) {
+    if (obj === null || typeof obj !== "object") {
+        return obj;
+    }
+    if (obj instanceof Date) {
+        return new Date(obj.getTime());
+    }
+    if (Array.isArray(obj)) {
+        return obj.map((item) => deepClone(item));
+    }
+    if (typeof obj === "object") {
+        const cloned = {};
+        for (const key in obj) {
+            if (Object.hasOwn(obj, key)) {
+                cloned[key] = deepClone(obj[key]);
+            }
+        }
+        return cloned;
+    }
+    return obj;
+}
+/**
+ * Creates a type-safe query key factory that can be used with or without variables
+ * @template TKey The string literal type for the query key
+ * @template TVariables Optional variables type. If not provided, the factory will not accept variables
+ * @param key The query key string
+ * @returns A function that creates a query key tuple
+ *
+ * @example Without variables:
+ * ```typescript
+ * const userKey = createQueryKey("user");
+ * const key = userKey(); // returns ["user"]
+ * ```
+ *
+ * @example With variables:
+ * ```typescript
+ * type UserVars = { id: string };
+ * const userKey = createQueryKey<"user", UserVars>("user");
+ * const key = userKey({ id: "123" }); // returns ["user", { id: "123" }]
+ * ```
+ */
+export function createQueryKey(key) {
+    return ((variables) => variables === undefined ? [key] : [key, variables]);
+}
+/**
+ * Creates a set of helpers to manage query data in the cache
+ * @template TData The type of data stored in the query
+ * @template TVariables Automatically inferred from the queryKey function parameter
+ * @param queryKey A function that creates a query key tuple from variables
+ * @returns An object with methods to remove, update, invalidate, and invalidate all query data
+ *
+ * @example Without variables:
+ * ```typescript
+ * const userKey = createQueryKey("user");
+ * type User = { name: string };
+ *
+ * // Types are inferred from userKey
+ * const helpers = createQueryDataHelpers<User>(userKey);
+ * helpers.setData(undefined, (draft) => {
+ *   draft.name = "New Name";
+ * });
+ * ```
+ *
+ * @example With variables and explicit types:
+ * ```typescript
+ * type UserVars = { id: string };
+ * type User = { id: string; name: string };
+ *
+ * const userKey = createQueryKey<"user", UserVars>("user");
+ * const helpers = createQueryDataHelpers<User, UserVars>(userKey);
+ *
+ * helpers.setData({ id: "123" }, (draft) => {
+ *   draft.name = "New Name";
+ * });
+ *
+ * // Other helper methods
+ * await helpers.invalidateQuery({ id: "123" });
+ * await helpers.refetchQuery({ id: "123" });
+ * helpers.removeQuery({ id: "123" });
+ * ```
+ */
+export const makeCreateQueryDataHelpers = (queryClient) => (queryKey) => {
+    const [namespaceKey] = queryKey(undefined);
+    return {
+        removeQuery: (variables) => {
+            queryClient.removeQueries({ queryKey: queryKey(variables) });
+        },
+        removeAllQueries: () => {
+            queryClient.removeQueries({ queryKey: [namespaceKey], exact: false });
+        },
+        setData: (variables, updater) => {
+            return queryClient.setQueryData(queryKey(variables), (oldData) => {
+                if (oldData === undefined) {
+                    return oldData;
+                }
+                const clonedData = deepClone(oldData);
+                updater(clonedData);
+                return clonedData;
+            });
+        },
+        invalidateQuery: (variables) => queryClient.invalidateQueries({ queryKey: queryKey(variables) }),
+        invalidateAllQueries: () => queryClient.invalidateQueries({ queryKey: [namespaceKey], exact: false }),
+        refetchQuery: (variables) => queryClient.refetchQueries({ queryKey: queryKey(variables) }),
+        refetchAllQueries: () => queryClient.refetchQueries({ queryKey: [namespaceKey], exact: false }),
+    };
+};

package/dist/src/lib/tanstack-query-effect.d.ts

@@ -0,0 +1,28 @@
+import { type QueryClient } from "@tanstack/react-query";
+import * as Effect from "effect/Effect";
+import * as Layer from "effect/Layer";
+import * as ManagedRuntime from "effect/ManagedRuntime";
+import { type ReactNode } from "react";
+export declare const tanstackQueryEffect: <R, E>({ layer, queryClient, }: {
+    layer: Layer.Layer<R, E, never>;
+    queryClient: QueryClient;
+}) => {
+    useRunner: () => <A, E2>(span: string) => (effect: Effect.Effect<A, E2, R>) => Promise<A>;
+    RuntimeProvider: ({ children }: {
+        children: ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    useRuntime: () => ManagedRuntime.ManagedRuntime<R, E>;
+    useEffectQuery: <TData, TError extends import("./types.js").EffectfulError, TQueryKey extends import("./types.js").QueryKey = import("./types.js").QueryKey>({ gcTime, staleTime, ...options }: import("./types.js").EffectfulQueryOptions<TData, TError, R, TQueryKey>) => import("@tanstack/react-query").UseQueryResult<TData, Error>;
+    useEffectMutation: <TData, TError_1 extends import("./types.js").EffectfulError, TVariables>(options: import("./types.js").EffectfulMutationOptions<TData, TError_1, TVariables, R>) => import("@tanstack/react-query").UseMutationResult<TData, Error, TVariables>;
+    useRxSubscribe: <E2_1, A>(stream: import("effect/Stream").Stream<A, E2_1, R> | Effect.Effect<import("effect/Stream").Stream<A, E2_1, R>, E2_1, R>, initialValue: A, onNext: (value: A) => void, onError?: ((error: E2_1) => void) | undefined) => A | undefined;
+    useRxSubscriptionRef: <A_1, E2_1>(_subscribable: import("./types.js").Subscribable<A_1, E2_1> | Effect.Effect<import("./types.js").Subscribable<A_1, E2_1>, never, R> | Effect.Effect<unknown, never, R>, _onNext: (value: A_1) => void, _opts?: import("./types.js").SubscriptionOptions) => A_1;
+    createQueryDataHelpers: <TData, TVariables_1 = void>(queryKey: (variables: TVariables_1) => readonly [string, ...unknown[]]) => {
+        removeQuery: (variables: TVariables_1) => void;
+        removeAllQueries: () => void;
+        setData: (variables: TVariables_1, updater: import("./internal/query-data-helpers.js").QueryDataUpdater<TData>) => TData | undefined;
+        invalidateQuery: (variables: TVariables_1) => Promise<void>;
+        invalidateAllQueries: () => Promise<void>;
+        refetchQuery: (variables: TVariables_1) => Promise<void>;
+        refetchAllQueries: () => Promise<void>;
+    };
+};

package/dist/src/lib/tanstack-query-effect.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QueryClientProvider } from "@tanstack/react-query";
+import * as Effect from "effect/Effect";
+import * as ManagedRuntime from "effect/ManagedRuntime";
+import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import { makeUseEffectMutation } from "./internal/make-use-effect-mutation.js";
+import { makeUseEffectQuery } from "./internal/make-use-effect-query.js";
+import { makeUseRxSubscriptionRef } from "./internal/make-use-rx-subsciption-ref.js";
+import { makeUseRxSubscribe } from "./internal/make-use-rx-subscribe.js";
+import { makeCreateQueryDataHelpers } from "./internal/query-data-helpers.js";
+export const tanstackQueryEffect = ({ layer, queryClient, }) => {
+    const RuntimeContext = createContext(null);
+    const useRunner = () => {
+        const runtime = useContext(RuntimeContext);
+        if (!runtime) {
+            throw new Error("Runtime context not found. Make sure to wrap your app with RuntimeProvider");
+        }
+        return useMemo(() => (span) => (effect) => runtime.runPromise(effect.pipe(Effect.withSpan(span))), [runtime]);
+    };
+    const RuntimeProvider = ({ children }) => {
+        const runtimeRef = useRef(null);
+        if (!runtimeRef.current) {
+            runtimeRef.current = ManagedRuntime.make(layer);
+        }
+        useEffect(() => {
+            return () => {
+                if (runtimeRef.current) {
+                    runtimeRef.current.dispose();
+                }
+            };
+        }, []);
+        return (_jsx(RuntimeContext.Provider, { value: runtimeRef.current, children: _jsx(QueryClientProvider, { client: queryClient, children: children }) }));
+    };
+    const useRuntime = () => {
+        const runtime = useContext(RuntimeContext);
+        if (!runtime) {
+            throw new Error("Runtime context not found. Make sure to wrap your app with RuntimeProvider");
+        }
+        return runtime;
+    };
+    return {
+        useRunner,
+        RuntimeProvider,
+        useRuntime,
+        useEffectQuery: makeUseEffectQuery(useRunner),
+        useEffectMutation: makeUseEffectMutation(useRunner),
+        useRxSubscribe: makeUseRxSubscribe(RuntimeContext),
+        useRxSubscriptionRef: makeUseRxSubscriptionRef(RuntimeContext),
+        createQueryDataHelpers: makeCreateQueryDataHelpers(queryClient),
+    };
+};

package/dist/src/lib/types.d.ts

@@ -0,0 +1,25 @@
+import type { QueryFunctionContext, skipToken, UseMutationOptions, UseQueryOptions } from "@tanstack/react-query";
+import type * as Effect from "effect/Effect";
+export type QueryKey = readonly [string, Record<string, unknown>?];
+export type EffectfulError = {
+    _tag: string;
+};
+export type Runner<R> = () => <A, E>(span: string) => (effect: Effect.Effect<A, E, R>) => Promise<A>;
+export type EffectfulMutationOptions<TData, TError extends EffectfulError, TVariables, R> = Omit<UseMutationOptions<TData, Error, TVariables>, "mutationFn" | "onSuccess" | "onError" | "onSettled" | "onMutate" | "retry" | "retryDelay"> & {
+    mutationKey: QueryKey;
+    mutationFn: (variables: TVariables) => Effect.Effect<TData, TError, R>;
+};
+export type EffectfulQueryFunction<TData, TError, TQueryKey extends QueryKey = QueryKey, R = never, TPageParam = never> = (context: QueryFunctionContext<TQueryKey, TPageParam>) => Effect.Effect<TData, TError, R>;
+export type EffectfulQueryOptions<TData, TError, R, TQueryKey extends QueryKey = QueryKey, TPageParam = never> = Omit<UseQueryOptions<TData, Error, TData, TQueryKey>, "queryKey" | "queryFn" | "retry" | "retryDelay" | "staleTime" | "gcTime"> & {
+    queryKey: TQueryKey;
+    queryFn: EffectfulQueryFunction<TData, TError, TQueryKey, R, TPageParam> | typeof skipToken;
+    staleTime?: number;
+    gcTime?: number;
+};
+export interface Subscribable<A, E = never> {
+    readonly changes: unknown;
+    readonly get: () => A;
+}
+export interface SubscriptionOptions {
+    readonly skipInitial?: boolean;
+}

package/dist/src/lib/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@effectify/react-query",
+  "version": "0.0.3",
+  "description": "Integration of Effect with TanStack Query for React",
+  "type": "module",
+  "main": "./dist/src/index.js",
+  "module": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "@effectify/source": "./src/index.ts",
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/src/index.js",
+      "default": "./dist/src/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "dependencies": {
+    "tslib": "2.8.1",
+    "@tanstack/react-query": "5.90.10",
+    "@tanstack/query-core": "5.90.10",
+    "effect": "4.0.0-beta.31",
+    "react": "19.2.0"
+  },
+  "devDependencies": {
+    "typescript": "5.9.3",
+    "@types/react": "19.2.7"
+  },
+  "optionalDependencies": {},
+  "peerDependencies": {
+    "effect": "^3.19.16 || ^4.0.0-beta"
+  }
+}