import { NgModule , PLATFORM_ID , Inject } from '@angular/core' ; import { isPlatformBrowser } from '@angular/common' ; import { HttpClientModule } from '@angular/common/http' ; import { BrowserModule , BrowserTransferStateModule , TransferState , makeStateKey , } from '@angular/platform-browser' ; import { ApolloModule , Apollo } from 'apollo-angular' ; import { HttpLinkModule , HttpLink , HttpLinkHandler , } from 'apollo-angular-link-http' ; import { InMemoryCache , NormalizedCacheObject } from 'apollo-cache-inmemory' ; import { AppComponent } from './app.component' ; import { ListComponent } from './list.component' ; import { UpvoterComponent } from './upvoter.component' ; const uri = 'https://1jzxrj179.lp.gql.zone/graphql' ; const STATE_KEY = makeStateKey < any > ( 'apollo.state' ) ; @ NgModule ( { declarations : [ AppComponent , ListComponent , UpvoterComponent ] , imports : [ BrowserModule . withServerTransition ( { appId : 'example' } ) , HttpClientModule , BrowserTransferStateModule , HttpLinkModule , ApolloModule , ] , providers : [ ] , bootstrap : [ AppComponent ] , } ) export class AppModule { cache : InMemoryCache ; link : HttpLinkHandler ; constructor ( private readonly apollo , private readonly transferState , private readonly httpLink , @ Inject ( PLATFORM_ID ) readonly platformId ) { const isBrowser = isPlatformBrowser ( platformId ) ; this . cache = new InMemoryCache ( ) ; this . link = this . httpLink . create ( { uri } ) ; this . apollo . create ( { link : this . link , cache : this . cache , ... ( isBrowser ? { ssrForceFetchDelay : 200 , } : { ssrMode : true , } ) , } ) ; if ( isBrowser ) { this . onBrowser ( ) ; } else { this . onServer ( ) ; } } onServer ( ) { this . transferState . onSerialize ( STATE_KEY , ( ) => this . cache . extract ( ) ) ; } onBrowser ( ) { const state = this . transferState . get < NormalizedCacheObject > ( STATE_KEY , null ) ; this . cache . restore ( state ) ; } }