createPendingObserverResult throw typescript error that say "No overload matches this call"

[jon9090]

Hey @NetanelBasal, @luii :

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

initialValue: createPendingObserverResult<User>(),

The 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

Is this a bug, or am I using it incorrectly? If the latter, how can I fix it?

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);

[luii]

Is this a bug, or am I using it incorrectly? If the latter, how can I fix it?

No this is not a bug, without going into depth it looks correct. The problem here is that createPendingObserverResult is missing some properties that are used in an infinite query. The underline is QueryObserverResult is the base type and InfiniteQueryObserverResult the extension, if you want to use the utility function above you need to add the properties/functions (atleast some no-op functions) from your error message

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

  ...

  user = derivedAsync(() => this.getUser(+this.id()).result$, {
    initialValue: {
      ...createPendingObserverResult<User>(), 
      isFetchNextPageError: false, 
      isFetchPreviousPageError: false, 
      fetchNextPage: () => Promise.resolve({}), // these will throw an error, since the type is a bit more intricate then just a generic resolve
      fetchPreviousPage: () => Promise.resolve({}),
      // ... and the 4 more that i cant see right now ...
    } satisfies InfiniteQueryObserverResult<User>, // satisfies becuase we do not want to change the resulting type but get the type checking on it
  });

  ...

This is one way to do it, if you think that this is too much work for something that simple then its wise to choose to disable type-checking here (with any) and manually provide the type through the generic on derivedAsync:

...

user = derivedAsync<InfiniteQueryObserverResult<InfiniteData<{previousId: number, nextId: number, data: User}>>>(() => this.getUser(+this.id()).result$, {
  initialValue: createPendingObserverResult<User>() as any,
});

...

Please be careful with the latter approach, since you're missing some properties that probably are used by your application before they're ready. A wise descision would be to mix both together: add the missing properties and then disable the type-checking with any so that it cannot possibly fail before a concrete result was returned