Is there a way to call .has(key) synchronously?

[alignsoft]

I expect there's a way to refactor my existing storage services, but I'm curious if there's an easier way to solve my issue, so forgive me if this turns into a ::headdesk:: moment for either of us.

My workflow is typically as follows using a network first approach:

Is there a network connection?

- Yes - fetch data from the network, save an encrypted copy of the data into LocalStorage, return the unencrypted data to the calling component.
- No - fetch the data from LocalStorage, decrypt and return to the calling component. If there's no stored data, return an empty object.

For performance reasons on data that changes very infrequently, I want to use a cache-first strategy:

Use .has(key) to see if the data is already cached.

- Yes - fetch the data from LocalStorage, decrypt and return to the calling component.
- No - is there a network connection?
- - Yes - fetch data from the network, save an encrypted copy of the data into LocalStorage, return the unencrypted data to the calling component.
- - No - we know there's no data in LocalStorage, so return an empty object.

My current code would adapt to this extremely easily if .has(key) was synchronous, but trying to manage multiple levels of asychronous logic while conforming to the Observable signature of the service method is making my head ache, and I'm not sure if I'm missing something obvious.

I can't seem to use async/await in the service method as it returns an Observable, and I feel like there's a simple solution that I'm overlooking.

Any thoughts would be appreciated.

[cyrilletuzi]

indexedDB is asynchronous, so no, .has() can't be synchronous.

But it seems you just have a RxJS issue. ;) I'd need your code sample if you want some help.

I'll close the issue for house-keeping as it's not an issue, but I'll continue to answer you.

[alignsoft]

Thanks - here's a stripped down (but complete) example of how I'm using local storage with on the fly encryption/decryption with a caching strategy. Most services are network first - if there's a network connection, fetch from the server and cache, if not, fetch from the cache, and if cached data isn't available, return an empty object.

For the current requirement, I want to run cache first, so check to see if the data is cached, if so - return that, if not, fetch and cache, otherwise return an empty object.

I can use hasKey provided I inject a setTimeout in the flow to give hasKey time to resolve, which makes me feel really dirty, but I can't quite wrap my head around the correct syntax to do this properly, so if you're able to provide some guidance that would be very much appreciated.

I've included the encrypt/decrypt methods as well so you can get a complete sense of the implementation.

Thanks!

import { Observable, Subject } from 'rxjs';
import { map } from 'rxjs/operators';
import { takeUntil } from 'rxjs/operators';

import { Injectable, Inject } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';

import { LocalStorage } from '@ngx-pwa/local-storage';
import { JSONSchemaString, JSONSchemaObject } from '@ngx-pwa/local-storage';

const schema: JSONSchemaObject = {
    properties: {
        crypt: { type: 'string' } as JSONSchemaString,
    },
    required: ['crypt']
};

import * as CryptoJS from 'crypto-js';

var SERVER_API: string = "";//SERVER_API is set dynamically from a config file dependong on whether it's in Dev or Production

@Injectable()
export class HomeService {
    private CIPHER_KEY: string;
    private crypt: boolean;

    private ngUnsubscribe: Subject<any> = new Subject<any>()

    constructor(
        private httpClient: HttpClient,
        protected localStorage: LocalStorage
    ) {
        this.CIPHER_KEY = 'crypoCypherKey';
        this.crypt = true;
    }

    private encrypt(data) {
        var ciphertext = (CryptoJS.AES.encrypt(JSON.stringify(data), this.CIPHER_KEY).toString());
        return { 'crypt': ciphertext }
    }

    private decrypt(data) {
        if (data && data.hasOwnProperty('crypt')) {
            var bytes = CryptoJS.AES.decrypt((data as any).crypt.toString(), this.CIPHER_KEY);
            var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
        } else {
            decryptedData = data;
        }
        if (decryptedData) {
            decryptedData.error = null;
        } else {
            decryptedData = { error: null };
        }
        return decryptedData;
    }


    public fetchService(source: string, attrOne: string, attrTwo: string): Observable<any> {

        var returnValue: Observable<any>;
        var fromComponent: string = source + attrOne + attrTwo;
        const SERVICE_NAME: string = 'fetchURL';

        // Check first to see if we already have the requested value list cached, and if so - we want to return it from cache
        let key = SERVICE_NAME + fromComponent;

        let hasKey: boolean;
        this.localStorage.has(key)
            .subscribe((result) => {
                if (result) {
                    console.log('The requested value list key exists – will fetch from from IndexedDb Store');
                    hasKey = true;
                } else {
                    console.log('The requested value list key does not exist - will fetch from network and cache');
                    hasKey = false;
                }
            });

        setTimeout(() => {
            console.log("hasKey: ", hasKey); // With setTimeout, this works, but it's a duc tape/binder twine solution I want to not use.
        }, 1000);

        if (!navigator.onLine || hasKey) {
            console.log("Network Offline or Cached Value exists : Fetching from IndexedDb Store");
            return this.localStorage.getItem<string>(SERVICE_NAME + fromComponent, { schema })
                .pipe(map(
                    data => {
                        return this.decrypt(data);
                    }));
        } else {

            console.log("Fetching from the network and caching, as no cached value list exists.");

            let params = new HttpParams();

            params = params.append('attrOne', attrOne || '');
            params = params.append('attrTwo', attrTwo || '');

            const httpOptions = {
                headers: new HttpHeaders({
                    'Content-Type': 'application/json; charset=utf-8'
                }),
                params: params
            }

            returnValue = this.httpClient.get(SERVER_API + SERVICE_NAME, httpOptions)

            returnValue
                .pipe(takeUntil(this.ngUnsubscribe))
                .subscribe(
                    data => {
                        console.log("fetchService data: ", data);
                        if (data.error) {
                            console.log("Error returned: ", data.error);
                            let emptyObject = {};
                            // Store object in localstorage as clear-text object
                            if (!this.crypt) { this.localStorage.setItem(SERVICE_NAME + fromComponent, emptyObject).subscribe(() => {/* Success */ }, (data) => { console.log("An error occured setting data in the local store", data, SERVICE_NAME + fromComponent) }); }
                            // Store object in localstorage as AES encrypted object
                            if (this.crypt) { this.localStorage.setItem(SERVICE_NAME + fromComponent, this.encrypt(emptyObject)).subscribe(() => {/* Success */ }, (data) => { console.log("An error occured setting data in the local store", data, SERVICE_NAME + fromComponent) }); }

                        } else {
                            // Store object in localstorage as clear-text object
                            if (!this.crypt) { this.localStorage.setItem(SERVICE_NAME + fromComponent, data).subscribe(() => {/* Success */ }, (data) => { console.log("An error occured setting data in the local store", data, SERVICE_NAME + fromComponent) }); }
                            // Store object in localstorage as AES encrypted object
                            if (this.crypt) { this.localStorage.setItem(SERVICE_NAME + fromComponent, this.encrypt(data)).subscribe(() => {/* Success */ }, (data) => { console.log("An error occured setting data in the local store", data, SERVICE_NAME + fromComponent) }); }
                        }
                    })
        }
        return returnValue;
    }
}

[cyrilletuzi]

@alignsoft The basic answer is you need to chain your observables with switchMap().

It should look like this (after the declarations of your variables):

const getFromStorage$ = this.localStorage.getItem('test', { schema }).pipe(
  map((data) => decrypt(data)),
);

const getFromHttp$ = this.httpClient.get('test').pipe(
  takeUntil(this.ngUnsubscribe),
  delayWhen((data) => {
    const checkedData = !data.error ? data : {};
    const cryptedData = this.crypt ? this.encrypt(checkedData) : checkedData;
    return this.localStorage.setItem('test', cryptedData);
  }),
);

return this.localStorage.has(key).pipe(
  switchMap((hasKey) => (!navigator.onLine || hasKey) ? getFromStorage$ : getFromHttp$)
);

As a side note, start to use the full JSON schema syntax, ie. adding type: 'object' to your schema, as it will be required in v8.

[alignsoft]

Excellent! Thanks very much!

[alignsoft]

This works like an absolute charm, and has given me something new to learn more about. Thanks again! We're doing a production release early next week, and then there's a 30-day sprint to the next release during which time I'll be able to upgrade to v8 and make any adjustments necessary (schema's etc.) and test thoroughly - I'll provide feedback as soon as I get into that cycle.