feat(tanstack): migrate vue query #365
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds Vue 3 integration for the TanStack Query client: new Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Poem
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used🧬 Code graph analysis (1)packages/clients/tanstack-query/src/vue.ts (3)
⏰ 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). (3)
🔇 Additional comments (7)
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 |
|
Claude finished @ymc9's task —— View job PR Review: Vue.js TanStack Query IntegrationI've reviewed this PR that adds Vue.js support to the TanStack Query integration package. Here's my comprehensive analysis: Review Tasks:
Code Quality & Best Practices ✅Excellent implementation overall with strong consistency:
Architecture & Design ✅Well-structured implementation that follows Vue patterns:
Potential Issues & Improvements 🔍
Performance Considerations ✅
Security Concerns ✅
Missing Test Coverage
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds Vue.js support to the @zenstackhq/tanstack-query package, extending its capabilities beyond React to support Vue applications. The implementation mirrors the existing React integration, providing comparable query and mutation hooks for Vue developers.
- Added Vue.js adapter with full query and mutation hooks API
- Refactored
useInternalMutationin React to extractloggingcontext properly - Updated parameter naming in
makeUrlfor consistency
Reviewed Changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-workspace.yaml | Added Vue 3.5.22 to the catalog |
| pnpm-lock.yaml | Added dependencies for Vue and @tanstack/vue-query with their transitive dependencies |
| packages/clients/tanstack-query/tsup.config.ts | Added Vue entry point for build configuration |
| packages/clients/tanstack-query/src/vue.ts | New Vue adapter implementation with query hooks, mutations, and context providers |
| packages/clients/tanstack-query/src/utils/common.ts | Renamed url parameter to endpoint in makeUrl for clarity |
| packages/clients/tanstack-query/src/react.ts | Refactored to extract logging from context at function start; updated deprecated JSDoc link format |
| packages/clients/tanstack-query/package.json | Added Vue exports, peer dependencies, and devDependencies |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Claude finished @ymc9's task —— View job PR Review: Vue.js TanStack Query IntegrationI've completed a comprehensive review of this PR that adds Vue.js support to the TanStack Query integration package. Review Tasks:
Code Quality & Best Practices ✅Excellent implementation overall with strong consistency:
Architecture & Design ✅Well-structured implementation that follows Vue patterns:
Issues Found 🔍1. Missing Suspense Support
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/clients/tanstack-query/package.json (1)
75-89: Declare Vue as a peer dependency.The Vue entry point imports
vue, so consumers must supply it. Without declaringvueas a peer (and marking it optional likereact), pnpm/yarn users will hit missing dependency errors or duplicate Vue installs. Please addvuetopeerDependencieswith a matching version range and mirror the optional meta entry."peerDependencies": { "@tanstack/react-query": "^5.0.0", "@tanstack/vue-query": "^5.0.0", - "react": "^18 || ^19" + "react": "^18 || ^19", + "vue": "^3.5.0" }, "peerDependenciesMeta": { "@tanstack/react-query": { "optional": true }, "@tanstack/vue-query": { "optional": true }, - "react": { + "react": { "optional": true - } + }, + "vue": { + "optional": true + } }
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
packages/clients/tanstack-query/package.json(3 hunks)packages/clients/tanstack-query/src/react.ts(2 hunks)packages/clients/tanstack-query/src/utils/common.ts(1 hunks)packages/clients/tanstack-query/src/vue.ts(1 hunks)packages/clients/tanstack-query/tsup.config.ts(1 hunks)pnpm-workspace.yaml(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (2)
packages/clients/tanstack-query/src/utils/common.ts (1)
packages/common-helpers/src/lower-case-first.ts (1)
lowerCaseFirst(1-3)
packages/clients/tanstack-query/src/vue.ts (4)
packages/clients/tanstack-query/src/utils/common.ts (10)
APIContext(111-126)DEFAULT_QUERY_ENDPOINT(11-11)ExtraQueryOptions(101-106)ExtraMutationOptions(81-96)getQueryKey(180-190)makeUrl(211-223)fetcher(128-159)marshal(192-199)setupInvalidation(234-255)setupOptimisticUpdate(313-357)packages/schema/src/schema.ts (2)
SchemaDef(10-18)GetModels(109-109)packages/orm/src/client/crud-types.ts (17)
FindUniqueArgs(669-671)FindArgs(648-664)CreateArgs(677-682)CreateManyArgs(684-684)CreateManyAndReturnArgs(686-692)UpdateArgs(815-821)UpdateManyArgs(823-826)UpdateManyAndReturnArgs(828-834)UpsertArgs(842-849)DeleteArgs(961-966)DeleteManyArgs(968-971)CountArgs(977-982)CountResult(988-998)AggregateArgs(1004-1018)AggregateResult(1044-1072)GroupByArgs(1091-1108)GroupByResult(1110-1144)packages/common-helpers/src/lower-case-first.ts (1)
lowerCaseFirst(1-3)
🪛 Biome (2.1.2)
packages/clients/tanstack-query/src/react.ts
[error] 476-476: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
This is the call path until the hook.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
packages/clients/tanstack-query/src/vue.ts
[error] 177-177: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 198-198: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 202-202: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 206-206: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 210-210: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 214-214: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 218-218: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 222-222: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 226-226: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 230-230: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 234-234: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 238-238: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 242-242: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 246-246: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 250-250: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 254-254: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 258-258: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 289-289: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
This is the call path until the hook.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 316-316: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
This is the call path until the hook.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 347-347: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
This is the call path until the hook.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
[error] 400-400: This hook is being called from a nested function, but all hooks must be called unconditionally from the top-level component.
This is the call path until the hook.
For React to preserve state between calls, hooks needs to be called unconditionally and always in the same order.
See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
(lint/correctness/useHookAtTopLevel)
⏰ 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). (4)
- GitHub Check: Cleanup artifacts
- GitHub Check: build-test (20.x, postgresql)
- GitHub Check: build-test (20.x, sqlite)
- GitHub Check: claude-review
|
Claude Code is working… I'll analyze this and get back to you. |
Summary by CodeRabbit
New Features
Chores