Query Types

TypeScript types for query hooks and their results in ngrx-rtk-query

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>;

skip · boolean · default: "false"

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

selectFromResult · (state) => R

Allows extracting specific segments from query results for performant rendering. Component only re-renders when selected data changes.

pollingInterval · number

Polling interval in milliseconds. Set to 0 to disable polling.

refetchOnReconnect · boolean · default: "false"

Enables refetching when browser regains network connection.

refetchOnFocus · boolean · default: "false"

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>>;