I have typescript problem here.

I attempted to use signals with @ngneat/query and encountered a TypeScript error in the following code:

initialValue: createPendingObserverResult<User>(),

The typescript error message is:

No overload matches this call.
  The last overload gave the following error.
    Type 'QueryObserverResult<User, Error>' is not assignable to type 'InfiniteQueryObserverResult<InfiniteData<{ previousId: number; nextId: number; data: User; }, unknown>, Error>'.
      Type 'QueryObserverRefetchErrorResult<User, Error>' is not assignable to type 'InfiniteQueryObserverResult<InfiniteData<{ previousId: number; nextId: number; data: User; }, unknown>, Error>'.
        Type 'QueryObserverRefetchErrorResult<User, Error>' is missing the following properties from type 'InfiniteQueryObserverPendingResult<InfiniteData<{ previousId: number; nextId: number; data: User; }, unknown>, Error>': isFetchNextPageError, isFetchPreviousPageError, fetchNextPage, fetchPreviousPage, and 4 more

What type of initialValue expect? I try to pass User or User[] but it not solve that problem.

Here is the full code example:

StackBlitz Example

import { Component, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { derivedAsync } from 'ngxtension/derived-async';
import { createPendingObserverResult, injectInfiniteQuery } from '@ngneat/query';
import { of } from 'rxjs';

interface User {
  id: number;
}

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <a target="_blank" href="https://angular.dev/overview">
      Learn more about Angular
    </a>
  `,
})
export class App {
  name = 'Angular';

  infiniteQuery = injectInfiniteQuery();

  id = signal(1);

  /* computedAsync is deprecated, so I use derivedAsync instead */

  user = derivedAsync(() => this.getUser(+this.id()).result$, {
    initialValue: createPendingObserverResult<User>(),
  });

  getUser(id: number) {
    return this.infiniteQuery({
      queryKey: ['foo', id],
      queryFn: () => of({ previousId: 0, nextId: 0, data: { id: 1 } as User }),
      initialPageParam: 0,
      getPreviousPageParam: (firstPage) => firstPage.previousId,
      getNextPageParam: (firstPage) => firstPage.nextId,
    });
  }
}

bootstrapApplication(App);