104 lines
2.3 KiB
Plaintext
104 lines
2.3 KiB
Plaintext
---
|
|
title: "useEntity"
|
|
description: "Access an entity's state and use it to display information in your React app"
|
|
---
|
|
|
|
import LearnHooksTip from '/snippets/learn-hooks-tip.mdx';
|
|
|
|
The `useEntity` hook provides access to [entity data](/documentation/customers/feature-entities) and related operations. You can use it from your frontend to retrieve entity information and manage loading states.
|
|
|
|
<LearnHooksTip />
|
|
|
|
## Parameters
|
|
|
|
<ParamField body="entityId" type="string" required>
|
|
The ID of the entity to retrieve.
|
|
</ParamField>
|
|
|
|
<ParamField body="expand" type="string[]">
|
|
Array of additional data to include in the entity response. Currently supports
|
|
`invoices`.
|
|
</ParamField>
|
|
|
|
## Returns
|
|
|
|
### `entity`
|
|
|
|
The entity object containing all entity data.
|
|
|
|
```jsx
|
|
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.
|
|
|
|
```jsx
|
|
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.
|
|
|
|
```jsx
|
|
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.
|
|
|
|
```jsx
|
|
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>;
|
|
}
|
|
```
|