feat(types): support typing QueryKey and MutationKey via `Registe…

…r` (#8521) * feat(types): support typing QueryKey and MutationKey via Register * ci: apply automated fixes --------- Co-authored-by: Dominik Dorfmeister <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
TanStack · Jan 10, 2025 · fd500a4 · fd500a4
1 parent 690fd2a
commit fd500a4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/docs/framework/react/typescript.md b/docs/framework/react/typescript.md
@@ -172,6 +172,28 @@ declare module '@tanstack/react-query' {
 ```
 
 [//]: # 'TypingMeta'
+[//]: # 'TypingQueryAndMutationKeys'
+
+## Typing query and mutation keys
+
+### Registering the query and mutation key types
+
+Also similarly to registering a [global error type](#registering-a-global-error), you can also register a global `QueryKey` and `MutationKey` type. This allows you to provide more structure to your keys, that matches your application's hierarchy, and have them be typed across all of the library's surface area. Note that the registered type must extend the `Array` type, so that your keys remain an array.
+
+```ts
+import '@tanstack/react-query'
+
+type QueryKey = ['dashboard' | 'marketing', ...ReadonlyArray<unknown>]
+
+declare module '@tanstack/react-query' {
+  interface Register {
+    queryKey: QueryKey
+    mutationKey: QueryKey
+  }
+}
+```
+
+[//]: # 'TypingQueryAndMutationKeys'
 [//]: # 'TypingQueryOptions'
 
 ## Typing Query Options

diff --git a/packages/query-core/src/types.ts b/packages/query-core/src/types.ts
@@ -32,6 +32,8 @@ export interface Register {
   // defaultError: Error
   // queryMeta: Record<string, unknown>
   // mutationMeta: Record<string, unknown>
+  // queryKey: ReadonlyArray<unknown>
+  // mutationKey: ReadonlyArray<unknown>
 }
 
 export type DefaultError = Register extends {
@@ -40,7 +42,13 @@ export type DefaultError = Register extends {
   ? TError
   : Error
 
-export type QueryKey = ReadonlyArray<unknown>
+export type QueryKey = Register extends {
+  queryKey: infer TQueryKey
+}
+  ? TQueryKey extends Array<unknown>
+    ? TQueryKey
+    : ReadonlyArray<unknown>
+  : ReadonlyArray<unknown>
 
 export const dataTagSymbol = Symbol('dataTagSymbol')
 export type dataTagSymbol = typeof dataTagSymbol
@@ -996,7 +1004,13 @@ export type InfiniteQueryObserverResult<
   | InfiniteQueryObserverLoadingResult<TData, TError>
   | InfiniteQueryObserverPendingResult<TData, TError>
 
-export type MutationKey = ReadonlyArray<unknown>
+export type MutationKey = Register extends {
+  mutationKey: infer TMutationKey
+}
+  ? TMutationKey extends Array<unknown>
+    ? TMutationKey
+    : ReadonlyArray<unknown>
+  : ReadonlyArray<unknown>
 
 export type MutationStatus = 'idle' | 'pending' | 'success' | 'error'