React hook

useAthenaGateway from @xylex-group/athena/react — fetch/insert/update/delete/rpc with loading and error state.

Use useAthenaGateway for browser-side calls with React-managed loading and errors. Requires React ≥ 17.

"use client";

import { useAthenaGateway } from "@xylex-group/athena/react";
import { useEffect } from "react";

export function UserList() {
  const { fetchGateway, lastResponse, isLoading, error } = useAthenaGateway({
    baseUrl: "https://athena-db.com",
    apiKey: process.env.NEXT_PUBLIC_ATHENA_API_KEY,
  });

  useEffect(() => {
    fetchGateway({
      table_name: "users",
      columns: ["id", "name", "email"],
      conditions: [{ column: "active", operator: "eq", value: true }],
      limit: 25,
    });
  }, [fetchGateway]);

  if (isLoading) return <p>Loading…</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {(lastResponse?.data as Array<{ id: number; name: string }> ?? []).map(
        (user) => <li key={user.id}>{user.name}</li>,
      )}
    </ul>
  );
}

The hook also exposes insertGateway, updateGateway, deleteGateway, and rpcGateway. Those throw on non-OK responses — use try/catch. See Errors and retries and the hook API reference.

Overview
Gateway payload types (when building payloads by hand)

React hook

Related

On this page