@mearie/react 0.0.1-next.3 → 0.0.1-next.5

package/README.md

@@ -2,34 +2,48 @@
 
 React bindings for Mearie GraphQL client.
 
-This package provides React hooks and components for using Mearie in React
-applications.
+This package provides React hooks, components, and the GraphQL client runtime
+for using Mearie in React applications.
 
 ## Installation
 
 ```bash
-npm install mearie @mearie/react
+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
-import { createClient, httpLink, cacheLink, graphql } from 'mearie';
-import { ClientProvider, useQuery } from '@mearie/react';
+// src/App.tsx
+import { createClient, httpLink, cacheLink, ClientProvider } from '@mearie/react';
 
 const client = createClient({
   links: [cacheLink(), httpLink({ url: 'https://api.example.com/graphql' })],
 });
 
 function App() {
-  return (
-    <ClientProvider client={client}>
-      <UserProfile userId="1" />
-    </ClientProvider>
-  );
+  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 }: { userId: string }) {
+function UserProfile({ userId }: UserProfileProps) {
   const { data, loading } = useQuery(
     graphql(`
       query GetUser($id: ID!) {

package/dist/index.cjs

@@ -21,10 +21,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 }) : target, mod));
 
 //#endregion
+let __mearie_core = require("@mearie/core");
+__mearie_core = __toESM(__mearie_core);
 let react = require("react");
 react = __toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = __toESM(react_jsx_runtime);
+let __mearie_core_stream = require("@mearie/core/stream");
+__mearie_core_stream = __toESM(__mearie_core_stream);
 
 //#region src/client-provider.tsx
 const ClientContext = (0, react.createContext)(null);
@@ -42,39 +46,164 @@ const useClient = () => {
 
 //#endregion
 //#region src/use-query.ts
-const useQuery = (document, variables) => {
+const useQuery = (query, ...[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]);
+	const execute = (0, react.useCallback)(() => {
+		unsubscribe.current?.();
+		if (stableOptions?.skip) return;
+		setLoading(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: void 0,
-		loading: true,
-		error: void 0,
-		refetch: () => {}
+		data,
+		loading,
+		error,
+		refetch: execute
 	};
 };
 
 //#endregion
 //#region src/use-subscription.ts
-const useSubscription = (document, variables, options) => {
+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: void 0,
-		loading: true,
-		error: void 0
+		data,
+		loading,
+		error
 	};
 };
 
 //#endregion
 //#region src/use-mutation.ts
-const useMutation = (document) => {
-	return [async () => ({}), {
-		data: void 0,
-		loading: false,
-		error: void 0
+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), __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 = (document, fragmentRef) => {
-	return {};
+const useFragment = (fragment, fragmentRef, options) => {
+	const client = useClient();
+	const dataRef = (0, react.useRef)(void 0);
+	const subscribe_ = (0, react.useCallback)((onChange) => {
+		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 (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
@@ -83,4 +212,10 @@ exports.useClient = useClient;
 exports.useFragment = useFragment;
 exports.useMutation = useMutation;
 exports.useQuery = useQuery;
-exports.useSubscription = useSubscription;
+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

@@ -1,75 +1,84 @@
+import { AggregatedError, Artifact, Client, DataOf, FragmentOptions, FragmentRefs, MutationOptions, QueryOptions, SchemaMeta, SubscriptionOptions, VariablesOf } from "@mearie/core";
 import { ReactNode } from "react";
-import { Client, DataOf, DocumentNode, FragmentRef, VariablesOf } from "@mearie/core";
+export * from "@mearie/core";
 
 //#region src/client-provider.d.ts
-type ClientProviderProps = {
-  client: Client;
+type ClientProviderProps<TMeta extends SchemaMeta = SchemaMeta> = {
+  client: Client<TMeta>;
   children: ReactNode;
 };
-declare const ClientProvider: ({
+declare const ClientProvider: <TMeta extends SchemaMeta = SchemaMeta>({
   client,
   children
-}: ClientProviderProps) => ReactNode;
-declare const useClient: () => Client;
+}: ClientProviderProps<TMeta>) => ReactNode;
+declare const useClient: <TMeta extends SchemaMeta = SchemaMeta>() => Client<TMeta>;
 //#endregion
 //#region src/use-query.d.ts
-type UseQueryReturn<Document$1 extends DocumentNode> = {
+type Query<T extends Artifact<'query'>> = {
   data: undefined;
   loading: true;
   error: undefined;
   refetch: () => void;
 } | {
-  data: DataOf<Document$1>;
+  data: DataOf<T>;
   loading: false;
   error: undefined;
   refetch: () => void;
 } | {
-  data: DataOf<Document$1> | undefined;
+  data: DataOf<T> | undefined;
   loading: false;
-  error: Error;
+  error: AggregatedError;
   refetch: () => void;
 };
-declare const useQuery: <Document extends DocumentNode>(document: Document, variables: VariablesOf<Document>) => UseQueryReturn<Document>;
+type UseQueryOptions = QueryOptions & {
+  skip?: boolean;
+};
+declare const useQuery: <T extends Artifact<"query">>(query: T, ...[variables, options]: VariablesOf<T> extends undefined ? [undefined?, UseQueryOptions?] : [VariablesOf<T>, UseQueryOptions?]) => Query<T>;
 //#endregion
 //#region src/use-subscription.d.ts
-type UseSubscriptionReturn<Document$1 extends DocumentNode> = {
+type Subscription<T extends Artifact<'subscription'>> = {
   data: undefined;
   loading: true;
   error: undefined;
 } | {
-  data: DataOf<Document$1>;
+  data: DataOf<T> | undefined;
   loading: false;
   error: undefined;
 } | {
-  data: DataOf<Document$1> | undefined;
+  data: DataOf<T> | undefined;
   loading: false;
-  error: Error;
+  error: AggregatedError;
 };
-type UseSubscriptionOptions<Document$1 extends DocumentNode> = {
-  onData?: (data: DataOf<Document$1>) => void;
-  onError?: (error: Error) => void;
+type UseSubscriptionOptions<T extends Artifact<'subscription'>> = SubscriptionOptions & {
+  skip?: boolean;
+  onData?: (data: DataOf<T>) => void;
+  onError?: (error: AggregatedError) => void;
 };
-declare const useSubscription: <Document extends DocumentNode>(document: Document, variables: VariablesOf<Document>, options?: UseSubscriptionOptions<Document>) => UseSubscriptionReturn<Document>;
+declare const useSubscription: <T extends Artifact<"subscription">>(subscription: T, ...[variables, options]: VariablesOf<T> extends undefined ? [undefined?, UseSubscriptionOptions<T>?] : [VariablesOf<T>, UseSubscriptionOptions<T>?]) => Subscription<T>;
 //#endregion
 //#region src/use-mutation.d.ts
-type UseMutationResult<Document$1 extends DocumentNode> = {
+type MutationResult<T extends Artifact<'mutation'>> = {
   data: undefined;
   loading: true;
   error: undefined;
 } | {
-  data: DataOf<Document$1>;
+  data: DataOf<T> | undefined;
   loading: false;
   error: undefined;
 } | {
-  data: DataOf<Document$1> | undefined;
+  data: DataOf<T> | undefined;
   loading: false;
-  error: Error;
+  error: AggregatedError;
 };
-type UseMutationReturn<Document$1 extends DocumentNode> = [(variables: VariablesOf<Document$1>) => Promise<DataOf<Document$1>>, UseMutationResult<Document$1>];
-declare const useMutation: <Document extends DocumentNode>(document: Document) => UseMutationReturn<Document>;
+type UseMutationOptions = MutationOptions;
+type Mutation<T extends Artifact<'mutation'>> = [(...[variables, options]: VariablesOf<T> extends undefined ? [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 UseFragmentReturn<Document$1 extends DocumentNode> = DataOf<Document$1>;
-declare const useFragment: <Document extends DocumentNode>(document: Document, fragmentRef: FragmentRef<Document>) => UseFragmentReturn<Document>;
+type UseFragmentOptions = FragmentOptions;
+type Fragment<T extends Artifact<'fragment'>> = {
+  data: DataOf<T>;
+};
+declare const useFragment: <T extends Artifact<"fragment">>(fragment: T, fragmentRef: FragmentRefs<T["name"]>, options?: UseFragmentOptions) => Fragment<T>;
 //#endregion
-export { ClientProvider, type UseFragmentReturn, type UseMutationResult, type UseMutationReturn, type UseQueryReturn, type UseSubscriptionOptions, type UseSubscriptionReturn, useClient, useFragment, useMutation, useQuery, useSubscription };
+export { ClientProvider, type Fragment, type Mutation, type Query, type Subscription, type UseFragmentOptions, type UseMutationOptions, type UseQueryOptions, type UseSubscriptionOptions, useClient, useFragment, useMutation, useQuery, useSubscription };

package/dist/index.d.ts

@@ -1,75 +1,84 @@
+import { AggregatedError, Artifact, Client, DataOf, FragmentOptions, FragmentRefs, MutationOptions, QueryOptions, SchemaMeta, SubscriptionOptions, VariablesOf } from "@mearie/core";
 import { ReactNode } from "react";
-import { Client, DataOf, DocumentNode, FragmentRef, VariablesOf } from "@mearie/core";
+export * from "@mearie/core";
 
 //#region src/client-provider.d.ts
-type ClientProviderProps = {
-  client: Client;
+type ClientProviderProps<TMeta extends SchemaMeta = SchemaMeta> = {
+  client: Client<TMeta>;
   children: ReactNode;
 };
-declare const ClientProvider: ({
+declare const ClientProvider: <TMeta extends SchemaMeta = SchemaMeta>({
   client,
   children
-}: ClientProviderProps) => ReactNode;
-declare const useClient: () => Client;
+}: ClientProviderProps<TMeta>) => ReactNode;
+declare const useClient: <TMeta extends SchemaMeta = SchemaMeta>() => Client<TMeta>;
 //#endregion
 //#region src/use-query.d.ts
-type UseQueryReturn<Document$1 extends DocumentNode> = {
+type Query<T extends Artifact<'query'>> = {
   data: undefined;
   loading: true;
   error: undefined;
   refetch: () => void;
 } | {
-  data: DataOf<Document$1>;
+  data: DataOf<T>;
   loading: false;
   error: undefined;
   refetch: () => void;
 } | {
-  data: DataOf<Document$1> | undefined;
+  data: DataOf<T> | undefined;
   loading: false;
-  error: Error;
+  error: AggregatedError;
   refetch: () => void;
 };
-declare const useQuery: <Document extends DocumentNode>(document: Document, variables: VariablesOf<Document>) => UseQueryReturn<Document>;
+type UseQueryOptions = QueryOptions & {
+  skip?: boolean;
+};
+declare const useQuery: <T extends Artifact<"query">>(query: T, ...[variables, options]: VariablesOf<T> extends undefined ? [undefined?, UseQueryOptions?] : [VariablesOf<T>, UseQueryOptions?]) => Query<T>;
 //#endregion
 //#region src/use-subscription.d.ts
-type UseSubscriptionReturn<Document$1 extends DocumentNode> = {
+type Subscription<T extends Artifact<'subscription'>> = {
   data: undefined;
   loading: true;
   error: undefined;
 } | {
-  data: DataOf<Document$1>;
+  data: DataOf<T> | undefined;
   loading: false;
   error: undefined;
 } | {
-  data: DataOf<Document$1> | undefined;
+  data: DataOf<T> | undefined;
   loading: false;
-  error: Error;
+  error: AggregatedError;
 };
-type UseSubscriptionOptions<Document$1 extends DocumentNode> = {
-  onData?: (data: DataOf<Document$1>) => void;
-  onError?: (error: Error) => void;
+type UseSubscriptionOptions<T extends Artifact<'subscription'>> = SubscriptionOptions & {
+  skip?: boolean;
+  onData?: (data: DataOf<T>) => void;
+  onError?: (error: AggregatedError) => void;
 };
-declare const useSubscription: <Document extends DocumentNode>(document: Document, variables: VariablesOf<Document>, options?: UseSubscriptionOptions<Document>) => UseSubscriptionReturn<Document>;
+declare const useSubscription: <T extends Artifact<"subscription">>(subscription: T, ...[variables, options]: VariablesOf<T> extends undefined ? [undefined?, UseSubscriptionOptions<T>?] : [VariablesOf<T>, UseSubscriptionOptions<T>?]) => Subscription<T>;
 //#endregion
 //#region src/use-mutation.d.ts
-type UseMutationResult<Document$1 extends DocumentNode> = {
+type MutationResult<T extends Artifact<'mutation'>> = {
   data: undefined;
   loading: true;
   error: undefined;
 } | {
-  data: DataOf<Document$1>;
+  data: DataOf<T> | undefined;
   loading: false;
   error: undefined;
 } | {
-  data: DataOf<Document$1> | undefined;
+  data: DataOf<T> | undefined;
   loading: false;
-  error: Error;
+  error: AggregatedError;
 };
-type UseMutationReturn<Document$1 extends DocumentNode> = [(variables: VariablesOf<Document$1>) => Promise<DataOf<Document$1>>, UseMutationResult<Document$1>];
-declare const useMutation: <Document extends DocumentNode>(document: Document) => UseMutationReturn<Document>;
+type UseMutationOptions = MutationOptions;
+type Mutation<T extends Artifact<'mutation'>> = [(...[variables, options]: VariablesOf<T> extends undefined ? [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 UseFragmentReturn<Document$1 extends DocumentNode> = DataOf<Document$1>;
-declare const useFragment: <Document extends DocumentNode>(document: Document, fragmentRef: FragmentRef<Document>) => UseFragmentReturn<Document>;
+type UseFragmentOptions = FragmentOptions;
+type Fragment<T extends Artifact<'fragment'>> = {
+  data: DataOf<T>;
+};
+declare const useFragment: <T extends Artifact<"fragment">>(fragment: T, fragmentRef: FragmentRefs<T["name"]>, options?: UseFragmentOptions) => Fragment<T>;
 //#endregion
-export { ClientProvider, type UseFragmentReturn, type UseMutationResult, type UseMutationReturn, type UseQueryReturn, type UseSubscriptionOptions, type UseSubscriptionReturn, useClient, useFragment, useMutation, useQuery, useSubscription };
+export { ClientProvider, type Fragment, type Mutation, type Query, type Subscription, type UseFragmentOptions, type UseMutationOptions, type UseQueryOptions, type UseSubscriptionOptions, useClient, useFragment, useMutation, useQuery, useSubscription };

package/dist/index.js

@@ -1,5 +1,9 @@
-import { createContext, useContext } from "react";
+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 } from "@mearie/core/stream";
+
+export * from "@mearie/core"
 
 //#region src/client-provider.tsx
 const ClientContext = createContext(null);
@@ -17,39 +21,164 @@ const useClient = () => {
 
 //#endregion
 //#region src/use-query.ts
-const useQuery = (document, variables) => {
+const useQuery = (query, ...[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]);
+	const execute = useCallback(() => {
+		unsubscribe.current?.();
+		if (stableOptions?.skip) return;
+		setLoading(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: void 0,
-		loading: true,
-		error: void 0,
-		refetch: () => {}
+		data,
+		loading,
+		error,
+		refetch: execute
 	};
 };
 
 //#endregion
 //#region src/use-subscription.ts
-const useSubscription = (document, variables, options) => {
+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: void 0,
-		loading: true,
-		error: void 0
+		data,
+		loading,
+		error
 	};
 };
 
 //#endregion
 //#region src/use-mutation.ts
-const useMutation = (document) => {
-	return [async () => ({}), {
-		data: void 0,
-		loading: false,
-		error: void 0
+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), 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 = (document, fragmentRef) => {
-	return {};
+const useFragment = (fragment, fragmentRef, options) => {
+	const client = useClient();
+	const dataRef = useRef(void 0);
+	const subscribe_ = useCallback((onChange) => {
+		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 (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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mearie/react",
-  "version": "0.0.1-next.3",
+  "version": "0.0.1-next.5",
   "description": "Type-safe, zero-overhead GraphQL client",
   "keywords": [
     "graphql",
@@ -26,19 +26,27 @@
   "author": "Bae Junehyeon <finn@penxle.io>",
   "sideEffects": false,
   "type": "module",
-  "main": "./dist/index.cjs",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
   "files": [
     "dist",
     "package.json",
     "README.md"
   ],
   "dependencies": {
-    "@mearie/core": "0.0.1-next.3"
+    "@mearie/core": "0.0.1-next.5"
   },
   "devDependencies": {
     "@types/react": "^19.2.2",
     "react": "^19.2.0",
-    "tsdown": "^0.15.8"
+    "tsdown": "^0.15.12",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"
@@ -52,16 +60,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsdown"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    },
-    "./package.json": "./package.json"
+    "build": "tsdown",
+    "typecheck": "tsc"
   },
+  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts"
 }