Use Loona :)

package.json

@@ -24,21 +24,26 @@
     "@ionic-native/splash-screen": "5.0.0-beta.15",
     "@ionic-native/status-bar": "5.0.0-beta.15",
     "@ionic/angular": "4.0.0-beta.7",
-    "apollo-angular-boost": "^1.1.0",
+    "@loona/angular": "1.0.0-beta.2",
+    "apollo-angular": "^1.3.0",
     "core-js": "^2.5.3",
     "graphql": "^14.0.2",
     "rxjs": "6.2.2",
-    "zone.js": "^0.8.26"
+    "zone.js": "^0.8.26",
+    "apollo-link": "^1.2.0",
+    "apollo-client": "^2.4.0",
+    "apollo-cache-inmemory": "^1.2.0",
+    "graphql-tag": "^2.9.2"
   },
   "devDependencies": {
-    "@angular/cli": "~6.1.1",
-    "@angular/compiler": "~6.1.1",
-    "@angular/compiler-cli": "~6.1.1",
-    "@angular/language-service": "~6.1.1",
     "@angular-devkit/architect": "~0.7.2",
     "@angular-devkit/build-angular": "~0.7.2",
     "@angular-devkit/core": "~0.7.2",
     "@angular-devkit/schematics": "~0.7.2",
+    "@angular/cli": "~6.1.1",
+    "@angular/compiler": "~6.1.1",
+    "@angular/compiler-cli": "~6.1.1",
+    "@angular/language-service": "~6.1.1",
     "@ionic/ng-toolkit": "^1.0.0",
     "@ionic/schematics-angular": "^1.0.0",
     "@types/jasmine": "~2.8.6",

src/app/app.module.ts

@@ -10,12 +10,8 @@ import { AppComponent } from "./app.component";
 import { AppRoutingModule } from "./app-routing.module";
 // GRAPH QL
 import { HttpClientModule } from "@angular/common/http";
-import {
-  ApolloBoostModule,
-  ApolloBoost,
-  InMemoryCache
-} from "apollo-angular-boost";
-import GRAPH_QL from "./graphql-info";
+import { LoonaModule } from "@loona/angular";
+import { GraphQLModule } from './graphql.module';
 
 @NgModule({
   declarations: [AppComponent],
@@ -25,7 +21,8 @@ import GRAPH_QL from "./graphql-info";
     HttpClientModule, // provides HttpClient for HttpLink
     IonicModule.forRoot(),
     AppRoutingModule,
-    ApolloBoostModule
+    GraphQLModule,
+    LoonaModule.forRoot(),
   ],
   providers: [
     StatusBar,
@@ -34,20 +31,5 @@ import GRAPH_QL from "./graphql-info";
   ],
   bootstrap: [AppComponent]
 })
-export class AppModule {
-
-  constructor(
-    apolloBoost: ApolloBoost
-  ) {
-    const cache = new InMemoryCache();
-    apolloBoost.create({
-
-      clientState: {
-        cache,
-        defaults: GRAPH_QL.defaults,
-        resolvers: GRAPH_QL.resolvers
-      }
-    })
-  }
-}
+export class AppModule {}
 

src/app/graphql.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import { LoonaModule, LoonaLink, LOONA_CACHE } from '@loona/angular';
+
+export function createApollo(link: LoonaLink, cache: InMemoryCache) {
+  return {
+    link,
+    cache,
+  };
+}
+
+@NgModule({
+  exports: [ApolloModule, LoonaModule],
+  providers: [
+    {
+      provide: LOONA_CACHE,
+      useFactory() {
+        return new InMemoryCache();
+      },
+    },
+    {
+      provide: APOLLO_OPTIONS,
+      useFactory: createApollo,
+      deps: [LoonaLink, LOONA_CACHE],
+    },
+  ],
+})
+export class GraphQLModule {}

src/app/home/home.module.ts

@@ -3,21 +3,24 @@ import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
+import { LoonaModule } from '@loona/angular';
 
 import { HomePage } from './home.page';
+import { HomeState } from './home.state';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     IonicModule,
+    LoonaModule.forChild([HomeState]),
     RouterModule.forChild([
       {
         path: '',
-        component: HomePage
-      }
-    ])
+        component: HomePage,
+      },
+    ]),
   ],
-  declarations: [HomePage]
+  declarations: [HomePage],
 })
 export class HomePageModule {}

src/app/home/home.page.ts

@@ -1,67 +1,41 @@
-import { Component } from '@angular/core';
-import { Apollo, gql } from 'apollo-angular-boost';
-import { Observable } from 'rxjs';
+import { Component, OnInit } from '@angular/core';
+import { Loona } from '@loona/angular';
 import { map, tap, pluck } from 'rxjs/operators';
-import { GET_USERS_QUERY, GET_USER_QUERY, ADD_USER_QUERY } from '../graphql-info'
-
+import { GET_USERS_QUERY, GET_USER_QUERY, AddUser } from './home.state';
 
 @Component({
   selector: 'app-home',
   templateUrl: 'home.page.html',
   styleUrls: ['home.page.scss'],
 })
-export class HomePage {
-  task = { name: "" }
-  allUsers$
-
-  constructor(private apollo: Apollo) {
+export class HomePage implements OnInit {
+  task = { name: '' };
+  allUsers$;
 
-  }
+  constructor(private loona: Loona) {}
 
   ngOnInit() {
-    this.allUsers$ = this.getUsers()
+    this.allUsers$ = this.getUsers();
   }
 
   getUserById() {
-
-    this.apollo.watchQuery<any>({
-      query: GET_USER_QUERY,
-      variables: {
-        id: "10",
-      }
-    }).valueChanges.pipe(
-      map((data) => console.log(data.data))
-      ).subscribe();
+    this.loona
+      .query(GET_USER_QUERY, { id: '10' })
+      .valueChanges.pipe(map(data => console.log(data.data)))
+      .subscribe();
   }
 
   getUsers() {
-
-
-    return this.apollo.watchQuery<any>({
-      query: GET_USERS_QUERY,
-    }).valueChanges.pipe(pluck("data", "users"));
+    return this.loona
+      .query(GET_USERS_QUERY)
+      .valueChanges.pipe(pluck('data', 'users'));
   }
 
-
   addUserClicked() {
-    this.addUser(new Date().getTime() + "", this.task.name)
+    this.addUser(new Date().getTime() + '', this.task.name);
   }
 
-
   addUser(id: string, name: string) {
-
-    this.apollo.mutate<any, any>({
-      mutation: ADD_USER_QUERY,
-      variables: {
-        id,
-        name
-      }
-    }).pipe(
-      tap((data) => console.log(data.data))
-      ).subscribe();
-
+    this.loona.dispatch(new AddUser({ id, name }));
   }
 }
-
-
-

src/app/home/home.state.ts

@@ -0,0 +1,74 @@
+import { State, Mutation, Resolve, Context } from '@loona/angular';
+import gql from 'graphql-tag';
+
+export class AddUser {
+  static mutation = gql`
+    mutation addUser($id: ID!, $name: string) {
+      addUser(id: $id, name: $name) @client {
+        id
+        name
+      }
+    }
+  `;
+
+  constructor(
+    public variables: {
+      id: string;
+      name: string;
+    },
+  ) {}
+}
+
+export const GET_USERS_QUERY = gql`
+  query getUsers {
+    users @client {
+      id
+      name
+    }
+  }
+`;
+
+export const GET_USER_QUERY = gql`
+  query user($id: ID!) {
+    user(id: $id) @client {
+      id
+      name
+    }
+  }
+`;
+
+@State({
+  defaults: {
+    users: [],
+  },
+})
+export class HomeState {
+  @Mutation(AddUser)
+  addUser(args, { patchQuery }: Context) {
+    const newUser = {
+      id: args.id,
+      name: args.name,
+      __typename: 'User',
+    };
+
+    patchQuery(GET_USERS_QUERY, data => {
+      data.users.push(newUser);
+    });
+
+    return newUser;
+  }
+
+  @Resolve('Query.user')
+  user(_, { id }, { cache, getCacheKey }: Context) {
+    const fragment = gql`
+      fragment user on User {
+        id
+        name
+      }
+    `;
+    return cache.readFragment({
+      fragment,
+      id: getCacheKey({ id, __typename: 'User' }),
+    });
+  }
+}

tsconfig.json

@@ -10,7 +10,8 @@
     "target": "es5",
     "lib": [
       "es2017",
-      "dom"
+      "dom",
+      "esnext.asynciterable"
     ]
   }
-}
+}