Angular: How to properly integrate infinitQuery

[rbalet]

I wanted to implement the infinitQuery with the angular version of TanStack.

So i tried to follow the Guideline, and I think I should be correct here

projects.service.ts

getInfiniteEntries() {
  return infiniteQueryOptions({
    queryKey: ['projects'],
    queryFn: async ({ pageParam }) => {
      return lastValueFrom(
        this._http.get< Project[]>(`${this._baseUrl}/projects?limit=9&cursor=${pageParam}`),
      )
    },
    initialPageParam: 0,
    getPreviousPageParam: (projects) => projects[0].previousId ?? undefined,
    getNextPageParam: (projects) => projects[projects.length - 1].nextId ?? undefined,
    maxPages: 9,
    throwOnError: true,
  })
}

projects.component.ts

readonly #projectsService = inject(ProjectsService)

projectsInfiniteQuery = injectInfiniteQuery(() => this.#projectsService.getInfiniteEntries())

projects.component.html

@if (momentsInfiniteQuery.isPending()) {
  loading
} @else if (momentsInfiniteQuery.isError()) {
  <span>Error: {{ projectsInfiniteQuery.error()?.message }}</span>
} @else {
  @if (projectsInfiniteQuery.data()?.pages) {
    @for (page of projectsInfiniteQuery.data()?.pages; track $index) {
      @for (i of page; track $index) {
        <p>Project: {{ i.name }}</p>
      }
    } @empty {
        I'm empty
    }
  }
}

But the project is, that .data() is always undefined.

My initial though was, that this is empty because the API is returning Project[] and should return { pages: Project[]}.
So I've resolved it as pages, but it is also not working.

I'm a bit lost and would welcome any helps :)
Cheers

[arnoud-dv]

I think this does work at runtime and is only a typescript error?

non-infinite queries and mutations both support type narrowing. For example on isSuccess:

@Component({
  // ...
  template: `
    @if (query.isSuccess()) {
      @let data = query.data();
      //    ^? data: number
    }
  `,
})
class MyComponent {
  query = injectQuery(() => ({
    queryKey: ['test'],
    queryFn: () => Promise.resolve(5),
  }))
}

However, this is still missing on infinite queries and should be added to the Angular adapter's types.

As a workaround for now you can use @let with a non-null assertion operator:

@if (projectsInfiniteQuery.data()?.pages) {
  @let pages = projectsInfiniteQuery.data()!.pages;
  @for (page of pages; track $index) {
    <!-- pages is not potentially undefined -->
  }
}

[rbalet]

@arnoud-dv sadly it doesn't work on runtime, as the .data() is empty.

Do you think it would be possible for you to do an stackblitz example of a mock implementation where I can get inspected from ?

[arnoud-dv]

https://tanstack.com/query/latest/docs/framework/angular/examples/infinite-query-with-max-pages

I added issue #8984 for the missing type narrowing on infinite queries on Angular.

[rbalet]

TLDR

Using withInterceptors instead of infinitwithInterceptorsFromDi fixed the issue.

Context

So, I've tried it out, and your implementation didn't fix the error I had, although it guided me into the right direction.

I tried implementing the code example you've provided right into my app, and then realised I had interceptor that was still implemented the old way, Aka HTTP_INTERCEPTORS.

So I refactored it to be able to copy past your interceptor into my project, once done with the refactoring, Aka using withInterceptors instead of withInterceptorsFromDi() fixed the issue

I tried to reproduce the error in the stackblitz by changing it back to the former logic, but I couldn't reproduce the error.