docs(examples): update queryKey to be reactive in vue files #9807
Conversation
|
WalkthroughChanged queryKey configuration in five Vue example Post.vue files, replacing static Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes The changes follow a consistent, homogeneous pattern across five files with identical logic modifications. Review complexity is straightforward—each change is a single configuration adjustment. However, reviewers should verify that the function-wrapped query key properly integrates with Vue Query's reactivity system and does not introduce unintended re-fetch behavior. Possibly related issues
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 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 |
![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 (4)
examples/vue/basic/src/Post.vue (1)
23-25: Same suggestion: use toRef/computed for the reactive part of the key.Your change works; using a ref is a bit clearer and improves inference.
- queryKey: ['post', () => props.postId], + queryKey: ['post', toRef(props, 'postId')],Add import:
- import { defineComponent } from 'vue' + import { defineComponent, toRef } from 'vue'examples/vue/dependent-queries/src/Post.vue (1)
34-36: Prefer computed/toRef for the key to match the rest of the file.Works as-is. Since you already use
computed, consider:- queryKey: ['post', () => props.postId], + queryKey: ['post', computed(() => props.postId)],Alternatively:
- queryKey: ['post', () => props.postId], + queryKey: ['post', toRef(props, 'postId')],(If you pick toRef, add
toRefto the Vue import.)examples/vue/persister/src/Post.vue (1)
25-27: Tweak tuple for clearer typing with persister.This works. To avoid a function in the tuple type and keep inference tidy, prefer a ref/computed:
Option A (keep
as const):- queryKey: ['post', () => props.postId] as const, + queryKey: ['post', toRef(props, 'postId')] as const,Option B (no
as const, simplest):- queryKey: ['post', () => props.postId] as const, + queryKey: ['post', toRef(props, 'postId')],Add import:
- import { defineComponent } from 'vue' + import { defineComponent, toRef } from 'vue'examples/vue/2.6-basic/src/Post.vue (1)
23-25: Vue 2.6: use toRef for the reactive key source.Change is fine. Using a ref avoids a function inside the key prior to unwrapping.
- queryKey: ['post', () => props.postId], + queryKey: ['post', toRef(props, 'postId')],Add import:
- import { defineComponent, toRaw } from '@vue/composition-api' + import { defineComponent, toRaw, toRef } from '@vue/composition-api'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
examples/vue/2.6-basic/src/Post.vue(1 hunks)examples/vue/2.7-basic/src/Post.vue(1 hunks)examples/vue/basic/src/Post.vue(1 hunks)examples/vue/dependent-queries/src/Post.vue(1 hunks)examples/vue/persister/src/Post.vue(1 hunks)
🔇 Additional comments (1)
examples/vue/2.7-basic/src/Post.vue (1)
23-25: Current implementation follows Vue Query v5 recommendations; refactor is optional.The inline getter in
queryKeyis officially supported and recommended by Vue Query v5 for trivial property access likeprops.postId. UsingtoRefis also valid but unnecessary here—reservetoRef/computedfor cases requiring memoization or expensive derived state. No changes required.
|
View your CI Pipeline Execution ↗ for commit a4673af
☁️ Nx Cloud last updated this comment at |
2 participants
🎯 Changes
Change the value passed to
queryKeyin the vue examples to be reactive and trigger a refetch when the prop changes✅ Checklist
pnpm run test:pr.🚀 Release Impact
Fixes #9782
Summary by CodeRabbit