Query Hook Types
UseQuery
The main query hook type that automatically triggers fetches and subscribes to cached data.
type UseQuery<D extends QueryDefinition<any, any, any, any>> = <
R extends Record<string, any> = UseQueryStateDefaultResult<D>,
>(
arg: Signal<QueryArgFrom<D> | SkipToken> | (() => QueryArgFrom<D> | SkipToken) | QueryArgFrom<D> | SkipToken,
options?: UseQueryOptions<D, R> | Signal<UseQueryOptions<D, R>> | (() => UseQueryOptions<D, R>),
) => UseQueryHookResult<D, R>;
Features:
- Automatically triggers requests to retrieve data
- Subscribes component to keep cached data in the store
- Accepts polling/re-fetching options
- Returns the latest request status and cached data
- Re-renders as the request status changes
Example:
export class PostsComponent {
postsQuery = useGetPostsQuery();
postQuery = useGetPostQuery(this.postId, {
pollingInterval: 5000,
skip: this.skipQuery()
});
}
TypedUseQuery
Helper type for creating strongly-typed query hooks.
type TypedUseQuery<ResultType, QueryArg, BaseQuery extends BaseQueryFn> = UseQuery<
QueryDefinition<QueryArg, BaseQuery, string, ResultType, string>
>;
UseLazyQuery
Query hook type with manual control over when data fetching occurs.
type UseLazyQuery<D extends QueryDefinition<any, any, any, any>> = <
R extends Record<string, any> = UseQueryStateDefaultResult<D>,
>(
options?: UseLazyQueryOptions<D, R> | Signal<UseLazyQueryOptions<D, R>> | (() => UseLazyQueryOptions<D, R>),
) => LazyQueryTrigger<D> & UseLazyQueryStateResult<D, R> & UseLazyQueryLastPromiseInfo<D>;
Features:
- Manual control over firing requests
- Returns trigger function to initiate requests
- Subscribes component to cached data
- Accepts polling/re-fetching options after manual trigger
Example:
export class SearchComponent {
searchQuery = useLazyGetPostsQuery();
onSearch(term: string) {
this.searchQuery(term).unwrap()
.then(results => console.log('Results:', results))
.catch(error => console.error('Error:', error));
}
}
UseQuerySubscription
Query hook type that only handles subscriptions without returning state.
type UseQuerySubscription<D extends QueryDefinition<any, any, any, any>> = (
arg: Signal<QueryArgFrom<D> | SkipToken> | (() => QueryArgFrom<D> | SkipToken) | QueryArgFrom<D> | SkipToken,
options?: UseQuerySubscriptionOptions | Signal<UseQuerySubscriptionOptions> | (() => UseQuerySubscriptionOptions),
) => UseQuerySubscriptionResult<D>;
Features:
- Automatically triggers requests
- Subscribes component to keep cached data in store
- Does not return request status or cached data
- Use with
useQueryState for complete functionality
UseQueryState
Query hook type that only reads cached data without triggering fetches.
type UseQueryState<D extends QueryDefinition<any, any, any, any>> = <
R extends Record<string, any> = UseQueryStateDefaultResult<D>,
>(
arg: Signal<QueryArgFrom<D> | SkipToken> | (() => QueryArgFrom<D> | SkipToken) | QueryArgFrom<D> | SkipToken,
options?: UseQueryStateOptions<D, R> | Signal<UseQueryStateOptions<D, R>> | (() => UseQueryStateOptions<D, R>),
) => UseQueryStateResult<D, R>;
Features:
- Reads request status and cached data from store
- Does not trigger new fetches
- Re-renders as data becomes available
- Use with
useQuerySubscription for complete functionality
Query Options Types
UseQueryOptions
Options for configuring query behavior.
type UseQueryOptions<
D extends QueryDefinition<any, any, any, any>,
R extends Record<string, any> = UseQueryStateDefaultResult<D>,
> = UseQuerySubscriptionOptions & UseQueryStateOptions<D, R>;
Prevents a query from automatically running. When true, the query will have a status of uninitialized.
refetchOnMountOrArgChange
boolean | number
default:"false"
Controls whether to refetch when a new subscriber is added:
false - Only fetch if data doesn’t exist
true - Always refetch when subscriber added
number - Refetch if specified seconds have elapsed since last fulfilled
Allows extracting specific segments from query results for performant rendering. Component only re-renders when selected data changes.
Polling interval in milliseconds. Set to 0 to disable polling.
Enables refetching when browser regains network connection.
Enables refetching when browser window regains focus.
Example with selectFromResult:
post = api.useGetPostsQuery(undefined, {
selectFromResult: ({ data }) => ({
post: data?.find((post) => post.id === id)
}),
});
TypedUseQueryStateOptions
Helper type for creating strongly-typed query options.
type TypedUseQueryStateOptions<
ResultType,
QueryArg,
BaseQuery extends BaseQueryFn,
SelectedResult extends Record<string, any> = UseQueryStateDefaultResult<...>
> = UseQueryStateOptions<QueryDefinition<...>, SelectedResult>;
Example:
type Options = TypedUseQueryStateOptions<
Post[],
void,
ReturnType<typeof fetchBaseQuery>,
{ post: Post | undefined }
>;
const options: Options = {
selectFromResult: ({ data }) => ({ post: data?.[0] })
};
QueryStateSelector
Function type for selecting specific data from query results.
type QueryStateSelector<
R extends Record<string, any>,
D extends QueryDefinition<any, any, any, any>
> = (state: UseQueryStateDefaultResult<D>) => R;
TypedQueryStateSelector
Helper type for creating strongly-typed selectors.
type TypedQueryStateSelector<
ResultType,
QueryArgumentType,
BaseQueryFunctionType extends BaseQueryFn,
SelectedResultType extends Record<string, any> = ...
> = QueryStateSelector<SelectedResultType, QueryDefinition<...>>;
Example:
const typedSelectFromResult: TypedQueryStateSelector<
PostsApiResponse,
number | undefined,
ReturnType<typeof fetchBaseQuery>,
{ posts: Post[] }
> = (state) => ({ posts: state.data?.posts ?? [] });
getPostsQuery = useGetPostsQuery(undefined, {
selectFromResult: typedSelectFromResult,
});
Trigger Types
LazyQueryTrigger
Function type for triggering lazy queries.
type LazyQueryTrigger<D extends QueryDefinition<any, any, any, any>> = {
(arg: QueryArgFrom<D>, extra?: { preferCacheValue?: boolean }): QueryActionCreatorResult<D>;
};
Parameters:
arg - Query argument
extra.preferCacheValue - If true, uses cache value if available instead of fetching
Returns: Promise-like object with .unwrap() method
Example:
// Start new request (default)
await searchQuery(term).unwrap();
// Use cache if available
await searchQuery(term, { preferCacheValue: true }).unwrap();
TypedLazyQueryTrigger
Helper type for creating strongly-typed lazy query triggers.
type TypedLazyQueryTrigger<ResultType, QueryArg, BaseQuery extends BaseQueryFn> =
LazyQueryTrigger<QueryDefinition<QueryArg, BaseQuery, string, ResultType, string>>;