fix: add ability to type the query key in the query function context

Author: boschni

docs/src/pages/guides/query-functions.md

@@ -55,7 +55,7 @@ function Todos({ completed }) {
 
 // Access the key, status and page variables in your query function!
 function fetchTodoList({ queryKey }) {
-  const { status, page } = queryKey[1]
+  const [_key, { status, page }] = queryKey
   return new Promise()
 }
 ```

src/core/types.ts

@@ -9,8 +9,11 @@ export type QueryFunction<T = unknown> = (
   context: QueryFunctionContext
 ) => T | Promise<T>
 
-export interface QueryFunctionContext<TPageParam = any> {
-  queryKey: QueryKey
+export interface QueryFunctionContext<
+  TQueryKey extends QueryKey = QueryKey,
+  TPageParam = any
+> {
+  queryKey: TQueryKey
   pageParam?: TPageParam
 }
 

src/react/tests/useQuery.test.tsx

@@ -10,7 +10,13 @@ import {
   renderWithClient,
   setActTimeout,
 } from './utils'
-import { useQuery, QueryClient, UseQueryResult, QueryCache } from '../..'
+import {
+  useQuery,
+  QueryClient,
+  UseQueryResult,
+  QueryCache,
+  QueryFunctionContext,
+} from '../..'
 
 describe('useQuery', () => {
   const queryCache = new QueryCache()
@@ -1666,10 +1672,15 @@ describe('useQuery', () => {
   // See https://github.com/tannerlinsley/react-query/issues/147
   it('should not pass stringified variables to query function', async () => {
     const key = queryKey()
-    const queryFn = jest.fn()
-    queryFn.mockImplementation(() => sleep(10))
-
     const variables = { number: 5, boolean: false, object: {}, array: [] }
+    const queryFn = jest
+      .fn()
+      .mockImplementation(
+        async (ctx: QueryFunctionContext<[string, typeof variables]>) => {
+          await sleep(10)
+          return ctx.queryKey
+        }
+      )
 
     function Page() {
       useQuery([key, variables], queryFn)