doc: v3.1.0 tanstack-query docs update #541
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughRewrites the TanStack Query client SDK docs: replaces Installation with Framework Compatibility (React/Vue/Svelte; Angular/Solid noted), expands context provider and logging options, adds Configuration Overrides, reworks per-framework examples (React, Vue, Svelte), and reorganizes Samples, Interactive Demo, and Full-Stack Samples. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Pre-merge checks✅ Passed checks (3 passed)
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 (2)
docs/service/client-sdk/tanstack-query/index.md (2)
53-57: Minor style improvement: use "incompatible" instead of "not compatible".Line 55 can be more concise by replacing the phrase with a single word.
- `@tanstack/svelte-query` v6 leverages Svelte 5's [runes](https://svelte.dev/docs/svelte/what-are-runes) reactivity system. ZenStack is not compatible with prior versions that uses Svelte stores. + `@tanstack/svelte-query` v6 leverages Svelte 5's [runes](https://svelte.dev/docs/svelte/what-are-runes) reactivity system. ZenStack is incompatible with prior versions that use Svelte stores.Also note: "that uses" should be "that use" (subject-verb agreement).
188-190: Improve formality: replace "pretty much" with more direct phrasing.The phrase "pretty much the same" is informal for technical documentation. Consider rephrasing to be more precise.
- From there, using the hooks is pretty much the same as using `ZenStackClient` in backend code. + From there, using the hooks is similar to using `ZenStackClient` in backend code.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/service/client-sdk/tanstack-query/index.md
🧰 Additional context used
🪛 LanguageTool
docs/service/client-sdk/tanstack-query/index.md
[style] ~55-~55: Consider using “incompatible” to avoid wordiness.
Context: ...e-runes) reactivity system. ZenStack is not compatible with prior versions that uses Svelte st...
(NOT_ABLE_PREMIUM)
[style] ~190-~190: The phrase ‘pretty much’ can be informal. To strengthen your writing, consider removing it or replacing it with an adverb.
Context: ... models. From there, using the hooks is pretty much the same as using ZenStackClient in b...
(PRETTY_MUCH)
🔇 Additional comments (6)
docs/service/client-sdk/tanstack-query/index.md (6)
87-186: Context Provider section is well-structured and examples are consistent.The reformatting of the context provider examples across React, Vue, and Svelte improves readability and consistency. The logging configuration description is now more explicit about supported options.
192-270: Framework-specific examples are comprehensive and well-documented.The expanded examples for React, Vue, and Svelte now include proper reactivity guidance with helpful cross-references to TanStack Query migration and documentation guides. Framework-specific patterns (function-wrapped arguments in Svelte v6, reactive arguments in Vue) are clearly explained.
276-293: Configuration Overrides section is clear and well-exemplified.The two-level override examples (client-level and hook-level) effectively demonstrate the hierarchical configuration system. Examples are concise and realistic.
340-519: Infinite Query examples are comprehensive and framework-appropriate.All three framework examples (React, Vue, Svelte) correctly demonstrate infinite query pagination with proper framework idioms. The getNextPageParam logic is consistent and well-documented. External documentation links aid further learning.
272-274: CLI documentation reference is well-placed and helpful.The addition of the
--liteflag documentation and CLI Reference link appropriately addresses security concerns about exposing access policies in frontend code.
579-598: The Samples section properly implements the StackBlitzGithub component and provides correct sample links. The component is correctly imported and configured with the appropriate repoPath and openFile attributes. The GitHub links follow the documented directory structure and are consistent with the samples pattern referenced elsewhere in the documentation (docs/samples.md).
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
docs/service/client-sdk/tanstack-query/index.md (2)
53-57: Minor style improvement: use "incompatible" instead of "not compatible".The warning message is slightly wordy. Consider "ZenStack is incompatible with prior versions that use Svelte stores" for clarity.
188-190: Minor style improvement: remove "pretty much" for stronger writing.The phrase is informal. Consider replacing with a more direct statement: "From there, using the hooks is the same as using
ZenStackClientin backend code" or "From there, you use the hooks similarly toZenStackClientin backend code."
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/service/client-sdk/tanstack-query/index.md
🧰 Additional context used
🪛 LanguageTool
docs/service/client-sdk/tanstack-query/index.md
[style] ~55-~55: Consider using “incompatible” to avoid wordiness.
Context: ...e-runes) reactivity system. ZenStack is not compatible with prior versions that use Svelte sto...
(NOT_ABLE_PREMIUM)
[style] ~190-~190: The phrase ‘pretty much’ can be informal. To strengthen your writing, consider removing it or replacing it with an adverb.
Context: ... models. From there, using the hooks is pretty much the same as using ZenStackClient in b...
(PRETTY_MUCH)
🔇 Additional comments (3)
docs/service/client-sdk/tanstack-query/index.md (3)
36-293: Well-organized restructuring with comprehensive per-framework guidance.The refactoring significantly improves documentation clarity:
- Framework Compatibility section establishes support scope upfront
- Per-framework examples in Context Provider and Query Hooks sections cater to different developer audiences
- New Configuration Overrides section effectively explains the hierarchical configuration model
- Code examples are consistent and properly formatted across React, Vue, and Svelte
The documentation is now more accessible and actionable for developers working with different frameworks.
340-519: Infinite Query examples well-structured with framework-specific patterns.The per-framework infinite query examples clearly show how to handle reactivity in each framework (Vue's reactive objects, Svelte's rune-based functions). The logic is consistent across examples while respecting framework conventions.
579-597: Samples section reorganization improves discoverability.Grouping the interactive demo separately from full-stack samples makes it easier for users to find the example type they need. The links to GitHub repositories are a helpful addition.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
docs/service/client-sdk/tanstack-query/index.md (2)
53-57: Consider refining the warning phrasing for clarity.The warning states "ZenStack is not compatible with prior versions" — consider using "incompatible" for more concise phrasing and stronger emphasis on the limitation.
🔎 Suggested phrasing refinement
- `@tanstack/svelte-query` v6 leverages Svelte 5's [runes](https://svelte.dev/docs/svelte/what-are-runes) reactivity system. ZenStack is not compatible with prior versions that use Svelte stores. + `@tanstack/svelte-query` v6 leverages Svelte 5's [runes](https://svelte.dev/docs/svelte/what-are-runes) reactivity system. ZenStack is incompatible with prior versions that use Svelte stores.
190-190: Optional: Replace informal phrasing for stronger documentation tone.The phrase "pretty much the same as" is conversational and can be replaced with more precise language for formal technical documentation.
🔎 Suggested refinement
- Call the `useClientQueries` hook to get a root object to access CRUD hooks for all models. From there, using the hooks is pretty much the same as using `ZenStackClient` in backend code. + Call the `useClientQueries` hook to get a root object to access CRUD hooks for all models. From there, using the hooks mirrors the ORM query APIs and is fundamentally the same as using `ZenStackClient` in backend code.
📜 Review details
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/service/client-sdk/tanstack-query/index.md
🧰 Additional context used
🪛 LanguageTool
docs/service/client-sdk/tanstack-query/index.md
[style] ~55-~55: Consider using “incompatible” to avoid wordiness.
Context: ...e-runes) reactivity system. ZenStack is not compatible with prior versions that use Svelte sto...
(NOT_ABLE_PREMIUM)
[style] ~190-~190: The phrase ‘pretty much’ can be informal. To strengthen your writing, consider removing it or replacing it with an adverb.
Context: ... models. From there, using the hooks is pretty much the same as using ZenStackClient in b...
(PRETTY_MUCH)
🔇 Additional comments (3)
docs/service/client-sdk/tanstack-query/index.md (3)
36-293: Excellent documentation restructuring with clear framework guidance and expanded configuration options.The rewrite successfully:
- Replaces generic Installation with explicit Framework Compatibility requirements, making version constraints immediately visible
- Adds valuable context about framework support status (Angular/Solid noted as unsupported)
- Expands Context Provider section with consistent, well-structured examples across all three supported frameworks (React/Vue/Svelte)
- Introduces the new Configuration Overrides section with clear hierarchical patterns and concrete examples
- Maintains safe patterns in all fetch function examples (null-coalescing operator usage is correct)
The cross-reference from Context Provider to Configuration Overrides (line 186) is properly placed and functional.
192-271: Well-organized framework-specific examples with appropriate reactive argument guidance.The
useClientQueriesexamples for each framework are consistent and include:
- Clear imports and schema usage patterns
- Vue example (lines 219–221) provides helpful context about reactive arguments
- Svelte example (lines 248–250) documents the v6 migration requirement (function-wrapped arguments)
- All examples follow framework idioms correctly
349-515: Infinite Query examples are well-structured and framework-appropriate.All three framework examples:
- Use correct pagination logic with
getNextPageParam- Calculate
fetchedlength consistently across pages- Apply framework-specific adaptations correctly (Svelte function wrapping at lines 482, 483)
- Include the
getNextPageParamcheck that prevents fetching when results are underPAGE_SIZE
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.