Networking 🌐

Architecture

For our web application we built our own request interceptor we are using for all our http and graphql requests. It returns an custom model which supports storing the data in the local storage, fetching it before fireing the request, custom transformations and transformations to given models. It also triggers error and success massages via a notification service.

Sample flow

In this scenario we want to request a set of data before loading a view. For example before navigating to the contracts overview we want to load the list of contracts. In Angular this can be done using a resolver.

First we define the query:

fetchContracts() {
  return this.apollo
    .use(use)
    .query({
      query: fetchContractsQuery,
      variables: {lang:'de'}
    });
}

Then we resolve it for the contracts view:

resolve(route) {
  return this.contractsService.fetchContracts());
}

Now the view waits till the contracts are fetched before displaying. Additionally we can show a loading animation in the resolver. Now that the contracts are fetched, we can use them in the contracts overviews controller:

ngOnInit() {
  this.contracts = this.route.snapshot.data.contracts;
}