Showsourcing front-end api

Features

• simple api
• local db
• search / filters
• synchronisation
• model generation
• logging

Overview

ApiClient is the entry point that generates all other services. Most of the time you'll work with the ApiClient.db which is the driver to access the local database.

• ApiClient: entry point, is responsible of configuration
• ApiDb: performs Crud operation on the local DB
• ApiSynchronizer: local synchronization with the server DB
• ApiCache: is responsible of cache access

Installation

The package is a wrapper above app sync. It does the configuration on its own and also exports the different services furnished by appsync. Therefor you don't need to configure, import or even install the followings: amplify, app-sync & apollo-client.

You just need to npm i @cedric_showsourcing/showsourcing-frontend-api

Generate queries and mutations

amplify pull --appId d1c62vlrmdaq59 --envName antoine
amplify add codegen

amplify pull
amplify codegen
amplify codegen models

Usage

import { ApiClient } from '@cedric_showsourcing/showsourcing-frontend-api';

export const client = new ApiClient({
  awsExport: environment.awsExport,
  mutationMap: {
    Product: { update: gql(updateProduct), create: gql(createProduct) }
  },
  syncMap: {
    Product: {
      base: {
        query: gql(syncProducts),
        __typename: 'ModelProductConnection'
      }
    }
  }
});
client.sync();
export const db = client.db;
db.get('Product', 'some-id').subscribe(product => console.log(product));
db.find('Product').data$.subscribe(products => console.log(products));
client.Auth.signIn('[email protected]', 'Test1234').then(_ => {
  client.synchronizer.sync();
});

ApiDB

Here are the methods of to perform operations on the DB

  /** get one entity by id */
  get(typename: string, id: string): Observable<any>

  /**
   * find entities in the cache
   * @param typename: the type you want to find
   * @param filters: recursive object to filter entities e.g. {and: [{property: 'name', contains: 'hello'}, ...]}
   * @param pagination: the slice of entities e.g. {page: 0, limit: 25}
   * @param sort: how the entities are sorted e.g. {direction: 'ASC', property: 'name'}
   * @returns a single response (first()) trough an observable.
   */
  find(
    typename: string,
    sort?: SortType,
    filters?: FilterType,
    pagination: PaginationType = { page: 0, limit: 25 }
  ): IApiResponse<any>

  /** update many entities in backend and update the cache */
  update(typename: string, entities: EntityFields[]): Observable<any[]>

  /** delete many entities in backend and update the cache */
  delete(typename: string, entities: any[]): Observable<any[]>

  /** create many entities in backend and update the cache */
  create(typename: string, entities: any[]): Observable<any[]>

Logging

Set log level

You can set the log level in the options of the client

export const client = new ApiClient({
  awsExport: environment.awsExport,
  logLevel: LogLevel.DEBUG,
  // ...
});

Here are is the legend for logging:

/** colors */
const COLOR_LOCAL = 'color: gold; background: #3b2d44; padding: 4px';
const COLOR_LOCAL_RESPONSE = 'color: lime; background: #3b2d44; padding: 4px';
const COLOR_SERVER_RESPONSE = 'color: pink; background: #3b2d44; padding: 4px';
/** icons */
const iconQuery = '🍌';
const iconMutation = '🍇';

Scripts

build models from datastore models:

the src/generated/models folder can be replaced with new models generated by amplify. then the command line npm run models should use the src/generated/models to create a file in src/models/index.ts with the models usable by the client.