fetch from lazy-query strategy returns undefined instead of a promise about ngrx-rtk-query HOT 8 CLOSED

It is not possible to combine the await method and the then-catch method.
Please use one of the two alternatives:

Method 1

startCounterById(id: string) {
    this.countQuery
      .fetch(id)
      .unwrap()
      .then((result) => {
        console.log('result method 1', result);
        this.form.reset();
      })
      .catch(console.error);
  }

Method 2

async startCounterById(id: string) {
    try {
      const result = await this.countQuery.fetch(id).unwrap();
      console.log('result method 2', result);
      this.form.reset();
    } catch (error) {
      console.error(error);
    }
  }

from ngrx-rtk-query.

It is mandatory to connect to the state in a query/lazyQuery due to its nature, as we are supposed to access the data or state of the load. Nevertheless, we will study the implementation of making it independent so that it is not necessary.

from ngrx-rtk-query.

Fixed in 16.0.0-preview.0, the new signals based version.

from ngrx-rtk-query.

The 'fetch' function is to execute the query, you can see a guide at https://github.com/SaulMoro/ngrx-rtk-query#lazy-queries

Also example of its use in https://github.com/SaulMoro/ngrx-rtk-query/blob/master/src/app/features/lazy/lazy-counter/lazy.component.ts#L72

Example:

this.countQuery
      .fetch(id, { preferCacheValue })
      .unwrap()
      .then((result) => {
        console.log('result', result);
        this.form.reset();
      })
      .catch(console.error);

from ngrx-rtk-query.

This is not working for me, all other RTK features work except lazy query. Is there any specific configuration for this to work?

Code

Console Test

from ngrx-rtk-query.

After a lot of testing, I think I found the problem. Running only fetch() and accessing the result as promised doesn't work, you have to use countQuery.state$ in the view.

To test just remove the use of countQuery.state$ from your example in lazy.component.ts and you will see that fetch() return undefined and break "unwrap()" prop access.

I don't understand why the problem exists. This is the expected behavior? did I get lost in something?

// lazy.component.ts
<div *ngIf="countQuery.state$ | async as countQuery" class="space-y-6">...</div>

// lazy.component.ts (THIS WILL BREAK IF WE DONT USE countQuery.state$)
this.countQuery
      .fetch(id, { preferCacheValue })
      .unwrap()   // BREAK :  Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'unwrap')
      .then((result) => {
        console.log('result method 1', result);
        this.form.reset();
      })
      .catch(console.error);

from ngrx-rtk-query.

I did another test, performing the "subscription" programmatically, and it works.

It is possible to conclude that whenever we use "lazyQuery" we must subscribe the state. Is this statement correct? And if it's true, I think it's worth updating the docs.

// lazy.component.ts
countQuery = useLazyGetCountByIdQuery();
countQuerySubscription = this.countQuery.state$.subscribe();

from ngrx-rtk-query.

Fixed in 16.0.0-preview.0

from ngrx-rtk-query.