Skip to content

Commit be87ba0

Browse files
jacobsfletchjacobsfletch
authored
docs: adds useListQuery to list of React hooks and updates useDocumentInfo (#10186)
The `useListQuery` was currently undocumented and the `useDocumentInfo` hook was out of date.
1 parent c4b31c0 commit be87ba0

File tree

2 files changed

+46
-16
lines changed

2 files changed

+46
-16
lines changed

‎docs/admin/hooks.mdx

Lines changed: 46 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -679,20 +679,25 @@ const CustomComponent: React.FC = () => {
679679

680680
## useDocumentInfo
681681

682-
The `useDocumentInfo` hook provides lots of information about the document currently being edited, including the following:
682+
The `useDocumentInfo` hook provides information about the current document being edited, including the following:
683683

684684
| Property | Description |
685685
| ------------------------- | ------------------------------------------------------------------------------------------------------------------ |
686-
| **`collection`** | If the doc is a collection, its Collection Config will be returned |
687-
| **`global`** | If the doc is a global, its Global Config will be returned |
686+
| **`currentEditor`** | The user currently editing the document. |
687+
| **`docConfig`** | Either the Collection or Global config of the document, depending on what is being edited. |
688+
| **`documentIsLocked`** | Whether the document is currently locked by another user. |
688689
| **`id`** | If the doc is a collection, its ID will be returned |
689-
| **`preferencesKey`** | The `preferences` key to use when interacting with document-level user preferences |
690-
| **`versions`** | Versions of the current doc |
691-
| **`unpublishedVersions`** | Unpublished versions of the current doc |
692-
| **`publishedDoc`** | The currently published version of the doc being edited |
693-
| **`getVersions`** | Method to trigger the retrieval of document versions |
694-
| **`docPermissions`** | The current documents permissions. Collection document permissions fallback when no id is present (i.e. on create) |
695-
| **`getDocPermissions`** | Method to trigger the retrieval of document level permissions |
690+
| **`getDocPermissions`** | Method to retrieve document-level user preferences. |
691+
| **`getDocPreferences`** | Method to retrieve document-level user preferences. |
692+
| **`hasPublishedDoc`** | Whether the document has a published version. |
693+
| **`incrementVersionCount`** | Method to increment the version count of the document. |
694+
| **`preferencesKey`** | The `preferences` key to use when interacting with document-level user preferences. |
695+
| **`versions`** | Versions of the current doc. |
696+
| **`unpublishedVersions`** | Unpublished versions of the current doc. |
697+
| **`publishedDoc`** | The currently published version of the doc being edited. |
698+
| **`getVersions`** | Method to retrieve document versions. |
699+
| **`docPermissions`** | The current documents permissions. Collection document permissions fallback when no id is present (i.e. on create). |
700+
| **`versionCount`** | The current version count of the document. |
696701

697702
**Example:**
698703

@@ -718,6 +723,37 @@ const LinkFromCategoryToPosts: React.FC = () => {
718723
}
719724
```
720725

726+
## useListQuery
727+
728+
The `useListQuery` hook is used to subscribe to the data, current query, and other properties used within the List View. You can use this hook within any Custom Component rendered within the List View.
729+
730+
```tsx
731+
'use client'
732+
import { useListQuery } from '@payloadcms/ui'
733+
734+
const MyComponent: React.FC = () => {
735+
// highlight-start
736+
const { data, query } = useListQuery()
737+
// highlight-end
738+
739+
// ...
740+
}
741+
```
742+
743+
The `useListQuery` hook returns an object with the following properties:
744+
745+
| Property | Description |
746+
| ----------------- | --------------------------------------------------------------------------------------------- |
747+
| **`data`** | The data that is being displayed in the List View. |
748+
| **`defaultLimit`**| The default limit of items to display in the List View. |
749+
| **`defaultSort`** | The default sort order of items in the List View. |
750+
| **`handlePageChange`** | A method to handle page changes in the List View. |
751+
| **`handlePerPageChange`** | A method to handle per page changes in the List View. |
752+
| **`handleSearchChange`** | A method to handle search changes in the List View. |
753+
| **`handleSortChange`** | A method to handle sort changes in the List View. |
754+
| **`handleWhereChange`** | A method to handle where changes in the List View. |
755+
| **`query`** | The current query that is being used to fetch the data in the List View. |
756+
721757
## useLocale
722758

723759
In any Custom Component you can get the selected locale object with the `useLocale` hook. `useLocale` gives you the full locale object, consisting of a `label`, `rtl`(right-to-left) property, and then `code`. Here is a simple example:

‎packages/ui/src/providers/DocumentInfo/types.ts

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,8 @@ export type DocumentInfoContext = {
4949
documentIsLocked?: boolean
5050
getDocPermissions: (data?: Data) => Promise<void>
5151
getDocPreferences: () => Promise<DocumentPreferences>
52-
hasPublishedDoc: boolean
5352
incrementVersionCount: () => void
54-
initialData: Data
55-
initialState?: FormState
5653
isInitializing: boolean
57-
lastUpdateTime?: number
58-
mostRecentVersionIsAutosaved: boolean
5954
preferencesKey?: string
6055
savedDocumentData?: Data
6156
setCurrentEditor?: React.Dispatch<React.SetStateAction<ClientUser>>
@@ -74,5 +69,4 @@ export type DocumentInfoContext = {
7469
unpublishedVersionCount: number
7570
updateDocumentEditor: (docID: number | string, slug: string, user: ClientUser) => Promise<void>
7671
updateSavedDocumentData: (data: Data) => void
77-
versionCount: number
7872
} & DocumentInfoProps

0 commit comments

Comments
 (0)