api for the showsourcing front end to interface with apollo and appsync

Usage no npm install needed!

<script type="module">
  import cedricShowsourcingShowsourcingFrontendApi from 'https://cdn.skypack.dev/@cedric_showsourcing/showsourcing-frontend-api';


Showsourcing front-end api


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


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


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


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'
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('augustin@showsourcing.com', 'Test1234').then(_ => {


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.
    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[]>


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 = '🍇';


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.