Angular v19+ pending tasks and lazy derived signal proxy initialization

.changeset/deep-crews-open.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/angular-query-experimental': minor
+---
+
+require Angular v19+ and use Angular component effect scheduling

docs/framework/angular/angular-httpclient-and-other-data-fetching-clients.md

@@ -36,8 +36,6 @@ class ExampleComponent {
 ```
 
 > Since Angular is moving towards RxJS as an optional dependency, it's expected that `HttpClient` will also support promises in the future.
->
-> Support for observables in TanStack Query for Angular is planned.
 
 ## Comparison table
 

docs/framework/angular/guides/caching.md

@@ -27,7 +27,7 @@ Let's assume we are using the default `gcTime` of **5 minutes** and the default
   - When the request completes successfully, the cache's data under the `['todos']` key is updated with the new data, and both instances are updated with the new data.
 - Both instances of the `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos })` query are destroyed and no longer in use.
   - Since there are no more active instances of this query, a garbage collection timeout is set using `gcTime` to delete and garbage collect the query (defaults to **5 minutes**).
-- Before the cache timeout has completed, another instance of `injectQuery(() => ({ queryKey: ['todos'], queyFn: fetchTodos })` mounts. The query immediately returns the available cached data while the `fetchTodos` function is being run in the background. When it completes successfully, it will populate the cache with fresh data.
+- Before the cache timeout has completed, another instance of `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos })` mounts. The query immediately returns the available cached data while the `fetchTodos` function is being run in the background. When it completes successfully, it will populate the cache with fresh data.
 - The final instance of `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos })` gets destroyed.
 - No more instances of `injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodos })` appear within **5 minutes**.
   - The cached data under the `['todos']` key is deleted and garbage collected.

docs/framework/angular/guides/default-query-function.md

@@ -28,19 +28,27 @@ bootstrapApplication(MyAppComponent, {
   providers: [provideTanStackQuery(queryClient)],
 })
 
-export class PostsComponent {
+@Component({
+  // ...
+})
+class PostsComponent {
   // All you have to do now is pass a key!
   postsQuery = injectQuery<Array<Post>>(() => ({
     queryKey: ['/posts'],
   }))
   // ...
 }
 
-export class PostComponent {
+@Component({
+  // ...
+})
+class PostComponent {
+  postId = input(0)
+
   // You can even leave out the queryFn and just go straight into options
   postQuery = injectQuery<Post>(() => ({
-    enabled: this.postIdSignal() > 0,
-    queryKey: [`/posts/${this.postIdSignal()}`],
+    enabled: this.postId() > 0,
+    queryKey: [`/posts/${this.postId()}`],
   }))
   // ...
 }

docs/framework/angular/guides/dependent-queries.md

@@ -10,14 +10,14 @@ replace: { 'useQuery': 'injectQuery', 'useQueries': 'injectQueries' }
 ```ts
 // Get the user
 userQuery = injectQuery(() => ({
-  queryKey: ['user', email],
-  queryFn: getUserByEmail,
+  queryKey: ['user', this.email()],
+  queryFn: this.getUserByEmail,
 }))
 
 // Then get the user's projects
 projectsQuery = injectQuery(() => ({
   queryKey: ['projects', this.userQuery.data()?.id],
-  queryFn: getProjectsByUser,
+  queryFn: this.getProjectsByUser,
   // The query will not execute until the user id exists
   enabled: !!this.userQuery.data()?.id,
 }))
@@ -26,8 +26,25 @@ projectsQuery = injectQuery(() => ({
 [//]: # 'Example'
 [//]: # 'Example2'
 
+Dynamic parallel query - `injectQueries` can depend on a previous query also, here's how to achieve this:
+
+> IMPORTANT: `injectQueries` is experimental and is provided in it's own entry point
+
 ```ts
-// injectQueries is under development for Angular Query
+// Get the users ids
+userIds = injectQuery(() => ({
+  queryKey: ['users'],
+  queryFn: getUserData,
+  select: (users) => users.map((user) => user.id),
+}))
+
+// Then get the users messages
+userQueries = injectQueries(() => ({
+  queries: (this.userIds() ?? []).map((userId) => ({
+    queryKey: ['user', userId],
+    queryFn: () => getUserById(userId),
+  })),
+}))
 ```
 
 [//]: # 'Example2'

docs/framework/angular/guides/disabling-queries.md

@@ -13,9 +13,9 @@ replace: { 'useQuery': 'injectQuery' }
   template: `<div>
     <button (click)="query.refetch()">Fetch Todos</button>
 
-    @if (query.data()) {
+    @if (query.data(); as data) {
       <ul>
-        @for (todo of query.data(); track todo.id) {
+        @for (todo of data; track todo.id) {
           <li>{{ todo.title }}</li>
         }
       </ul>
@@ -70,7 +70,7 @@ export class TodosComponent {
 [//]: # 'Example3'
 
 ```angular-ts
-import { skipToken, injectQuery } from '@tanstack/query-angular'
+import { skipToken, injectQuery } from '@tanstack/angular-query-experimental'
 
 @Component({
   selector: 'todos',

docs/framework/angular/guides/does-this-replace-client-state.md

@@ -7,5 +7,7 @@ replace:
     'useQuery': 'injectQuery',
     'useMutation': 'injectMutation',
     'hook': 'function',
+    'Redux, MobX or': 'NgRx Store or',
+    'Redux, MobX, Zustand': 'NgRx Store, custom services with RxJS',
   }
 ---

docs/framework/angular/guides/important-defaults.md

@@ -4,7 +4,6 @@ title: Important Defaults
 ref: docs/framework/react/guides/important-defaults.md
 replace:
   {
-    'React': 'Angular',
     'react-query': 'angular-query',
     'useQuery': 'injectQuery',
     'useInfiniteQuery': 'injectInfiniteQuery',

docs/framework/angular/guides/infinite-queries.md

@@ -75,6 +75,8 @@ export class Example {
   template: ` <list-component (endReached)="fetchNextPage()" /> `,
 })
 export class Example {
+  projectsService = inject(ProjectsService)
+
   query = injectInfiniteQuery(() => ({
     queryKey: ['projects'],
     queryFn: async ({ pageParam }) => {

docs/framework/angular/guides/initial-query-data.md

@@ -81,7 +81,7 @@ result = injectQuery(() => ({
 ```ts
 result = injectQuery(() => ({
   queryKey: ['todo', this.todoId()],
-  queryFn: () => fetch('/todos'),
+  queryFn: () => fetch(`/todos/${this.todoId()}`),
   initialData: () => {
     // Use a todo from the 'todos' query as the initial data for this todo query
     return this.queryClient
@@ -99,9 +99,11 @@ result = injectQuery(() => ({
   queryKey: ['todos', this.todoId()],
   queryFn: () => fetch(`/todos/${this.todoId()}`),
   initialData: () =>
-    queryClient.getQueryData(['todos'])?.find((d) => d.id === this.todoId()),
+    this.queryClient
+      .getQueryData(['todos'])
+      ?.find((d) => d.id === this.todoId()),
   initialDataUpdatedAt: () =>
-    queryClient.getQueryState(['todos'])?.dataUpdatedAt,
+    this.queryClient.getQueryState(['todos'])?.dataUpdatedAt,
 }))
 ```
 
@@ -114,7 +116,7 @@ result = injectQuery(() => ({
   queryFn: () => fetch(`/todos/${this.todoId()}`),
   initialData: () => {
     // Get the query state
-    const state = queryClient.getQueryState(['todos'])
+    const state = this.queryClient.getQueryState(['todos'])
 
     // If the query exists and has data that is no older than 10 seconds...
     if (state && Date.now() - state.dataUpdatedAt <= 10 * 1000) {

docs/framework/angular/guides/invalidations-from-mutations.md

@@ -2,7 +2,12 @@
 id: invalidations-from-mutations
 title: Invalidations from Mutations
 ref: docs/framework/react/guides/invalidations-from-mutations.md
-replace: { 'useMutation': 'injectMutation', 'hook': 'function' }
+replace:
+  {
+    'react-query': 'angular-query-experimental',
+    'useMutation': 'injectMutation',
+    'hook': 'function',
+  }
 ---
 
 [//]: # 'Example'
@@ -22,6 +27,9 @@ import {
   QueryClient,
 } from '@tanstack/angular-query-experimental'
 
+@Component({
+  // ...
+})
 export class TodosComponent {
   queryClient = inject(QueryClient)
 

docs/framework/angular/guides/mutations.md

@@ -243,12 +243,15 @@ queryClient.setMutationDefaults(['addTodo'], {
   retry: 3,
 })
 
-class someComponent {
+@Component({
+  // ...
+})
+class SomeComponent {
   // Start mutation in some component:
   mutation = injectMutation(() => ({ mutationKey: ['addTodo'] }))
 
   someMethod() {
-    mutation.mutate({ title: 'title' })
+    this.mutation.mutate({ title: 'title' })
   }
 }
 

docs/framework/angular/guides/paginated-queries.md

@@ -35,9 +35,9 @@ const result = injectQuery(() => ({
         instantaneously while they are also re-fetched invisibly in the
         background.
       </p>
-      @if (query.status() === 'pending') {
+      @if (query.isPending()) {
         <div>Loading...</div>
-      } @else if (query.status() === 'error') {
+      } @else if (query.isError()) {
         <div>Error: {{ query.error().message }}</div>
       } @else {
         <!-- 'data' will either resolve to the latest page's data -->
@@ -68,6 +68,10 @@ const result = injectQuery(() => ({
     </div>
   `,
 })
+
+@Component({
+  // ...
+})
 export class PaginationExampleComponent {
   page = signal(0)
   queryClient = inject(QueryClient)
@@ -83,7 +87,7 @@ export class PaginationExampleComponent {
     effect(() => {
       // Prefetch the next page!
       if (!this.query.isPlaceholderData() && this.query.data()?.hasMore) {
-        this.#queryClient.prefetchQuery({
+        this.queryClient.prefetchQuery({
           queryKey: ['projects', this.page() + 1],
           queryFn: () => lastValueFrom(fetchProjects(this.page() + 1)),
         })

docs/framework/angular/guides/parallel-queries.md

@@ -17,6 +17,9 @@ replace:
 [//]: # 'Example'
 
 ```ts
+@Component({
+  // ...
+})
 export class AppComponent {
   // The following queries will execute in parallel
   usersQuery = injectQuery(() => ({ queryKey: ['users'], queryFn: fetchUsers }))
@@ -38,11 +41,15 @@ TanStack Query provides `injectQueries`, which you can use to dynamically execut
 [//]: # 'DynamicParallelIntro'
 [//]: # 'Example2'
 
+> IMPORTANT: `injectQueries` is experimental and is provided in it's own entry point
+
 ```ts
+@Component({
+  // ...
+})
 export class AppComponent {
   users = signal<Array<User>>([])
 
-  // Please note injectQueries is under development and this code does not work yet
   userQueries = injectQueries(() => ({
     queries: users().map((user) => {
       return {

docs/framework/angular/guides/placeholder-query-data.md

@@ -7,6 +7,9 @@ ref: docs/framework/react/guides/placeholder-query-data.md
 [//]: # 'ExampleValue'
 
 ```ts
+@Component({
+  // ...
+})
 class TodosComponent {
   result = injectQuery(() => ({
     queryKey: ['todos'],
@@ -22,10 +25,15 @@ class TodosComponent {
 [//]: # 'ExampleFunction'
 
 ```ts
-class TodosComponent {
+@Component({
+  // ...
+})
+export class TodosComponent {
+  todoId = signal(1)
+
   result = injectQuery(() => ({
-    queryKey: ['todos', id()],
-    queryFn: () => fetch(`/todos/${id}`),
+    queryKey: ['todos', this.todoId()],
+    queryFn: () => fetch(`/todos/${this.todoId()}`),
     placeholderData: (previousData, previousQuery) => previousData,
   }))
 }
@@ -35,6 +43,9 @@ class TodosComponent {
 [//]: # 'ExampleCache'
 
 ```ts
+@Component({
+  // ...
+})
 export class BlogPostComponent {
   postId = input.required<number>()
   queryClient = inject(QueryClient)

docs/framework/angular/guides/queries.md

@@ -19,6 +19,9 @@ replace:
 ```ts
 import { injectQuery } from '@tanstack/angular-query-experimental'
 
+@Component({
+  // ...
+})
 export class TodosComponent {
   info = injectQuery(() => ({ queryKey: ['todos'], queryFn: fetchTodoList }))
 }
@@ -61,38 +64,7 @@ export class PostsComponent {
 ```
 
 [//]: # 'Example3'
-
-If booleans aren't your thing, you can always use the `status` state as well:
-
 [//]: # 'Example4'
-
-```angular-ts
-@Component({
-  selector: 'todos',
-  template: `
-    @switch (todos.status()) {
-      @case ('pending') {
-        <span>Loading...</span>
-      }
-      @case ('error') {
-        <span>Error: {{ todos.error()?.message }}</span>
-      }
-      <!-- also status === 'success', but "else" logic works, too -->
-      @default {
-        <ul>
-          @for (todo of todos.data(); track todo.id) {
-            <li>{{ todo.title }}</li>
-          } @empty {
-            <li>No todos found</li>
-          }
-        </ul>
-      }
-    }
-  `,
-})
-class TodosComponent {}
-```
-
 [//]: # 'Example4'
 [//]: # 'Materials'
 [//]: # 'Materials'