Is injectQueries still in development?

[JulienLecoq]

The documentation shows this:

[amasen02]

No, injectQueries is already implemented, fully functional, and exported in @tanstack/angular-query-experimental.

That note in the documentation is simply a legacy comment from earlier development stages that was missed during doc sync.

---

How to Use injectQueries Today

injectQueries is the Angular adapter's equivalent of React's useQueries. It uses an options function () => InjectQueriesOptions so it integrates reactively with Angular Signals, automatically tracks dependencies, runs change notifications outside NgZone, and cleans up subscriptions via DestroyRef.

Here is an idiomatic example in an Angular component:

import { Component, inject, signal } from '@angular/core'
import { injectQueries } from '@tanstack/angular-query-experimental'

interface User {
  id: number
  name: string
}

async function fetchUser(id: number): Promise<User> {
  const res = await fetch(`https://api.example.com/users/${id}`)
  if (!res.ok) throw new Error('Failed to fetch user')
  return res.json()
}

@Component({
  selector: 'app-user-list',
  standalone: true,
  template: `
    @if (users().isLoading) {
      <p>Loading users...</p>
    } @else if (users().isError) {
      <p>Failed to load one or more users.</p>
    } @else {
      <ul>
        @for (user of users().data; track user.id) {
          <li>{{ user.name }}</li>
        }
      </ul>
    }
  `
})
export class UserListComponent {
  // Reactive list of user IDs
  userIds = signal<number[]>([1, 2, 3])

  // injectQueries receives a getter returning the queries options
  users = injectQueries(() => ({
    queries: this.userIds().map(id => ({
      queryKey: ['user', id],
      queryFn: () => fetchUser(id),
    })),
    // Optional: combine allows aggregating parallel results into a clean Signal
    combine: (results) => ({
      data: results.map(r => r.data).filter((u): u is User => u !== undefined),
      isLoading: results.some(r => r.isLoading),
      isError: results.some(r => r.isError),
      isPending: results.some(r => r.isPending),
    })
  }))
}

Key Highlights

1. Signal-driven reactivity: Because the options are wrapped in a function () => ({ queries: ... }), whenever signals like userIds() change, the parallel observer updates dynamically.
2. combine support: Just like useQueries in React, combine lets you project the array of results into a single cohesive data structure.
3. Lifecycle safety: Subscriptions are bound to Angular's injection context and automatically unsubscribed when the component destroys.