@sylphx/lens-react 2.0.2 → 2.1.0

package/dist/index.d.ts

@@ -44,7 +44,7 @@ declare function LensProvider({ client, children }: LensProviderProps): ReactEle
 * ```
 */
 declare function useLensClient<TRouter = any>(): LensClient<any, any> & TRouter;
-import { MutationResult, QueryResult } from "@sylphx/lens-client";
+import { LensClient as LensClient2, MutationResult, QueryResult } from "@sylphx/lens-client";
 import { DependencyList } from "react";
 /** Result of useQuery hook */
 interface UseQueryResult<T> {
@@ -83,39 +83,44 @@ interface UseQueryOptions<
 	/** Transform the query result */
 	select?: (data: TData) => TSelected;
 }
-/** Route function type - takes params and returns QueryResult */
-type RouteFunction<
+/** Client type for callbacks */
+type Client = LensClient2<any, any>;
+/** Route selector - callback that returns a route function */
+type RouteSelector<
 	TParams,
 	TResult
-> = (params: TParams) => QueryResult<TResult>;
-/** Accessor function type - returns QueryResult or null */
-type QueryAccessor<T> = () => QueryResult<T> | null | undefined;
-/** Mutation function type */
-type MutationFn<
+> = (client: Client) => ((params: TParams) => QueryResult<TResult>) | null;
+/** Query accessor selector - callback that returns QueryResult */
+type QuerySelector<TResult> = (client: Client) => QueryResult<TResult> | null | undefined;
+/** Mutation selector - callback that returns mutation function */
+type MutationSelector<
 	TInput,
 	TOutput
-> = (input: TInput) => Promise<MutationResult<TOutput>>;
+> = (client: Client) => (input: TInput) => Promise<MutationResult<TOutput>>;
 /**
 * Subscribe to a query with reactive updates.
+* Client is automatically injected from LensProvider context.
 *
 * Two usage patterns:
 *
 * **1. Route + Params (recommended)** - Stable references, no infinite loops
 * ```tsx
-* const { data } = useQuery(client.user.get, { id: userId });
+* const { data } = useQuery((client) => client.user.get, { id: userId });
 * ```
 *
 * **2. Accessor + Deps (escape hatch)** - For complex/composed queries
 * ```tsx
-* const { data } = useQuery(() => client.user.get({ id }).pipe(transform), [id]);
+* const { data } = useQuery((client) => client.user.get({ id }), [id]);
 * ```
 *
 * @example
 * ```tsx
 * // Basic usage - Route + Params
 * function UserProfile({ userId }: { userId: string }) {
-*   const client = useLensClient();
-*   const { data: user, loading, error } = useQuery(client.user.get, { id: userId });
+*   const { data: user, loading, error } = useQuery(
+*     (client) => client.user.get,
+*     { id: userId }
+*   );
 *
 *   if (loading) return <Spinner />;
 *   if (error) return <Error message={error.message} />;
@@ -124,34 +129,36 @@ type MutationFn<
 *
 * // With select transform
 * function UserName({ userId }: { userId: string }) {
-*   const client = useLensClient();
-*   const { data: name } = useQuery(client.user.get, { id: userId }, {
-*     select: (user) => user.name
-*   });
+*   const { data: name } = useQuery(
+*     (client) => client.user.get,
+*     { id: userId },
+*     { select: (user) => user.name }
+*   );
 *   return <span>{name}</span>;
 * }
 *
-* // Conditional query
+* // Conditional query (return null to skip)
 * function SessionInfo({ sessionId }: { sessionId: string | null }) {
-*   const client = useLensClient();
 *   const { data } = useQuery(
-*     sessionId ? client.session.get : null,
+*     (client) => sessionId ? client.session.get : null,
 *     { id: sessionId ?? '' }
 *   );
 *   return <span>{data?.totalTokens}</span>;
 * }
 *
-* // Skip query
+* // Skip query with option
 * function ConditionalQuery({ userId, shouldFetch }: { userId: string; shouldFetch: boolean }) {
-*   const client = useLensClient();
-*   const { data } = useQuery(client.user.get, { id: userId }, { skip: !shouldFetch });
+*   const { data } = useQuery(
+*     (client) => client.user.get,
+*     { id: userId },
+*     { skip: !shouldFetch }
+*   );
 * }
 *
 * // Complex queries with accessor (escape hatch)
 * function ComplexQuery({ userId }: { userId: string }) {
-*   const client = useLensClient();
 *   const { data } = useQuery(
-*     () => client.user.get({ id: userId }),
+*     (client) => client.user.get({ id: userId }),
 *     [userId]
 *   );
 * }
@@ -161,21 +168,23 @@ declare function useQuery<
 	TParams,
 	TResult,
 	TSelected = TResult
->(route: RouteFunction<TParams, TResult> | null, params: TParams, options?: UseQueryOptions<TResult, TSelected>): UseQueryResult<TSelected>;
+>(selector: RouteSelector<TParams, TResult>, params: TParams, options?: UseQueryOptions<TResult, TSelected>): UseQueryResult<TSelected>;
 declare function useQuery<
 	TResult,
 	TSelected = TResult
->(accessor: QueryAccessor<TResult>, deps: DependencyList, options?: UseQueryOptions<TResult, TSelected>): UseQueryResult<TSelected>;
+>(selector: QuerySelector<TResult>, deps: DependencyList, options?: UseQueryOptions<TResult, TSelected>): UseQueryResult<TSelected>;
 /**
-* Execute mutations with loading/error state
+* Execute mutations with loading/error state.
+* Client is automatically injected from LensProvider context.
 *
-* @param mutationFn - Mutation function from client API
+* @param selector - Callback that returns mutation function from client
 *
 * @example
 * \`\`\`tsx
 * function CreatePost() {
-*   const client = useLensClient();
-*   const { mutate, loading, error, data } = useMutation(client.post.create);
+*   const { mutate, loading, error, data } = useMutation(
+*     (client) => client.post.create
+*   );
 *
 *   const handleSubmit = async (formData: FormData) => {
 *     try {
@@ -201,8 +210,7 @@ declare function useQuery<
 *
 * // With optimistic updates
 * function UpdatePost({ postId }: { postId: string }) {
-*   const client = useLensClient();
-*   const { mutate } = useMutation(client.post.update);
+*   const { mutate } = useMutation((client) => client.post.update);
 *
 *   const handleUpdate = async (title: string) => {
 *     const result = await mutate({ id: postId, title });
@@ -214,7 +222,7 @@ declare function useQuery<
 declare function useMutation<
 	TInput,
 	TOutput
->(mutationFn: MutationFn<TInput, TOutput>): UseMutationResult<TInput, TOutput>;
+>(selector: MutationSelector<TInput, TOutput>): UseMutationResult<TInput, TOutput>;
 /** Result of useLazyQuery hook */
 interface UseLazyQueryResult<T> {
 	/** Execute the query */
@@ -229,16 +237,16 @@ interface UseLazyQueryResult<T> {
 	reset: () => void;
 }
 /**
-* Execute a query on demand (not on mount)
+* Execute a query on demand (not on mount).
+* Client is automatically injected from LensProvider context.
 *
 * @example
 * ```tsx
 * // Route + Params pattern
 * function SearchUsers() {
-*   const client = useLensClient();
 *   const [searchTerm, setSearchTerm] = useState('');
 *   const { execute, data, loading } = useLazyQuery(
-*     client.user.search,
+*     (client) => client.user.search,
 *     { query: searchTerm }
 *   );
 *
@@ -253,9 +261,8 @@ interface UseLazyQueryResult<T> {
 *
 * // Accessor pattern
 * function LazyComplexQuery({ userId }: { userId: string }) {
-*   const client = useLensClient();
 *   const { execute, data } = useLazyQuery(
-*     () => client.user.get({ id: userId }),
+*     (client) => client.user.get({ id: userId }),
 *     [userId]
 *   );
 *   return <button onClick={execute}>Load</button>;
@@ -266,9 +273,9 @@ declare function useLazyQuery<
 	TParams,
 	TResult,
 	TSelected = TResult
->(route: RouteFunction<TParams, TResult> | null, params: TParams, options?: UseQueryOptions<TResult, TSelected>): UseLazyQueryResult<TSelected>;
+>(selector: RouteSelector<TParams, TResult>, params: TParams, options?: UseQueryOptions<TResult, TSelected>): UseLazyQueryResult<TSelected>;
 declare function useLazyQuery<
 	TResult,
 	TSelected = TResult
->(accessor: QueryAccessor<TResult>, deps: DependencyList, options?: UseQueryOptions<TResult, TSelected>): UseLazyQueryResult<TSelected>;
-export { useQuery, useMutation, useLensClient, useLazyQuery, UseQueryResult, UseQueryOptions, UseMutationResult, UseLazyQueryResult, RouteFunction, QueryAccessor, MutationFn, LensProviderProps, LensProvider };
+>(selector: QuerySelector<TResult>, deps: DependencyList, options?: UseQueryOptions<TResult, TSelected>): UseLazyQueryResult<TSelected>;
+export { useQuery, useMutation, useLensClient, useLazyQuery, UseQueryResult, UseQueryOptions, UseMutationResult, UseLazyQueryResult, RouteSelector, QuerySelector, MutationSelector, LensProviderProps, LensProvider };

package/dist/index.js

@@ -17,21 +17,23 @@ function useLensClient() {
 }
 // src/hooks.ts
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-function useQuery(routeOrAccessor, paramsOrDeps, options) {
+function useQuery(selector, paramsOrDeps, options) {
+  const client = useLensClient();
   const isAccessorMode = Array.isArray(paramsOrDeps);
   const paramsKey = !isAccessorMode ? JSON.stringify(paramsOrDeps) : null;
   const query = useMemo(() => {
     if (options?.skip)
       return null;
     if (isAccessorMode) {
-      const accessor = routeOrAccessor;
-      return accessor();
+      const querySelector = selector;
+      return querySelector(client);
     }
-    if (!routeOrAccessor)
+    const routeSelector = selector;
+    const route = routeSelector(client);
+    if (!route)
       return null;
-    const route = routeOrAccessor;
     return route(paramsOrDeps);
-  }, isAccessorMode ? [options?.skip, ...paramsOrDeps] : [routeOrAccessor, paramsKey, options?.skip]);
+  }, isAccessorMode ? [client, options?.skip, ...paramsOrDeps] : [client, selector, paramsKey, options?.skip]);
   const selectRef = useRef(options?.select);
   selectRef.current = options?.select;
   const [data, setData] = useState(null);
@@ -53,15 +55,19 @@ function useQuery(routeOrAccessor, paramsOrDeps, options) {
     }
     setLoading(true);
     setError(null);
+    let hasReceivedData = false;
     const unsubscribe = query.subscribe((value) => {
       if (mountedRef.current) {
+        hasReceivedData = true;
         setData(transform(value));
         setLoading(false);
       }
     });
     query.then((value) => {
-      if (mountedRef.current) {
+      if (mountedRef.current && !hasReceivedData) {
         setData(transform(value));
+      }
+      if (mountedRef.current) {
         setLoading(false);
       }
     }, (err) => {
@@ -95,11 +101,15 @@ function useQuery(routeOrAccessor, paramsOrDeps, options) {
   }, [transform]);
   return { data, loading, error, refetch };
 }
-function useMutation(mutationFn) {
+function useMutation(selector) {
+  const client = useLensClient();
+  const mutationFn = selector(client);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [data, setData] = useState(null);
   const mountedRef = useRef(true);
+  const mutationRef = useRef(mutationFn);
+  mutationRef.current = mutationFn;
   useEffect(() => {
     mountedRef.current = true;
     return () => {
@@ -110,7 +120,7 @@ function useMutation(mutationFn) {
     setLoading(true);
     setError(null);
     try {
-      const result = await mutationFn(input);
+      const result = await mutationRef.current(input);
       if (mountedRef.current) {
         setData(result.data);
       }
@@ -126,7 +136,7 @@ function useMutation(mutationFn) {
         setLoading(false);
       }
     }
-  }, [mutationFn]);
+  }, []);
   const reset = useCallback(() => {
     setLoading(false);
     setError(null);
@@ -134,14 +144,15 @@ function useMutation(mutationFn) {
   }, []);
   return { mutate, loading, error, data, reset };
 }
-function useLazyQuery(routeOrAccessor, paramsOrDeps, options) {
+function useLazyQuery(selector, paramsOrDeps, options) {
+  const client = useLensClient();
   const [data, setData] = useState(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const mountedRef = useRef(true);
   const isAccessorMode = Array.isArray(paramsOrDeps);
-  const routeOrAccessorRef = useRef(routeOrAccessor);
-  routeOrAccessorRef.current = routeOrAccessor;
+  const selectorRef = useRef(selector);
+  selectorRef.current = selector;
   const paramsOrDepsRef = useRef(paramsOrDeps);
   paramsOrDepsRef.current = paramsOrDeps;
   const selectRef = useRef(options?.select);
@@ -155,10 +166,11 @@ function useLazyQuery(routeOrAccessor, paramsOrDeps, options) {
   const execute = useCallback(async () => {
     let query;
     if (isAccessorMode) {
-      const accessor = routeOrAccessorRef.current;
-      query = accessor();
+      const querySelector = selectorRef.current;
+      query = querySelector(client);
     } else {
-      const route = routeOrAccessorRef.current;
+      const routeSelector = selectorRef.current;
+      const route = routeSelector(client);
       if (route) {
         query = route(paramsOrDepsRef.current);
       }
@@ -188,7 +200,7 @@ function useLazyQuery(routeOrAccessor, paramsOrDeps, options) {
         setLoading(false);
       }
     }
-  }, [isAccessorMode]);
+  }, [client, isAccessorMode]);
   const reset = useCallback(() => {
     setLoading(false);
     setError(null);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sylphx/lens-react",
-	"version": "2.0.2",
+	"version": "2.1.0",
 	"description": "React bindings for Lens API framework",
 	"type": "module",
 	"main": "./dist/index.js",