Skip to content

Commit f575fc4

Browse files
committed
Restructure "generated hooks" descriptions
1 parent c3a171e commit f575fc4

File tree

1 file changed

+39
-14
lines changed

1 file changed

+39
-14
lines changed

docs/rtk-query/api/created-api/hooks.mdx

Lines changed: 39 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,11 @@ However, RTK Query also provides the ability to auto-generate React hooks for ea
1919
import { createApi } from '@reduxjs/toolkit/query/react'
2020
```
2121

22-
If you have used the React-specific version of `createApi`, the generated `Api` slice structure will also contain a set of React hooks. The primary endpoint hooks are available as `api.endpoints[endpointName].useQuery` or `api.endpoints[endpointName].useMutation`, matching how you defined that endpoint.
22+
If you have used the React-specific version of `createApi`, the generated `api` slice structure will also contain a set of React hooks. The primary endpoint hooks are available as `api.endpoints[endpointName].useQuery` or `api.endpoints[endpointName].useMutation`, matching how you defined that endpoint.
2323

24-
The same hooks are also added to the `Api` object itself, and given auto-generated names based on the endpoint name and query/mutation type.
24+
### Generated Hook Names
25+
26+
The same hooks are also added to the `api` object itself, and given auto-generated names based on the endpoint name and query/mutation type.
2527

2628
For example, if you had endpoints for `getPosts` and `updatePost`, these options would be available:
2729

@@ -37,15 +39,27 @@ const [updatePost, { data }] = api.useUpdatePostMutation()
3739

3840
The general format is `use(Endpointname)(Query|Mutation)` - `use` is prefixed, the first letter of your endpoint name is capitalized, then `Query` or `Mutation` is appended depending on the type.
3941

40-
RTK Query provides additional hooks for more advanced use-cases, although not all are generated directly on the `Api` object as well. The full list of hooks generated in the React-specific version of `createApi` is as follows:
42+
### Available Hooks
43+
44+
RTK Query provides additional hooks for more advanced use-cases, although not all are generated directly on the `api` object as well.
45+
46+
Most of the hooks are generated on a per-endpoint basis.
4147

42-
- [`useQuery`](#usequery) (endpoint-specific, also generated on the `Api` object)
43-
- [`useMutation`](#usemutation) (endpoint-specific, also generated on the `Api` object)
44-
- [`useQueryState`](#usequerystate) (endpoint-specific)
45-
- [`useQuerySubscription`](#usequerysubscription) (endpoint-specific)
46-
- [`useLazyQuery`](#uselazyquery) (endpoint-specific, also generated on the `Api` object)
47-
- [`useLazyQuerySubscription`](#uselazyquerysubscription) (endpoint-specific)
48-
- [`usePrefetch`](#useprefetch) (endpoint-agnostic)
48+
The full list of hooks generated in the React-specific version of `createApi` is as follows:
49+
50+
- Endpoint-specific, generated the `api` object with a unique name and on the endpoint object with a generic name:
51+
- [`useQuery`](#usequery) (all standard queries)
52+
- [`useMutation`](#usemutation) (all mutations)
53+
- [`useInfiniteQuery`](#useinfinitequery) (only infinite queries)
54+
- [`useLazyQuery`](#uselazyquery) (all standard queries)
55+
- Endpoint-specific, only generated on the endpoint object with a generic name:
56+
- [`useQueryState`](#usequerystate)
57+
- [`useQuerySubscription](#usequerysubscription)
58+
- [`useLazyQuerySubscription](#uselazyquerysubscription)
59+
- [`useInfiniteQueryState`](#useinfinitequerystate)
60+
- [`useInfiniteQuerySubscription](#useinfinitequerysubscription)
61+
- Endpoint-agnostic, generated on the `api` object:
62+
- [`usePrefetch`](#useprefetch)
4963

5064
For the example above, the full set of generated hooks for the api would be like so:
5165

@@ -57,13 +71,24 @@ api.endpoints.getPosts.useQuerySubscription(arg, options)
5771
api.endpoints.getPosts.useLazyQuery(options)
5872
api.endpoints.getPosts.useLazyQuerySubscription(options)
5973

74+
/* hooks attached to the `getManyPosts` infinite query endpoint definition */
75+
api.endpoints.getManyPosts.useInfiniteQuery(arg, options)
76+
api.endpoints.getManyPosts.useInfiniteQueryState(arg, options)
77+
api.endpoints.getManyPosts.useInfiniteQuerySubscription(arg, options)
78+
6079
/* Hooks attached to the `updatePost` mutation endpoint definition */
6180
api.endpoints.updatePost.useMutation(options)
6281

63-
/* Hooks attached to the `Api` object */
64-
api.useGetPostsQuery(arg, options) // same as api.endpoints.getPosts.useQuery
65-
api.useLazyGetPostsQuery(options) // same as api.endpoints.getPosts.useLazyQuery
66-
api.useUpdatePostMutation(options) // same as api.endpoints.updatePost.useMutation
82+
/* Hooks attached to the `api` object */
83+
// same as api.endpoints.getPosts.useQuery
84+
api.useGetPostsQuery(arg, options)
85+
// same as api.endpoints.getPosts.useLazyQuery
86+
api.useLazyGetPostsQuery(arg, options)
87+
// same as api.endpoints.updatePost.useMutation
88+
api.useUpdatePostMutation(arg, options)
89+
// same as api.endpoints.getManyPosts.useInfiniteQuery
90+
api.useGetManyPostsInfiniteQuery(arg, options)
91+
// Generic, used for any endpoint
6792
api.usePrefetch(endpointName, options)
6893
```
6994

0 commit comments

Comments
 (0)