@mearie/react 0.0.0-next-20260228035926

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright 2025 Bae Junehyeon
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,68 @@
+# @mearie/react
+
+React bindings for Mearie GraphQL client.
+
+This package provides React hooks, components, and the GraphQL client runtime
+for using Mearie in React applications.
+
+## Installation
+
+```bash
+npm install -D mearie
+npm install @mearie/react
+```
+
+The `mearie` package provides build-time code generation, while `@mearie/react`
+includes the runtime client and React-specific hooks.
+
+## Usage
+
+First, create a client and wrap your app with the provider:
+
+```tsx
+// src/App.tsx
+import { createClient, httpExchange, cacheExchange, dedupExchange, ClientProvider } from '@mearie/react';
+import { schema } from '$mearie';
+
+const client = createClient({
+  schema,
+  exchanges: [dedupExchange(), cacheExchange(), httpExchange({ url: 'https://api.example.com/graphql' })],
+});
+
+function App() {
+  return <ClientProvider client={client}>{/* Your app components */}</ClientProvider>;
+}
+```
+
+Then use it in your components:
+
+```tsx
+// src/components/UserProfile.tsx
+import { graphql } from '$mearie';
+import { useQuery } from '@mearie/react';
+
+interface UserProfileProps {
+  userId: string;
+}
+
+function UserProfile({ userId }: UserProfileProps) {
+  const { data, loading } = useQuery(
+    graphql(`
+      query GetUser($id: ID!) {
+        user(id: $id) {
+          id
+          name
+        }
+      }
+    `),
+    { id: userId },
+  );
+
+  if (loading) return <div>Loading...</div>;
+  return <h1>{data.user.name}</h1>;
+}
+```
+
+## Documentation
+
+Full documentation is available at <https://mearie.dev/frameworks/react>.

package/dist/index.cjs

@@ -0,0 +1,202 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let _mearie_core = require("@mearie/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _mearie_core_stream = require("@mearie/core/stream");
+
+//#region src/client-provider.tsx
+const ClientContext = (0, react.createContext)(null);
+const ClientProvider = ({ client, children }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ClientContext.Provider, {
+		value: client,
+		children
+	});
+};
+const useClient = () => {
+	const client = (0, react.useContext)(ClientContext);
+	if (!client) throw new Error("useClient must be used within ClientProvider");
+	return client;
+};
+
+//#endregion
+//#region src/use-query.ts
+const useQuery = ((query, variables, options) => {
+	const client = useClient();
+	const [data, setData] = (0, react.useState)(options?.initialData);
+	const [loading, setLoading] = (0, react.useState)(!options?.skip && !options?.initialData);
+	const [error, setError] = (0, react.useState)();
+	const unsubscribe = (0, react.useRef)(null);
+	const initialized = (0, react.useRef)(false);
+	const stableVariables = (0, react.useMemo)(() => (0, _mearie_core.stringify)(variables), [variables]);
+	const stableOptions = (0, react.useMemo)(() => options, [options?.skip]);
+	const execute = (0, react.useCallback)(() => {
+		unsubscribe.current?.();
+		if (stableOptions?.skip) return;
+		if (!initialized.current && options?.initialData) setLoading(true);
+		initialized.current = true;
+		setError(void 0);
+		unsubscribe.current = (0, _mearie_core_stream.pipe)(client.executeQuery(query, variables, stableOptions), (0, _mearie_core_stream.subscribe)({ next: (result) => {
+			if (result.errors && result.errors.length > 0) {
+				setError(new _mearie_core.AggregatedError(result.errors));
+				setLoading(false);
+			} else {
+				setData(result.data);
+				setLoading(false);
+				setError(void 0);
+			}
+		} }));
+	}, [
+		client,
+		query,
+		stableVariables,
+		stableOptions
+	]);
+	(0, react.useEffect)(() => {
+		execute();
+		return () => unsubscribe.current?.();
+	}, [execute]);
+	return {
+		data,
+		loading,
+		error,
+		refetch: execute
+	};
+});
+
+//#endregion
+//#region src/use-subscription.ts
+const useSubscription = (subscription, ...[variables, options]) => {
+	const client = useClient();
+	const [data, setData] = (0, react.useState)();
+	const [loading, setLoading] = (0, react.useState)(!options?.skip);
+	const [error, setError] = (0, react.useState)();
+	const unsubscribe = (0, react.useRef)(null);
+	const stableVariables = (0, react.useMemo)(() => (0, _mearie_core.stringify)(variables), [variables]);
+	const stableOptions = (0, react.useMemo)(() => options, [
+		options?.skip,
+		options?.onData,
+		options?.onError
+	]);
+	const execute = (0, react.useCallback)(() => {
+		unsubscribe.current?.();
+		if (stableOptions?.skip) return;
+		setLoading(true);
+		setError(void 0);
+		unsubscribe.current = (0, _mearie_core_stream.pipe)(client.executeSubscription(subscription, variables, stableOptions), (0, _mearie_core_stream.subscribe)({ next: (result) => {
+			if (result.errors && result.errors.length > 0) {
+				const err = new _mearie_core.AggregatedError(result.errors);
+				setError(err);
+				setLoading(false);
+				stableOptions?.onError?.(err);
+			} else {
+				const resultData = result.data;
+				setData(resultData);
+				setLoading(false);
+				setError(void 0);
+				stableOptions?.onData?.(resultData);
+			}
+		} }));
+	}, [
+		client,
+		subscription,
+		stableVariables,
+		stableOptions
+	]);
+	(0, react.useEffect)(() => {
+		execute();
+		return () => unsubscribe.current?.();
+	}, [execute]);
+	return {
+		data,
+		loading,
+		error
+	};
+};
+
+//#endregion
+//#region src/use-mutation.ts
+const useMutation = (mutation) => {
+	const client = useClient();
+	const [data, setData] = (0, react.useState)();
+	const [loading, setLoading] = (0, react.useState)(false);
+	const [error, setError] = (0, react.useState)();
+	return [(0, react.useCallback)(async (variables, options) => {
+		setLoading(true);
+		setError(void 0);
+		try {
+			const result = await (0, _mearie_core_stream.pipe)(client.executeMutation(mutation, variables, options), (0, _mearie_core_stream.take)(1), _mearie_core_stream.collect);
+			if (result.errors && result.errors.length > 0) {
+				const err = new _mearie_core.AggregatedError(result.errors);
+				setError(err);
+				setLoading(false);
+				throw err;
+			}
+			setData(result.data);
+			setLoading(false);
+			return result.data;
+		} catch (err) {
+			if (err instanceof _mearie_core.AggregatedError) setError(err);
+			setLoading(false);
+			throw err;
+		}
+	}, [client, mutation]), {
+		data,
+		loading,
+		error
+	}];
+};
+
+//#endregion
+//#region src/use-fragment.ts
+const useFragment = ((fragment, fragmentRef, options) => {
+	const client = useClient();
+	const dataRef = (0, react.useRef)(void 0);
+	const subscribe_ = (0, react.useCallback)((onChange) => {
+		if (fragmentRef == null) {
+			dataRef.current = null;
+			return () => {};
+		}
+		return (0, _mearie_core_stream.pipe)(client.executeFragment(fragment, fragmentRef, options), (0, _mearie_core_stream.subscribe)({ next: (result) => {
+			if (result.errors && result.errors.length > 0) throw new _mearie_core.AggregatedError(result.errors);
+			dataRef.current = result.data;
+			onChange();
+		} }));
+	}, [
+		client,
+		fragment,
+		fragmentRef,
+		options
+	]);
+	const snapshot = (0, react.useCallback)(() => {
+		if (fragmentRef == null) return null;
+		if (dataRef.current === void 0) {
+			const result = (0, _mearie_core_stream.pipe)(client.executeFragment(fragment, fragmentRef, options), _mearie_core_stream.peek);
+			if (result.errors && result.errors.length > 0) throw new _mearie_core.AggregatedError(result.errors);
+			dataRef.current = result.data;
+		}
+		return dataRef.current;
+	}, [
+		client,
+		fragment,
+		fragmentRef,
+		options
+	]);
+	const data = (0, react.useSyncExternalStore)(subscribe_, snapshot, snapshot);
+	return { get data() {
+		return data;
+	} };
+});
+
+//#endregion
+exports.ClientProvider = ClientProvider;
+exports.useClient = useClient;
+exports.useFragment = useFragment;
+exports.useMutation = useMutation;
+exports.useQuery = useQuery;
+exports.useSubscription = useSubscription;
+Object.keys(_mearie_core).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return _mearie_core[k]; }
+  });
+});

package/dist/index.d.cts

@@ -0,0 +1,117 @@
+import { AggregatedError, Artifact, Client, DataOf, FragmentOptions, FragmentRefs, MutationOptions, QueryOptions, SchemaMeta, SubscriptionOptions, VariablesOf } from "@mearie/core";
+import { ReactNode } from "react";
+export * from "@mearie/core";
+
+//#region src/client-provider.d.ts
+type ClientProviderProps<TMeta extends SchemaMeta = SchemaMeta> = {
+  client: Client<TMeta>;
+  children: ReactNode;
+};
+declare const ClientProvider: <TMeta extends SchemaMeta = SchemaMeta>({
+  client,
+  children
+}: ClientProviderProps<TMeta>) => ReactNode;
+declare const useClient: <TMeta extends SchemaMeta = SchemaMeta>() => Client<TMeta>;
+//#endregion
+//#region src/use-query.d.ts
+type UseQueryOptions<T extends Artifact<'query'> = Artifact<'query'>> = QueryOptions<T> & {
+  skip?: boolean;
+};
+type Query<T extends Artifact<'query'>> = {
+  data: undefined;
+  loading: true;
+  error: undefined;
+  refetch: () => void;
+} | {
+  data: DataOf<T>;
+  loading: false;
+  error: undefined;
+  refetch: () => void;
+} | {
+  data: DataOf<T> | undefined;
+  loading: false;
+  error: AggregatedError;
+  refetch: () => void;
+};
+type DefinedQuery<T extends Artifact<'query'>> = {
+  data: DataOf<T>;
+  loading: true;
+  error: undefined;
+  refetch: () => void;
+} | {
+  data: DataOf<T>;
+  loading: false;
+  error: undefined;
+  refetch: () => void;
+} | {
+  data: DataOf<T>;
+  loading: false;
+  error: AggregatedError;
+  refetch: () => void;
+};
+type UseQueryFn = {
+  <T extends Artifact<'query'>>(query: T, variables: VariablesOf<T> | undefined, options: UseQueryOptions<T> & {
+    initialData: DataOf<T>;
+  }): DefinedQuery<T>;
+  <T extends Artifact<'query'>>(query: T, ...[variables, options]: VariablesOf<T> extends Record<string, never> ? [undefined?, UseQueryOptions<T>?] : [VariablesOf<T>, UseQueryOptions<T>?]): Query<T>;
+};
+declare const useQuery: UseQueryFn;
+//#endregion
+//#region src/use-subscription.d.ts
+type Subscription<T extends Artifact<'subscription'>> = {
+  data: undefined;
+  loading: true;
+  error: undefined;
+} | {
+  data: DataOf<T> | undefined;
+  loading: false;
+  error: undefined;
+} | {
+  data: DataOf<T> | undefined;
+  loading: false;
+  error: AggregatedError;
+};
+type UseSubscriptionOptions<T extends Artifact<'subscription'>> = SubscriptionOptions & {
+  skip?: boolean;
+  onData?: (data: DataOf<T>) => void;
+  onError?: (error: AggregatedError) => void;
+};
+declare const useSubscription: <T extends Artifact<"subscription">>(subscription: T, ...[variables, options]: VariablesOf<T> extends Record<string, never> ? [undefined?, UseSubscriptionOptions<T>?] : [VariablesOf<T>, UseSubscriptionOptions<T>?]) => Subscription<T>;
+//#endregion
+//#region src/use-mutation.d.ts
+type MutationResult<T extends Artifact<'mutation'>> = {
+  data: undefined;
+  loading: true;
+  error: undefined;
+} | {
+  data: DataOf<T> | undefined;
+  loading: false;
+  error: undefined;
+} | {
+  data: DataOf<T> | undefined;
+  loading: false;
+  error: AggregatedError;
+};
+type UseMutationOptions = MutationOptions;
+type Mutation<T extends Artifact<'mutation'>> = [(...[variables, options]: VariablesOf<T> extends Record<string, never> ? [undefined?, UseMutationOptions?] : [VariablesOf<T>, UseMutationOptions?]) => Promise<DataOf<T>>, MutationResult<T>];
+declare const useMutation: <T extends Artifact<"mutation">>(mutation: T) => Mutation<T>;
+//#endregion
+//#region src/use-fragment.d.ts
+type UseFragmentOptions = FragmentOptions;
+type Fragment<T extends Artifact<'fragment'>> = {
+  data: DataOf<T>;
+};
+type FragmentList<T extends Artifact<'fragment'>> = {
+  data: DataOf<T>[];
+};
+type OptionalFragment<T extends Artifact<'fragment'>> = {
+  data: DataOf<T> | null;
+};
+type UseFragmentFn = {
+  <T extends Artifact<'fragment'>>(fragment: T, fragmentRef: FragmentRefs<T['name']>[], options?: UseFragmentOptions): FragmentList<T>;
+  <T extends Artifact<'fragment'>>(fragment: T, fragmentRef: FragmentRefs<T['name']>, options?: UseFragmentOptions): Fragment<T>;
+  <T extends Artifact<'fragment'>>(fragment: T, fragmentRef: FragmentRefs<T['name']> | null | undefined, options?: UseFragmentOptions): OptionalFragment<T>;
+};
+declare const useFragment: UseFragmentFn;
+//#endregion
+export { ClientProvider, type DefinedQuery, type Fragment, type FragmentList, type Mutation, type OptionalFragment, type Query, type Subscription, type UseFragmentOptions, type UseMutationOptions, type UseQueryOptions, type UseSubscriptionOptions, useClient, useFragment, useMutation, useQuery, useSubscription };

package/dist/index.d.mts

@@ -0,0 +1,117 @@
+import { AggregatedError, Artifact, Client, DataOf, FragmentOptions, FragmentRefs, MutationOptions, QueryOptions, SchemaMeta, SubscriptionOptions, VariablesOf } from "@mearie/core";
+import { ReactNode } from "react";
+export * from "@mearie/core";
+
+//#region src/client-provider.d.ts
+type ClientProviderProps<TMeta extends SchemaMeta = SchemaMeta> = {
+  client: Client<TMeta>;
+  children: ReactNode;
+};
+declare const ClientProvider: <TMeta extends SchemaMeta = SchemaMeta>({
+  client,
+  children
+}: ClientProviderProps<TMeta>) => ReactNode;
+declare const useClient: <TMeta extends SchemaMeta = SchemaMeta>() => Client<TMeta>;
+//#endregion
+//#region src/use-query.d.ts
+type UseQueryOptions<T extends Artifact<'query'> = Artifact<'query'>> = QueryOptions<T> & {
+  skip?: boolean;
+};
+type Query<T extends Artifact<'query'>> = {
+  data: undefined;
+  loading: true;
+  error: undefined;
+  refetch: () => void;
+} | {
+  data: DataOf<T>;
+  loading: false;
+  error: undefined;
+  refetch: () => void;
+} | {
+  data: DataOf<T> | undefined;
+  loading: false;
+  error: AggregatedError;
+  refetch: () => void;
+};
+type DefinedQuery<T extends Artifact<'query'>> = {
+  data: DataOf<T>;
+  loading: true;
+  error: undefined;
+  refetch: () => void;
+} | {
+  data: DataOf<T>;
+  loading: false;
+  error: undefined;
+  refetch: () => void;
+} | {
+  data: DataOf<T>;
+  loading: false;
+  error: AggregatedError;
+  refetch: () => void;
+};
+type UseQueryFn = {
+  <T extends Artifact<'query'>>(query: T, variables: VariablesOf<T> | undefined, options: UseQueryOptions<T> & {
+    initialData: DataOf<T>;
+  }): DefinedQuery<T>;
+  <T extends Artifact<'query'>>(query: T, ...[variables, options]: VariablesOf<T> extends Record<string, never> ? [undefined?, UseQueryOptions<T>?] : [VariablesOf<T>, UseQueryOptions<T>?]): Query<T>;
+};
+declare const useQuery: UseQueryFn;
+//#endregion
+//#region src/use-subscription.d.ts
+type Subscription<T extends Artifact<'subscription'>> = {
+  data: undefined;
+  loading: true;
+  error: undefined;
+} | {
+  data: DataOf<T> | undefined;
+  loading: false;
+  error: undefined;
+} | {
+  data: DataOf<T> | undefined;
+  loading: false;
+  error: AggregatedError;
+};
+type UseSubscriptionOptions<T extends Artifact<'subscription'>> = SubscriptionOptions & {
+  skip?: boolean;
+  onData?: (data: DataOf<T>) => void;
+  onError?: (error: AggregatedError) => void;
+};
+declare const useSubscription: <T extends Artifact<"subscription">>(subscription: T, ...[variables, options]: VariablesOf<T> extends Record<string, never> ? [undefined?, UseSubscriptionOptions<T>?] : [VariablesOf<T>, UseSubscriptionOptions<T>?]) => Subscription<T>;
+//#endregion
+//#region src/use-mutation.d.ts
+type MutationResult<T extends Artifact<'mutation'>> = {
+  data: undefined;
+  loading: true;
+  error: undefined;
+} | {
+  data: DataOf<T> | undefined;
+  loading: false;
+  error: undefined;
+} | {
+  data: DataOf<T> | undefined;
+  loading: false;
+  error: AggregatedError;
+};
+type UseMutationOptions = MutationOptions;
+type Mutation<T extends Artifact<'mutation'>> = [(...[variables, options]: VariablesOf<T> extends Record<string, never> ? [undefined?, UseMutationOptions?] : [VariablesOf<T>, UseMutationOptions?]) => Promise<DataOf<T>>, MutationResult<T>];
+declare const useMutation: <T extends Artifact<"mutation">>(mutation: T) => Mutation<T>;
+//#endregion
+//#region src/use-fragment.d.ts
+type UseFragmentOptions = FragmentOptions;
+type Fragment<T extends Artifact<'fragment'>> = {
+  data: DataOf<T>;
+};
+type FragmentList<T extends Artifact<'fragment'>> = {
+  data: DataOf<T>[];
+};
+type OptionalFragment<T extends Artifact<'fragment'>> = {
+  data: DataOf<T> | null;
+};
+type UseFragmentFn = {
+  <T extends Artifact<'fragment'>>(fragment: T, fragmentRef: FragmentRefs<T['name']>[], options?: UseFragmentOptions): FragmentList<T>;
+  <T extends Artifact<'fragment'>>(fragment: T, fragmentRef: FragmentRefs<T['name']>, options?: UseFragmentOptions): Fragment<T>;
+  <T extends Artifact<'fragment'>>(fragment: T, fragmentRef: FragmentRefs<T['name']> | null | undefined, options?: UseFragmentOptions): OptionalFragment<T>;
+};
+declare const useFragment: UseFragmentFn;
+//#endregion
+export { ClientProvider, type DefinedQuery, type Fragment, type FragmentList, type Mutation, type OptionalFragment, type Query, type Subscription, type UseFragmentOptions, type UseMutationOptions, type UseQueryOptions, type UseSubscriptionOptions, useClient, useFragment, useMutation, useQuery, useSubscription };

package/dist/index.mjs

@@ -0,0 +1,192 @@
+import { AggregatedError, stringify } from "@mearie/core";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+import { collect, peek, pipe, subscribe, take } from "@mearie/core/stream";
+
+export * from "@mearie/core"
+
+//#region src/client-provider.tsx
+const ClientContext = createContext(null);
+const ClientProvider = ({ client, children }) => {
+	return /* @__PURE__ */ jsx(ClientContext.Provider, {
+		value: client,
+		children
+	});
+};
+const useClient = () => {
+	const client = useContext(ClientContext);
+	if (!client) throw new Error("useClient must be used within ClientProvider");
+	return client;
+};
+
+//#endregion
+//#region src/use-query.ts
+const useQuery = ((query, variables, options) => {
+	const client = useClient();
+	const [data, setData] = useState(options?.initialData);
+	const [loading, setLoading] = useState(!options?.skip && !options?.initialData);
+	const [error, setError] = useState();
+	const unsubscribe = useRef(null);
+	const initialized = useRef(false);
+	const stableVariables = useMemo(() => stringify(variables), [variables]);
+	const stableOptions = useMemo(() => options, [options?.skip]);
+	const execute = useCallback(() => {
+		unsubscribe.current?.();
+		if (stableOptions?.skip) return;
+		if (!initialized.current && options?.initialData) setLoading(true);
+		initialized.current = true;
+		setError(void 0);
+		unsubscribe.current = pipe(client.executeQuery(query, variables, stableOptions), subscribe({ next: (result) => {
+			if (result.errors && result.errors.length > 0) {
+				setError(new AggregatedError(result.errors));
+				setLoading(false);
+			} else {
+				setData(result.data);
+				setLoading(false);
+				setError(void 0);
+			}
+		} }));
+	}, [
+		client,
+		query,
+		stableVariables,
+		stableOptions
+	]);
+	useEffect(() => {
+		execute();
+		return () => unsubscribe.current?.();
+	}, [execute]);
+	return {
+		data,
+		loading,
+		error,
+		refetch: execute
+	};
+});
+
+//#endregion
+//#region src/use-subscription.ts
+const useSubscription = (subscription, ...[variables, options]) => {
+	const client = useClient();
+	const [data, setData] = useState();
+	const [loading, setLoading] = useState(!options?.skip);
+	const [error, setError] = useState();
+	const unsubscribe = useRef(null);
+	const stableVariables = useMemo(() => stringify(variables), [variables]);
+	const stableOptions = useMemo(() => options, [
+		options?.skip,
+		options?.onData,
+		options?.onError
+	]);
+	const execute = useCallback(() => {
+		unsubscribe.current?.();
+		if (stableOptions?.skip) return;
+		setLoading(true);
+		setError(void 0);
+		unsubscribe.current = pipe(client.executeSubscription(subscription, variables, stableOptions), subscribe({ next: (result) => {
+			if (result.errors && result.errors.length > 0) {
+				const err = new AggregatedError(result.errors);
+				setError(err);
+				setLoading(false);
+				stableOptions?.onError?.(err);
+			} else {
+				const resultData = result.data;
+				setData(resultData);
+				setLoading(false);
+				setError(void 0);
+				stableOptions?.onData?.(resultData);
+			}
+		} }));
+	}, [
+		client,
+		subscription,
+		stableVariables,
+		stableOptions
+	]);
+	useEffect(() => {
+		execute();
+		return () => unsubscribe.current?.();
+	}, [execute]);
+	return {
+		data,
+		loading,
+		error
+	};
+};
+
+//#endregion
+//#region src/use-mutation.ts
+const useMutation = (mutation) => {
+	const client = useClient();
+	const [data, setData] = useState();
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState();
+	return [useCallback(async (variables, options) => {
+		setLoading(true);
+		setError(void 0);
+		try {
+			const result = await pipe(client.executeMutation(mutation, variables, options), take(1), collect);
+			if (result.errors && result.errors.length > 0) {
+				const err = new AggregatedError(result.errors);
+				setError(err);
+				setLoading(false);
+				throw err;
+			}
+			setData(result.data);
+			setLoading(false);
+			return result.data;
+		} catch (err) {
+			if (err instanceof AggregatedError) setError(err);
+			setLoading(false);
+			throw err;
+		}
+	}, [client, mutation]), {
+		data,
+		loading,
+		error
+	}];
+};
+
+//#endregion
+//#region src/use-fragment.ts
+const useFragment = ((fragment, fragmentRef, options) => {
+	const client = useClient();
+	const dataRef = useRef(void 0);
+	const subscribe_ = useCallback((onChange) => {
+		if (fragmentRef == null) {
+			dataRef.current = null;
+			return () => {};
+		}
+		return pipe(client.executeFragment(fragment, fragmentRef, options), subscribe({ next: (result) => {
+			if (result.errors && result.errors.length > 0) throw new AggregatedError(result.errors);
+			dataRef.current = result.data;
+			onChange();
+		} }));
+	}, [
+		client,
+		fragment,
+		fragmentRef,
+		options
+	]);
+	const snapshot = useCallback(() => {
+		if (fragmentRef == null) return null;
+		if (dataRef.current === void 0) {
+			const result = pipe(client.executeFragment(fragment, fragmentRef, options), peek);
+			if (result.errors && result.errors.length > 0) throw new AggregatedError(result.errors);
+			dataRef.current = result.data;
+		}
+		return dataRef.current;
+	}, [
+		client,
+		fragment,
+		fragmentRef,
+		options
+	]);
+	const data = useSyncExternalStore(subscribe_, snapshot, snapshot);
+	return { get data() {
+		return data;
+	} };
+});
+
+//#endregion
+export { ClientProvider, useClient, useFragment, useMutation, useQuery, useSubscription };

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@mearie/react",
+  "version": "0.0.0-next-20260228035926",
+  "description": "Type-safe, zero-overhead GraphQL client",
+  "keywords": [
+    "graphql",
+    "graphql-client",
+    "typescript",
+    "codegen",
+    "cache"
+  ],
+  "homepage": "https://github.com/devunt/mearie#readme",
+  "bugs": {
+    "url": "https://github.com/devunt/mearie/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/devunt/mearie.git",
+    "directory": "packages/react"
+  },
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/devunt"
+  },
+  "license": "MIT",
+  "author": "Bae Junehyeon <finn@penxle.io>",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "package.json",
+    "README.md"
+  ],
+  "dependencies": {
+    "@mearie/core": "0.0.0-next-20260228035926"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "react": "^19.2.4",
+    "tsdown": "^0.20.3",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "engines": {
+    "bun": ">=1.2.0",
+    "deno": ">=2.2.0",
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "typecheck": "tsc"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts"
+}