document TanStack Query plugin for Angular #483
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughAdds Angular as a documented target in the tanstack-query reference: updates the targets table to note Angular v5 support and inserts Angular-specific examples (DI setup, component usage, reactive filtering, and infinite queries) into existing Tabs alongside React/Vue/Svelte. Documentation-only changes. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes ✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🔭 Outside diff range comments (1)
docs/reference/plugins/tanstack-query.mdx (1)
462-496: Vue example: missing create hook and mismatched handler name
- create is used but never defined.
- The template calls onCreatePost but the function is named onCreate.
<script setup lang="ts"> import { useFindManyPost, useCreatePost } from '@/lib/hooks'; const props = defineProps({ userId: String }); // list all posts that're visible to the current user, together with their authors const { data: posts } = useFindManyPost({ include: { author: true }, orderBy: { createdAt: 'desc' }, }); -const onCreate = () => { +const create = useCreatePost(); + +const onCreatePost = () => { create.mutate({ data: { title: 'My awesome post', authorId: userId, } }); }; </script> <template> <div> - <button @click="onCreatePost">Create</button> + <button @click="onCreatePost">Create</button> <ul v-if="posts"> <li v-for="post in posts" :key="post.id"> {{ post.title }} by {{ post.author.email }} </li> </ul> </div> </template>
🧹 Nitpick comments (1)
docs/reference/plugins/tanstack-query.mdx (1)
376-411: Angular App Setup tab: code block title doesn’t match contentsThis snippet configures application-level providers; the title should be app.config.ts (not a component).
-```typescript title='src/app/posts/posts.component.ts' +```typescript title='src/app/app.config.ts'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/reference/plugins/tanstack-query.mdx(5 hunks)
🔇 Additional comments (2)
docs/reference/plugins/tanstack-query.mdx (2)
548-549: No action neededClosing TabItem for Svelte was added as part of tab restructuring; nothing to change.
186-214: Add missingApplicationConfigimport, align endpoint, and verify path aliasThe
app.config.tssnippet needs a couple of fixes to match the surrounding examples and ensure it compiles as shown:
- Import
ApplicationConfigfrom@angular/coreat the top of the snippet.- Change the
endpointto the default'/api/model'for consistency with other examples.- Double-check that your project’s
tsconfig.jsondefines the@/lib/*path alias; if not, switch the hook import to a relative path (e.g.../../lib/hooks).```typescript title='app.config.ts' -import { +import { provideTanStackQuery, QueryClient, } from '@tanstack/angular-query-experimental'; +import { ApplicationConfig } from '@angular/core'; import { provideAngularQueryContext } from '@/lib/hooks'; import type { FetchFn } from '@zenstackhq/tanstack-query/runtime'; // ... export const appConfig: ApplicationConfig = { providers: [ provideTanStackQuery(new QueryClient()), provideAngularQueryContext({ - endpoint: 'http://localhost:3000/v1/api/rpc', + endpoint: '/api/model', fetch: myFetch, logging: true, }), ], };</details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (4)
docs/reference/plugins/tanstack-query.mdx (4)
19-25: Align intro/install guidance with Angular v5-only requirementIntro looks good, but the install sentence is now misleading for Angular (v5-only). Update it to avoid implying v4 works for Angular.
- To use the generated hooks, you need to install "tanstack-query" for the target framework with version 4.0.0 or above. + To use the generated hooks, install the framework-specific TanStack Query package for v4 or v5 as appropriate. Angular requires v5.
380-410: Fix file title and import path in Angular App Setup exampleThe snippet is an application configuration, not a component. Also align the hooks import path with earlier sections (use a relative path unless you’ve documented the alias).
-```typescript title='src/app/posts/posts.component.ts' +```typescript title='app.config.ts' @@ -import { provideAngularQueryContext } from '@/lib/hooks'; +import { provideAngularQueryContext } from '../lib/hooks';If you intend to demonstrate additional providers (router, error listeners, zoneless CD), keep them; otherwise, consider trimming to the minimum to stay focused on TanStack Query setup.
844-845: Point to Angular v5 “Guides” page for infinite queriesLink to the Angular v5 guide rather than an examples subpage for broader context.
-Here's a quick example of using infinite query to load a list of posts with infinite pagination. See [Tanstack Query documentation](https://tanstack.com/query/v5/docs/framework/angular/examples/infinite-query-with-max-pages) for more details. +Here's a quick example of using infinite query to load a list of posts with infinite pagination. See [Angular Infinite Queries guide (TanStack Query v5)](https://tanstack.com/query/v5/docs/framework/angular/guides/infinite-queries) for more details.
551-633: Angular PostsComponent: fix hooks import path and tidy comment
- Switch to the same import path used elsewhere (relative or documented alias).
- Minor comment polish.
-import { useCreatePost, useFindManyPost } from '@lib/hooks/generatedAPI'; +import { useCreatePost, useFindManyPost } from '../lib/hooks'; @@ - //For Reactivity in angular we have to pass the signal as callback + // For reactivity in Angular we pass the computed signal via a callbackIf your project actually exposes the hooks at a different path (e.g., '@/lib/hooks'), ensure the alias is declared in tsconfig and use it consistently across the docs.
🧹 Nitpick comments (1)
docs/reference/plugins/tanstack-query.mdx (1)
37-38: Nit: punctuation and consistency in options tableThe wording is good; add a period at the end for consistency with other sentences.
-| version | String | Version of TanStack Query to generate for. Choose from "v4" and "v5". Angular supports only "v5" | No | v5 | +| version | String | Version of TanStack Query to generate for. Choose from "v4" and "v5". Angular supports only "v5". | No | v5 |
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/reference/plugins/tanstack-query.mdx(6 hunks)
🔇 Additional comments (1)
docs/reference/plugins/tanstack-query.mdx (1)
890-901: Good fix: spreading computed value in getNextPageParamUsing ...this.fetchArgs() (instead of the signal function) avoids spreading a function object. LGTM.
2 participants
adds docs for zenstackhq/zenstack#2206
Summary by CodeRabbit