fix(query): conflict types when override options (#190)

* fix(query): conflict types when override options

* docs: `skipToken` for Disabling Queries

Author: dinwwwh

apps/content/docs/tanstack-query/react.md

@@ -115,3 +115,26 @@ Integrate oRPC React Query utils into your React app with Context:
 
    const query = useQuery(orpc.planet.find.queryOptions({ input: { id: 123 } }))
    ```
+
+## `skipToken` for Disabling Queries
+
+You can still use [skipToken](https://tanstack.com/query/latest/docs/framework/react/guides/disabling-queries/#typesafe-disabling-of-queries-using-skiptoken) by conditionally overriding the `queryFn` property:
+
+```ts twoslash
+import type { router } from './shared/planet'
+import type { RouterClient } from '@orpc/server'
+import type { RouterUtils } from '@orpc/react-query'
+declare const orpc: RouterUtils<RouterClient<typeof router>>
+declare const condition: boolean
+// ---cut---
+import { skipToken, useQuery } from '@tanstack/react-query'
+
+const options = orpc.planet.find.queryOptions({
+  input: { id: 123 },
+})
+
+const query = useQuery({
+  ...options,
+  queryFn: condition ? skipToken : options.queryFn,
+})
+```

packages/react-query/src/procedure-utils.ts

@@ -11,17 +11,17 @@ export interface ProcedureUtils<TClientContext extends ClientContext, TInput, TO
     ...rest: MaybeOptionalOptions<
       U & QueryOptionsIn<TClientContext, TInput, TOutput, TError, USelectData>
     >
-  ): NoInfer<U & QueryOptionsBase<TOutput, TError>>
+  ): NoInfer<U & Omit<QueryOptionsBase<TOutput, TError>, keyof U>>
 
   infiniteOptions<U, UPageParam, USelectData = InfiniteData<TOutput, UPageParam>>(
     options: U & InfiniteOptionsIn<TClientContext, TInput, TOutput, TError, USelectData, UPageParam>
-  ): NoInfer<U & InfiniteOptionsBase<TOutput, TError, UPageParam>>
+  ): NoInfer<U & Omit<InfiniteOptionsBase<TOutput, TError, UPageParam>, keyof U>>
 
   mutationOptions<U, UMutationContext>(
     ...rest: MaybeOptionalOptions<
       U & MutationOptionsIn<TClientContext, TInput, TOutput, TError, UMutationContext>
     >
-  ): NoInfer<U & MutationOptionsBase<TInput, TOutput, TError>>
+  ): NoInfer<U & Omit<MutationOptionsBase<TInput, TOutput, TError>, keyof U>>
 }
 
 export function createProcedureUtils<TClientContext extends ClientContext, TInput, TOutput, TError extends Error>(

packages/vue-query/src/procedure-utils.ts

@@ -13,17 +13,17 @@ export interface ProcedureUtils<TClientContext extends ClientContext, TInput, TO
     ...rest: MaybeOptionalOptions<
       U & QueryOptionsIn<TClientContext, TInput, TOutput, TError, USelectData>
     >
-  ): NoInfer<U & QueryOptionsBase<TOutput, TError>>
+  ): NoInfer<U & Omit<QueryOptionsBase<TOutput, TError>, keyof U>>
 
   infiniteOptions<U, UPageParam, USelectData = InfiniteData<TOutput, UPageParam>>(
     options: U & InfiniteOptionsIn<TClientContext, TInput, TOutput, TError, USelectData, UPageParam>
-  ): NoInfer<U & InfiniteOptionsBase<TOutput, TError, UPageParam>>
+  ): NoInfer<U & Omit<InfiniteOptionsBase<TOutput, TError, UPageParam>, keyof U>>
 
   mutationOptions<U, UMutationContext>(
     ...rest: MaybeOptionalOptions<
       U & MutationOptionsIn<TClientContext, TInput, TOutput, TError, UMutationContext>
     >
-  ): NoInfer<U & MutationOptionsBase<TInput, TOutput, TError>>
+  ): NoInfer<U & Omit<MutationOptionsBase<TInput, TOutput, TError>, keyof U>>
 }
 
 export function createProcedureUtils<TClientContext extends ClientContext, TInput, TOutput, TError extends Error>(

packages/vue-query/src/types.ts

@@ -1,6 +1,6 @@
 import type { ClientContext } from '@orpc/client'
 import type { AnyFunction, SetOptional } from '@orpc/shared'
-import type { Enabled, MutationObserverOptions, QueryFunctionContext, QueryKey, QueryObserverOptions, UseInfiniteQueryOptions } from '@tanstack/vue-query'
+import type { MutationObserverOptions, QueryFunctionContext, QueryKey, QueryObserverOptions, UseInfiniteQueryOptions } from '@tanstack/vue-query'
 import type { ComputedRef, MaybeRef, MaybeRefOrGetter } from 'vue'
 
 /**
@@ -23,9 +23,9 @@ export type QueryOptionsIn<TClientContext extends ClientContext, TInput, TOutput
     MaybeRefDeep<QueryObserverOptions<TOutput, TError, TSelectData, TOutput>[P]>
   }
   & {
-    enabled?: MaybeRefOrGetter<Enabled<TOutput, TError, TSelectData>>
-    queryKey?: MaybeRefDeep<QueryKey>
-    shallow?: boolean
+    enabled?: MaybeRefOrGetter<QueryObserverOptions<TOutput, TError, TSelectData, TOutput>['enabled']>
+    queryKey?: MaybeRefDeep<QueryObserverOptions<TOutput, TError, TSelectData, TOutput>['queryKey']>
+    shallow?: MaybeRef<boolean>
   }
 
 export interface QueryOptionsBase<TOutput, TError extends Error> {