rx-ng-query v0.0.5-test

RxQuery

It is built with rxjs and designed easy to use. queryStore is Singleton, only one exists throughout the app.

Work in progress

This is a work in progress, please do not install it in your project yet!!!!

RxNgQuery

This project was generated with Angular CLI version 13.2.2.

Test

Sample Test Url: https://stackblitz.com/edit/angular-ivy-vxsmmj?file=src/app/app.component.ts

RxQueryOption

StoreOptions (For RxStore & RxQuery)

Refetch & Cache Strategy (For RxQuery only)

staticStore

inside store has 2 classes one for RxQuery, one for RxStore RxQuery is to use refetch & cache strategy RxStore is to use storage for cache and you can still transform by query option

Module Import

import { RxNgQueryModule } from 'rx-ng-query';

interface RootStoreState {...}

const storeInitiator: (...arg: any[]) => RxQueryOption[] = (apiService: ApiService ) => [
  { key: 'limit', initState: { daily: 0, monthly: 0 }, query: apiService.fetchLimit.bind(apiService) },
  { key: 'goods', initState: [], query: apiService.fetchGoods.bind(apiService) },
];

const storeFetchDependency = [ApiService]; // this will be injected as storeInit arguments

imports: [
    ApiService, // custom service
    RxNgQueryModule.withInitStore<RootStoreState>(
      storeInitiator,
      storeFetchDependency
    ),
]

// or if you don't have initial store just import RxNgQueryModule

imports: [
  RxNgQueryModule
]

Dynamic Store Initiation

// in component
constructor(private rxNgQueryStore: RxNgQueryStore < any >,
  private apiService: ApiService,
)
{
  // rxQueryStore.registerStore(options);
  rxNgQueryStore.registerStore({
    key: 'limit',
    initState: [],
    prefetch: {param: 'daily'},
    query: apiService.fetchLimit.bind(apiService)
  });
}


// as service
@Injectable()
@RxQueryService()
export class HistoryApiService {
  constructor(private apiService: ApiService) {
  }

  // prefetch for fetching with registration
  @RxQuery({key: 'history', initState: [], prefetch: {param: null}})
  fetchHistory() {
    // this function goes to query and calling it calling fetch.
    return this.apiService.fetchHistory();
  }
}

// Don't forget to receive injection of service at the component,
// otherwise they does not work.

@Component({
  ...,
  providers: [HistoryApiService],
})
export class SomeComponent {
    constructor(private historyApiService: HistoryApiService) {
        // you should inject inside the component
        // otherwise it will not initiated.
    }
}

RxNgQueryStore

RxNgQueryStore is the manager and the bridge to each store. it provides methods to each store we declared.

rxNgSuspense

RxQueryStatus

status(key) gives you the stream with the following data.

• data: returned data from query
• ts: timestamp that updated (in case of error, it does not update the ts)
• error: thrown error from query (it is reset on loading status)
• loading: loading status
• untrustedData: if data is same as initdata or error on fetch (in case of refetch, it keeps the current one)

Crate Template with ng-template

// in template
<div>
  <ng-template
    [rxNgSuspense]="rxNgQueryStore.status('key') | async"
    [loadingTemplate]="loadingTemplate"
    [errorTemplate]="errorTemplate"
    let-data
  >
    <div>{{ data.name }}</div>
  </ng-template>
  <ng-template #loadingTemplate>isLoading...</ng-template>
  <ng-template #errorTemplate>isError...</ng-template>
</div>

ng-template with rxNgSuspense takes store's status and renders on the data. if content is ready the data you stored can be received template variable let-variableName

templateSort

TemplateType: 'null' | 'loading' | 'content' | 'error' rxNgSuspense also takes templateSort function((s: RxQueryStatus): TemplateType)

defaultTemplateSort(status: RxQueryStatus<any>){
  const { loading, data, error, untrustedData } = status;
  if (untrustedData) {
    if (error) {
      return 'error';
    }
    if (loading) {
      return 'loading';
    }

    return data ? 'content' : 'null';
  }

  if (data) {
    return 'content';
  }
  return 'null';
}