fix(vue-query): expose queryFn and other properties on queryOptions return type #10042
Conversation
…eturn type The return type of queryOptions was using types wrapped in MaybeRef, which prevented TypeScript from seeing properties like queryFn directly on the returned object. This creates new unwrapped types (DefinedInitialDataOptions and UndefinedInitialDataOptions) specifically for queryOptions return types, matching the approach used in react-query. Fixes TanStack#7892 Signed-off-by: Vedant Madane <[email protected]>
|
📝 WalkthroughWalkthroughThis PR fixes a TypeScript type issue in vue-query's Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🧰 Additional context used🧠 Learnings (4)📓 Common learnings📚 Learning: 2025-11-22T09:06:05.219ZApplied to files:
📚 Learning: 2025-11-02T22:52:33.071ZApplied to files:
📚 Learning: 2025-08-19T03:18:18.303ZApplied to files:
🧬 Code graph analysis (1)packages/vue-query/src/__tests__/queryOptions.test-d.ts (1)
🔇 Additional comments (3)
✏️ Tip: You can disable this entire section by setting Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/vue-query/src/queryOptions.ts (1)
56-80: AddUnusedSkipTokenOptionsoverload to match react-query's type safety for skipToken scenarios.The queryOptions function is missing a critical overload. React-query's implementation includes a
UnusedSkipTokenOptionsoverload (betweenDefinedInitialDataOptionsandUndefinedInitialDataOptions) that preventsskipTokenfrom being assigned to thequeryFnproperty in conditional scenarios.Vue-query's tests already use this pattern (e.g.,
queryFn: Math.random() > 0.5 ? skipToken : () => Promise.resolve(5)), but without the intermediate overload, TypeScript cannot properly narrow the type for skipToken cases. Add the missing overload definition and overload signature to provide consistent type safety across all framework implementations:export type UnusedSkipTokenOptions< TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, > = Omit< QueryObserverOptions<TQueryFnData, TError, TData, TQueryFnData, DeepUnwrapRef<TQueryKey>>, 'queryFn' > & ShallowOption & { queryFn?: Exclude< QueryObserverOptions<TQueryFnData, TError, TData, TQueryFnData, DeepUnwrapRef<TQueryKey>>['queryFn'], SkipToken | undefined > } export function queryOptions<...>( options: UnusedSkipTokenOptions<...>, ): UnusedSkipTokenOptions<...> & { queryKey: DataTag<TQueryKey, TQueryFnData, TError> }
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
packages/vue-query/src/__tests__/queryOptions.test-d.tspackages/vue-query/src/queryOptions.ts
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: DogPawHat
Repo: TanStack/query PR: 9835
File: packages/query-core/src/__tests__/queryClient.test-d.tsx:242-256
Timestamp: 2025-11-02T22:52:33.071Z
Learning: In the TanStack Query codebase, the new `query` and `infiniteQuery` methods support the `select` option for data transformation, while the legacy `fetchQuery` and `fetchInfiniteQuery` methods do not support `select` and should reject it at the type level.
Learnt from: oscartbeaumont
Repo: TanStack/query PR: 9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025-08-19T03:18:18.303Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.
📚 Learning: 2025-11-22T09:06:05.219Z
Learnt from: sukvvon
Repo: TanStack/query PR: 9892
File: packages/solid-query-persist-client/src/__tests__/PersistQueryClientProvider.test.tsx:331-335
Timestamp: 2025-11-22T09:06:05.219Z
Learning: In TanStack/query test files, when a queryFn contains side effects (e.g., setting flags for test verification), prefer async/await syntax for clarity; when there are no side effects, prefer the .then() pattern for conciseness.
Applied to files:
packages/vue-query/src/__tests__/queryOptions.test-d.ts
📚 Learning: 2025-11-02T22:52:33.071Z
Learnt from: DogPawHat
Repo: TanStack/query PR: 9835
File: packages/query-core/src/__tests__/queryClient.test-d.tsx:242-256
Timestamp: 2025-11-02T22:52:33.071Z
Learning: In the TanStack Query codebase, the new `query` and `infiniteQuery` methods support the `select` option for data transformation, while the legacy `fetchQuery` and `fetchInfiniteQuery` methods do not support `select` and should reject it at the type level.
Applied to files:
packages/vue-query/src/__tests__/queryOptions.test-d.tspackages/vue-query/src/queryOptions.ts
📚 Learning: 2025-08-19T03:18:18.303Z
Learnt from: oscartbeaumont
Repo: TanStack/query PR: 9564
File: packages/solid-query-devtools/src/production.tsx:2-3
Timestamp: 2025-08-19T03:18:18.303Z
Learning: In the solid-query-devtools package, the codebase uses a pattern of type-only default imports combined with typeof for component type annotations (e.g., `import type SolidQueryDevtoolsComp from './devtools'` followed by `typeof SolidQueryDevtoolsComp`). This pattern is consistently used across index.tsx and production.tsx files, and the maintainers prefer consistency over changing this approach.
Applied to files:
packages/vue-query/src/queryOptions.ts
🧬 Code graph analysis (1)
packages/vue-query/src/__tests__/queryOptions.test-d.ts (1)
packages/vue-query/src/queryOptions.ts (1)
queryOptions(78-80)
🔇 Additional comments (3)
packages/vue-query/src/__tests__/queryOptions.test-d.ts (1)
9-22: LGTM! Well-structured type test for issue#7892.The test correctly verifies that:
queryFnandstaleTimeare accessible with proper types includingundefined(since they're optional)queryKeyusestoMatchTypeOfappropriately since the actual type isDataTag<...>which extendsreadonly unknown[]packages/vue-query/src/queryOptions.ts (2)
11-31: LGTM! Clean type definition that directly addresses the core issue.Using
QueryObserverOptionsdirectly (rather than wrapped inMaybeRef) ensures that properties likequeryFn,staleTime, etc. are accessible on the returned options object. The JSDoc comment clearly documents the design intent.
33-54: LGTM! Correct distinction from DefinedInitialDataOptions.The
initialDatafield properly allows:
- Omission (optional with
?)- Explicit
undefined- A function that may return
undefined(InitialDataFunction)- A direct non-undefined value
This ensures the overload resolution correctly routes to
DefinedInitialDataOptionswheninitialDatais guaranteed to be defined.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
1 participant
Fixes #7892
The return type of queryOptions in vue-query was using types wrapped in MaybeRef which prevented TypeScript from seeing properties like queryFn, staleTime, placeholderData, etc directly on the returned object.
Solution: Created unwrapped types (DefinedInitialDataOptions and UndefinedInitialDataOptions) specifically for queryOptions, matching react-query's approach. These use QueryObserverOptions directly without MaybeRef.
Changes:
Testing: 17 type tests pass including new test verifying queryFn and staleTime are accessible on returned options object.
Summary by CodeRabbit
Tests
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.