Skip to content

Commit d56de79

Browse files
authored
docs: adds usePayloadAPI hook to React Hooks documentation (#11079)
Adds documentation for the `usePayloadAPI` hook to the React Hooks documentation. The new section provides details on how the hook works, its parameters, return values, and example usage. **Changes:** - Added `usePayloadAPI` documentation to the React Hooks page. - Explained its purpose, arguments, and return values. - Included an example demonstrating how to fetch data and update request parameters dynamically. Fixes: #10969
1 parent 87ba7f7 commit d56de79

File tree

1 file changed

+79
-0
lines changed

1 file changed

+79
-0
lines changed

docs/admin/hooks.mdx

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1036,3 +1036,82 @@ export const MySetStepNavComponent: React.FC<{
10361036
return null
10371037
}
10381038
```
1039+
1040+
## usePayloadAPI
1041+
1042+
The `usePayloadAPI` hook is a useful tool for making REST API requests to your Payload instance and handling responses reactively. It allows you to fetch and interact with data while automatically updating when parameters change.
1043+
1044+
This hook returns an array with two elements:
1045+
1046+
1. An object containing the API response.
1047+
2. A set of methods to modify request parameters.
1048+
1049+
**Example:**
1050+
1051+
```tsx
1052+
'use client'
1053+
import { usePayloadAPI } from '@payloadcms/ui'
1054+
1055+
const MyComponent: React.FC = () => {
1056+
// Fetch data from a collection item using its ID
1057+
const [{ data, error, isLoading }, { setParams }] = usePayloadAPI(
1058+
'/api/posts/123',
1059+
{ initialParams: { depth: 1 } }
1060+
)
1061+
1062+
if (isLoading) return <p>Loading...</p>
1063+
if (error) return <p>Error: {error.message}</p>
1064+
1065+
return (
1066+
<div>
1067+
<h1>{data?.title}</h1>
1068+
<button onClick={() => setParams({ cacheBust: Date.now() })}>
1069+
Refresh Data
1070+
</button>
1071+
</div>
1072+
)
1073+
}
1074+
```
1075+
1076+
**Arguments:**
1077+
1078+
| Property | Description |
1079+
| ------------- | ----------------------------------------------------------------------------------------------- |
1080+
| **`url`** | The API endpoint to fetch data from. Relative URLs will be prefixed with the Payload API route. |
1081+
| **`options`** | An object containing initial request parameters and initial state configuration. |
1082+
1083+
The `options` argument accepts the following properties:
1084+
1085+
| Property | Description |
1086+
| ------------------- | --------------------------------------------------------------------------------------------------- |
1087+
| **`initialData`** | Uses this data instead of making an initial request. If not provided, the request runs immediately. |
1088+
| **`initialParams`** | Defines the initial parameters to use in the request. Defaults to an empty object `{}`. |
1089+
1090+
**Returned Value:**
1091+
1092+
The first item in the returned array is an object containing the following properties:
1093+
1094+
| Property | Description |
1095+
| --------------- | -------------------------------------------------------- |
1096+
| **`data`** | The API response data. |
1097+
| **`error`** | If an error occurs, this contains the error object. |
1098+
| **`isLoading`** | A boolean indicating whether the request is in progress. |
1099+
1100+
The second item is an object with the following methods:
1101+
1102+
| Property | Description |
1103+
| --------------- | ----------------------------------------------------------- |
1104+
| **`setParams`** | Updates request parameters, triggering a refetch if needed. |
1105+
1106+
#### Updating Data
1107+
1108+
The `setParams` function can be used to update the request and trigger a refetch:
1109+
1110+
```tsx
1111+
setParams({ depth: 2 })
1112+
```
1113+
1114+
This is useful for scenarios where you need to trigger another fetch regardless of the `url` argument changing.
1115+
1116+
1117+

0 commit comments

Comments
 (0)