madapes
Repositories
7
 Projects Packages

@aurora/codegen-react (0.3.3)

Published 2025-12-27 10:44:48 +00:00 by vlad

Installation

@aurora:registry=
npm install @aurora/codegen-react@0.3.3
"@aurora/codegen-react": "0.3.3"

About this package

@aurora/codegen-react

React hooks generator for Aurora - generates useQuery and useMutation hooks from API schemas.

Overview

Generates type-safe React hooks for Aurora API routes:

  • Query hooks for GET requests (auto-fetch on mount)
  • Mutation hooks for POST/PUT/DELETE/PATCH (manual trigger)
  • Global configuration for client
  • Request cancellation support
  • Loading, error, and data state management

Installation

bun add -D @aurora/codegen-react

Usage

Generated via @aurora/codegen:

aurora codegen

Generated Hooks

Query Hooks (GET)

Auto-fetch data on component mount:

// generated/hooks/index.ts
export function useGetOrder(
  params: GetOrderParams,
  options?: QueryOptions<GetOrderResponse>
) {
  const [data, setData] = useState<GetOrderResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    if (!options?.enabled) return;
    
    let cancelled = false;
    
    const fetchData = async () => {
      setLoading(true);
      setError(null);
      
      try {
        const client = getAuroraClient();
        const result = await client.getOrder(params);
        
        if (!cancelled) {
          setData(result);
          options?.onSuccess?.(result);
        }
      } catch (err) {
        if (!cancelled) {
          setError(err as Error);
          options?.onError?.(err as Error);
        }
      } finally {
        if (!cancelled) {
          setLoading(false);
        }
      }
    };
    
    fetchData();
    
    // Refetch interval
    const interval = options?.refetchInterval
      ? setInterval(fetchData, options.refetchInterval)
      : undefined;
    
    return () => {
      cancelled = true;
      if (interval) clearInterval(interval);
    };
  }, [params.orderId, options?.enabled, options?.refetchInterval]);

  const refetch = useCallback(() => {
    setLoading(true);
    setError(null);
    
    const client = getAuroraClient();
    client.getOrder(params)
      .then(setData)
      .catch(setError as (err: unknown) => void)
      .finally(() => setLoading(false));
  }, [params]);

  return { data, loading, error, refetch };
}

Mutation Hooks (POST/PUT/DELETE/PATCH)

Manual trigger for mutations:

// generated/hooks/index.ts
export function useCreateOrder(
  options?: MutationOptions<CreateOrderResponse, CreateOrderParams, CreateOrderBody>
) {
  const [data, setData] = useState<CreateOrderResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  const mutate = useCallback(
    async (params: CreateOrderParams, body: CreateOrderBody) => {
      setLoading(true);
      setError(null);
      
      try {
        options?.onMutate?.(body);
        
        const client = getAuroraClient();
        const result = await client.createOrder(params, body);
        
        setData(result);
        options?.onSuccess?.(result, body);
        
        return result;
      } catch (err) {
        const error = err as Error;
        setError(error);
        options?.onError?.(error, body);
        throw error;
      } finally {
        setLoading(false);
      }
    },
    [options]
  );

  const reset = useCallback(() => {
    setData(null);
    setError(null);
    setLoading(false);
  }, []);

  return { mutate, loading, error, data, reset };
}

Usage Examples

Query Hook

import { useGetOrder } from "./generated/hooks";

function OrderPage({ tenantId, orderId }: Props) {
  const { data: order, loading, error, refetch } = useGetOrder(
    { tenantId, orderId },
    {
      enabled: !!orderId,
      refetchInterval: 5000, // Poll every 5s
      onSuccess: (order) => console.log("Loaded:", order),
      onError: (error) => console.error("Failed:", error),
    }
  );

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!order) return null;

  return (
    <div>
      <h1>Order {order.orderId}</h1>
      <p>Status: {order.status}</p>
      <p>Amount: {order.amount}</p>
      <button onClick={() => refetch()}>Refresh</button>
    </div>
  );
}

Mutation Hook

import { useCreateOrder } from "./generated/hooks";

function CreateOrderForm({ tenantId }: Props) {
  const { mutate, loading, error, reset } = useCreateOrder({
    onSuccess: (result) => {
      console.log("Created order:", result.orderId);
      reset();
    },
    onError: (error) => {
      console.error("Failed to create order:", error);
    },
  });

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    
    await mutate(
      { tenantId },
      {
        userId: formData.get("userId") as string,
        amount: Number(formData.get("amount")),
        currency: formData.get("currency") as string,
      }
    );
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="userId" placeholder="User ID" />
      <input name="amount" type="number" placeholder="Amount" />
      <input name="currency" placeholder="Currency" />
      <button type="submit" disabled={loading}>
        {loading ? "Creating..." : "Create Order"}
      </button>
      {error && <p className="error">{error.message}</p>}
    </form>
  );
}

Configuration

Global Client Config

import { configureAuroraHooks } from "@aurora/codegen-react";

configureAuroraHooks({
  baseUrl: import.meta.env.VITE_API_URL || "http://localhost:3000",
  token: localStorage.getItem("token") || "",
});

Options

interface QueryOptions<T> {
  enabled?: boolean;                    // Auto-fetch (default: true)
  refetchInterval?: number;            // Poll interval (ms)
  onSuccess?: (data: T) => void;      // Success callback
  onError?: (error: Error) => void;    // Error callback
}

interface MutationOptions<T, P, B> {
  onMutate?: (body: B) => void;        // Before mutation
  onSuccess?: (data: T, body: B) => void;  // Success callback
  onError?: (error: Error, body: B) => void;  // Error callback
}

Types

import type {
  GetOrderParams,
  GetOrderResponse,
  CreateOrderParams,
  CreateOrderBody,
  CreateOrderResponse,
} from "./generated/types";

License

MIT

Dependencies

Dependencies

ID Version
@aurora/codegen 0.3.3

Development Dependencies

ID Version
@types/react ^18.2.0
react ^18.2.0

Peer Dependencies

ID Version
react ^18.0.0
Details
npm
2025-12-27 10:44:48 +00:00
12
latest
5.2 KiB
Assets (1)
codegen-react-0.3.3.tgz 5.2 KiB
Versions (3) View all
0.3.3 2025-12-27
0.3.2 2025-12-27
0.3.1 2025-12-27