The useEntity hook provides access to entity data and related operations. You can use it from your frontend to retrieve entity information and manage loading states.
To use Autumn’s React hooks, you should set up the autumnHandler in your backend and the <AutumnProvider /> in your frontend, as described in the quickstart guide. This gives the hooks access to the customerId making the request.

​
Parameters

​
entityId
string
required
The ID of the entity to retrieve.
​
expand
string[]
Array of additional data to include in the entity response. Right now the only option is invoices.

​
entity

The entity object containing all entity data. 
import { useEntity } from "autumn-js/react";

export default function EntityProfile() {
  const { entity } = useEntity("entity_abc", { expand: ["invoices"] });

  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {entity?.name}</p>
      <p>Balance: {entity?.features.chat_messages?.balance}</p>
    </div>
  );
}

​
refetch

Function to manually refetch the entity data, eg when updating an entity’s state or metadata to display. 
import { useEntity, useCustomer } from "autumn-js/react";

export default function EntityWithRefresh() {
  const { entity, refetch } = useEntity("entity_abc");
  const { track } = useCustomer();

  const updateEntity = async () => {
    // Perform some entity update operation
    await refetch({ expand: ["metadata"] });
  };

  return <button onClick={updateEntity}>Refresh Entity</button>;
}

​
isLoading

Boolean indicating whether the entity data is currently being fetched. 
import { useEntity } from "autumn-js/react";

export default function EntityLoader() {
  const { entity, isLoading } = useEntity("entity_abc");

  if (isLoading) {
    return <div>Loading entity data...</div>;
  }

  return <div>Entity: {entity?.name}</div>;
}

​
error

Any error that occurred while fetching entity data. 
import { useEntity } from "autumn-js/react";

export default function EntityWithError() {
  const { entity, error, isLoading } = useEntity("entity_abc");

  if (error) {
    return <div>Error loading entity: {error.message}</div>;
  }

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return <div>Entity: {entity?.name}</div>;
}