selectPersistStateInit appears to fire before state is actually loaded

[kragoth]

Background:
Akita is set up to persist storage to indexdb (using localforage).

I have the following code in the constructor of an angular service.

  constructor(
    protected store: JobStore,
    private uiQuery: UIQuery,
    private refQuery: RefQuery
  ) {
    super(store);

    selectPersistStateInit().pipe(
      mergeMap(() => combineLatest([
        this.refQuery.allocatedJobStatus(),
        this.refQuery.inProgressJobStatus(),
        this.refQuery.completedJobStatus()
      ])),
      takeUntil(this.onDestroy$)
    ).subscribe(([allocatedStatus, inProgStatus, completeStatus]) => {
      this.allocatedJobStatus = allocatedStatus;
      this.inProgressJobStatus = inProgStatus;
      this.completeJobStatus = completeStatus;
    });
  }

However, when the selectPersistStateInit() fires and triggers the refQuery queries the store has not actually been fully initialized.
The store contains only the initial state, not the state from the value in indexdb.

The store is defined as:

export type RefDictionary = Record<keyof typeof RefType, Array<IReferenceData>>;
export class RefStoreState {
  refData: RefDictionary;
  loading: boolean;
}

@Injectable({ providedIn: 'root' })
@StoreConfig({ name: 'ref' })
export class RefStore extends Store<RefStoreState> {
    constructor() {
      super({loading: true});
    }
}

So, it appears that the selectPersistStateInit() emits as soon as the store is initialized with the default value. Is there any way to know when the persisted state has been loaded to ensure my queries return the correct values?

[NetanelBasal]

It should be with the value from the db. https://github.com/datorama/akita/blob/master/libs/akita/src/lib/persistState.ts#L241

[kragoth]

@NetanelBasal is there a stackblitz I can start from that you know of? (Sorry, just trying to save some time)

[NetanelBasal]

https://stackblitz.com/edit/akita-issue?file=src%2Fapp%2Fauth%2Fstate%2Fauth.query.ts

[kragoth]

Thanks :)

[kragoth]

@NetanelBasal OK, I have finally reproduced the error in a stackblitz.
https://stackblitz.com/edit/akita-issue-rruppv?file=src%2Fapp%2Fhome%2Fhome.component.ts

It seems there must be some sort of timeout involved maybe when waiting for indexdb to load as there were some very specific steps I had to take to reproduce it reliably.

Open the stackblitz
Click Add Todos (this will take a long time, I had to make the indexdb large to reliably reproduce the problem)
Click Add Special Todo

Make sure you have Chrome dev tools open at this point

Happy day scenario if you just click Refresh Page everything should work.
You should get the following output:

Immediate Count: 0
Immediate Count: 10001
Special Record Found: true
Todo Count: 10001

Now, in Chrome dev tools in the performance tab, set CPU throttling to 4x slower.

Click Refresh Page button.
Now you will get an error:

TypeError: Cannot read property 'id' of undefined

When this error occurs it is because the selectPersistStateInit() fired and a getEntity was issued for the "specialId". However it results in null.

I really hope this is enough for you to reproduce the error as it was a tad frustrating trying to make it happen lol.
Of course in my actual application it happens every time lol.

[NetanelBasal]

As you can see in the code, we're waiting for the first value from the database. I think it's something related to indexdb. I'll try to check when I have some time.