feat(vue-query): support useQuery options getter #9866
Conversation
π¦ Changeset detectedLatest commit: b2a96a9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 2 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughThis PR extends vue-query's Changes
Estimated code review effortπ― 2 (Simple) | β±οΈ ~12 minutes
Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touchesβ Failed checks (2 warnings)
β Passed checks (1 passed)
β¨ Finishing touches
π§ͺ Generate unit tests (beta)
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 |
|
View your CI Pipeline Execution β for commit b2a96a9
βοΈ Nx Cloud last updated this comment at |
|
Sizes for commit b2a96a9:
|
Codecov Reportβ
All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #9866 +/- ##
===========================================
+ Coverage 45.76% 71.28% +25.51%
===========================================
Files 200 19 -181
Lines 8410 484 -7926
Branches 1930 140 -1790
===========================================
- Hits 3849 345 -3504
+ Misses 4113 109 -4004
+ Partials 448 30 -418 π New features to boost your workflow:
|
![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
π§Ή Nitpick comments (2)
packages/vue-query/src/__tests__/useQuery.test.ts (1)
47-63: LGTM! Test validates the basic getter usage.The test correctly verifies that
useQueryaccepts a getter function returning options and produces the expected result state.Consider adding a test case for a reactive getter to validate that changes to refs accessed inside the getter properly trigger re-computation:
test('should react to changes in options getter dependencies', async () => { const key = ref('initial-key') const query = useQuery(() => ({ queryKey: ['reactive', key.value], queryFn: () => sleep(0).then(() => `result-${key.value}`), })) await vi.advanceTimersByTimeAsync(0) expect(query.data.value).toBe('result-initial-key') key.value = 'updated-key' await vi.advanceTimersByTimeAsync(0) expect(query.data.value).toBe('result-updated-key') })This would provide stronger validation of the reactivity behavior.
packages/vue-query/src/useQuery.ts (1)
91-109: Consider extending getter support to all overloads for type consistency.The first two overloads (lines 97 and 107) accept
DefinedInitialQueryOptionsandUndefinedInitialQueryOptionsdirectly, while the generic overloads (lines 117-119, 129-131) wrapUseQueryOptionsinMaybeRefOrGetter.This creates a type-level inconsistency: users can pass a getter returning options with
initialData, and it will work at runtime (matching the generic overload), but they'll lose the refined return type (UseQueryDefinedReturnType) that guaranteesdatais defined.Consider wrapping the first two overloads with
MaybeRefOrGetterfor consistency:export function useQuery< TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, >( - options: DefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey>, + options: MaybeRefOrGetter<DefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey>>, queryClient?: QueryClient, ): UseQueryDefinedReturnType<TData, TError> export function useQuery< TQueryFnData = unknown, TError = DefaultError, TData = TQueryFnData, TQueryKey extends QueryKey = QueryKey, >( - options: UndefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey>, + options: MaybeRefOrGetter<UndefinedInitialQueryOptions<TQueryFnData, TError, TData, TQueryKey>>, queryClient?: QueryClient, ): UseQueryReturnType<TData, TError>This would allow users to benefit from type refinement even when using getters.
π Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
π Files selected for processing (4)
.changeset/dark-birds-turn.md(1 hunks)packages/vue-query/src/__tests__/useQuery.test.ts(1 hunks)packages/vue-query/src/useBaseQuery.ts(1 hunks)packages/vue-query/src/useQuery.ts(2 hunks)
π§° Additional context used
π§ Learnings (1)
π 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:
.changeset/dark-birds-turn.md
𧬠Code graph analysis (3)
packages/vue-query/src/useBaseQuery.ts (2)
packages/query-core/src/queryObserver.ts (1)
options(379-385)packages/vue-query/src/utils.ts (1)
cloneDeepUnref(70-97)
packages/vue-query/src/useQuery.ts (3)
packages/vue-query/src/types.ts (1)
MaybeRefOrGetter(27-27)packages/react-query/src/types.ts (1)
UseQueryOptions(65-73)packages/solid-query/src/types.ts (1)
UseQueryOptions(60-65)
packages/vue-query/src/__tests__/useQuery.test.ts (1)
packages/vue-query/src/useQuery.ts (1)
useQuery(123-137)
β° Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Preview
- GitHub Check: Test
π Additional comments (3)
.changeset/dark-birds-turn.md (1)
1-5: LGTM! Changeset is correctly formatted.The minor version bump is appropriate for this new feature, and the description accurately summarizes the change.
packages/vue-query/src/useBaseQuery.ts (1)
84-89: LGTM! Getter resolution is correctly implemented.The logic properly resolves the getter function before passing to
cloneDeepUnref. Since this executes inside thecomputed(), any reactive dependencies accessed within the getter automatically become dependencies of the computed, ensuring proper reactivity.packages/vue-query/src/useQuery.ts (1)
117-121: LGTM! Generic overloads correctly accept getters.The type signatures properly reflect the new capability to accept options as
MaybeRefOrGetter, enabling users to pass plain objects, refs, or getter functions.Also applies to: 129-137
π― Changes
Fixes: #9789
β Checklist
pnpm run test:pr.π Release Impact
Summary by CodeRabbit