Keep data in useQuery result defined when initialData is defined

examples/basic-typescript/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

examples/react/basic-typescript/src/index.tsx

@@ -28,11 +28,8 @@ type Post = {
 function usePosts() {
   return useQuery(
     ["posts"],
-    async (): Promise<Array<Post>> => {
-      const { data } = await axios.get(
-        "https://jsonplaceholder.typicode.com/posts"
-      );
-      return data;
+    () => axios.get<Array<Post>>('https://jsonplaceholder.typicode.com/posts').then(({data}) => data), {
+      initialData: [{ id: 1, title: "Post 1", body: "Body 1" }],
     }
   );
 }
@@ -44,6 +41,8 @@ function Posts({
 }) {
   const queryClient = useQueryClient();
   const { status, data, error, isFetching } = usePosts();
+  // This shouldn't result in a TypeScript Error
+  console.log(data[0].id);
 
   return (
     <div>
@@ -160,4 +159,4 @@ function App() {
 }
 
 const rootElement = document.getElementById("root");
-ReactDOM.createRoot(rootElement).render(<App />);
+ReactDOM.createRoot(rootElement as HTMLElement).render(<App />);

examples/react/basic-typescript/tsconfig.json

@@ -18,7 +18,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "preserve"
   },
   "include": [
     "src"

src/reactjs/types.ts

@@ -40,6 +40,18 @@ export interface UseQueryOptions<
     TQueryKey
   > {}
 
+export type UseQueryOptionsInitialDataDefined<
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryKey extends QueryKey
+> = Omit<
+  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  'initialData'
+> & {
+  initialData: TQueryFnData
+}
+
 export interface UseInfiniteQueryOptions<
   TQueryFnData = unknown,
   TError = unknown,
@@ -65,6 +77,29 @@ export type UseQueryResult<
   TError = unknown
 > = UseBaseQueryResult<TData, TError>
 
+export type UseQueryResultDataDefined<TData, TError> = Omit<
+  UseQueryResult<TData, TError>,
+  'data'
+> & {
+  data: TData
+}
+
+export type UseQueryResultWithOptions<
+  TQueryOpts,
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryKey extends QueryKey = QueryKey,
+  TQueryOptionsWithInitialDataDefined extends UseQueryOptionsInitialDataDefined<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey
+  > = UseQueryOptionsInitialDataDefined<TQueryFnData, TError, TData, TQueryKey>
+> = TQueryOpts extends TQueryOptionsWithInitialDataDefined
+  ? UseQueryResultDataDefined<TData, TError>
+  : UseQueryResult<TData, TError>
+
 export type UseInfiniteQueryResult<
   TData = unknown,
   TError = unknown

src/reactjs/useQuery.ts

@@ -1,7 +1,11 @@
 import { QueryObserver } from '../core'
 import { QueryFunction, QueryKey } from '../core/types'
 import { parseQueryArgs } from '../core/utils'
-import { UseQueryOptions, UseQueryResult } from './types'
+import {
+  UseQueryOptions,
+  UseQueryResultWithOptions,
+  UseQueryOptionsInitialDataDefined,
+} from './types'
 import { useBaseQuery } from './useBaseQuery'
 
 // HOOK
@@ -10,47 +14,100 @@ export function useQuery<
   TQueryFnData = unknown,
   TError = unknown,
   TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey
+  TQueryKey extends QueryKey = QueryKey,
+  TQueryOpts extends UseQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey
+  > = UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>
 >(
-  options: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>
-): UseQueryResult<TData, TError>
+  options: TQueryOpts
+): UseQueryResultWithOptions<TQueryOpts, TQueryFnData, TError, TData, TQueryKey>
+
 export function useQuery<
   TQueryFnData = unknown,
   TError = unknown,
   TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey
+  TQueryKey extends QueryKey = QueryKey,
+  TQueryOpts extends Omit<
+    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    'queryKey'
+  > = Omit<UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>, 'queryKey'>
 >(
   queryKey: TQueryKey,
-  options?: Omit<
-    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  options?: Omit<TQueryOpts, 'queryKey'>
+): UseQueryResultWithOptions<
+  TQueryOpts,
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryKey,
+  Omit<
+    UseQueryOptionsInitialDataDefined<TQueryFnData, TError, TData, TQueryKey>,
     'queryKey'
   >
-): UseQueryResult<TData, TError>
+>
+
 export function useQuery<
   TQueryFnData = unknown,
   TError = unknown,
   TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey
+  TQueryKey extends QueryKey = QueryKey,
+  TQueryOpts extends Omit<
+    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    'queryKey' | 'queryFn'
+  > = Omit<
+    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+    'queryKey' | 'queryFn'
+  >
 >(
   queryKey: TQueryKey,
   queryFn: QueryFunction<TQueryFnData, TQueryKey>,
-  options?: Omit<
-    UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  options?: TQueryOpts
+): UseQueryResultWithOptions<
+  TQueryOpts,
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryKey,
+  Omit<
+    UseQueryOptionsInitialDataDefined<TQueryFnData, TError, TData, TQueryKey>,
     'queryKey' | 'queryFn'
   >
-): UseQueryResult<TData, TError>
+>
+
 export function useQuery<
   TQueryFnData,
   TError,
   TData = TQueryFnData,
-  TQueryKey extends QueryKey = QueryKey
+  TQueryKey extends QueryKey = QueryKey,
+  TQueryOpts extends UseQueryOptions<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey
+  > = UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>
 >(
-  arg1: TQueryKey | UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
-  arg2?:
-    | QueryFunction<TQueryFnData, TQueryKey>
-    | UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
-  arg3?: UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>
-): UseQueryResult<TData, TError> {
+  arg1: TQueryKey | TQueryOpts,
+  arg2?: QueryFunction<TQueryFnData, TQueryKey> | TQueryOpts,
+  arg3?: TQueryOpts
+): UseQueryResultWithOptions<
+  TQueryOpts,
+  TQueryFnData,
+  TError,
+  TData,
+  TQueryKey
+> {
   const parsedOptions = parseQueryArgs(arg1, arg2, arg3)
-  return useBaseQuery(parsedOptions, QueryObserver)
+  return useBaseQuery(
+    parsedOptions,
+    QueryObserver
+  ) as UseQueryResultWithOptions<
+    TQueryOpts,
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey
+  >
 }