├── src
    ├── app
    │   ├── detail
    │   │   ├── detail.page.scss
    │   │   ├── detail.page.html
    │   │   ├── detail.module.ts
    │   │   ├── detail.page.spec.ts
    │   │   └── detail.page.ts
    │   ├── home
    │   │   ├── home.page.scss
    │   │   ├── home.module.ts
    │   │   ├── home.page.spec.ts
    │   │   ├── home.page.html
    │   │   └── home.page.ts
    │   ├── app.component.html
    │   ├── app-routing.module.ts
    │   ├── app.component.ts
    │   ├── app.module.ts
    │   ├── app.component.spec.ts
    │   └── qraphql
    │   │   └── MessagesQuery.ts
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── assets
    │   └── icon
    │   │   └── favicon.png
    ├── tsconfig.app.json
    ├── tsconfig.spec.json
    ├── main.ts
    ├── global.scss
    ├── test.ts
    ├── index.html
    ├── karma.conf.js
    ├── theme
    │   └── variables.scss
    └── polyfills.ts
├── ionic.config.json
├── e2e
    ├── tsconfig.e2e.json
    ├── src
    │   ├── app.po.ts
    │   └── app.e2e-spec.ts
    └── protractor.conf.js
├── tsconfig.json
├── .gitignore
├── package.json
├── tslint.json
├── angular.json
└── README.md


/src/app/detail/detail.page.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/home/home.page.scss:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <ion-app>
2 |   <ion-router-outlet></ion-router-outlet>
3 | </ion-app>
4 | 


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/ionic.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "ionic4-angular6-gql",
3 |   "integrations": {},
4 |   "type": "angular"
5 | }


--------------------------------------------------------------------------------
/src/assets/icon/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/aaronksaunders/ionic4-angular6-gql/HEAD/src/assets/icon/favicon.png


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/e2e",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "target": "es5"
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "baseUrl": "./",
 6 |     "module": "es2015"
 7 |   },
 8 |   "exclude": [
 9 |     "test.ts",
10 |     "**/*.spec.ts"
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get('/');
 6 |   }
 7 | 
 8 |   getParagraphText() {
 9 |     return element(by.deepCss('app-root ion-content')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('new App', () => {
 4 |   let page: AppPage;
 5 | 
 6 |   beforeEach(() => {
 7 |     page = new AppPage();
 8 |   });
 9 | 
10 |   it('should display welcome message', () => {
11 |     page.navigateTo();
12 |     expect(page.getParagraphText()).toContain('The world is your oyster.');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "outDir": "./dist/out-tsc",
 5 |     "sourceMap": true,
 6 |     "declaration": false,
 7 |     "moduleResolution": "node",
 8 |     "emitDecoratorMetadata": true,
 9 |     "experimentalDecorators": true,
10 |     "target": "es5",
11 |     "lib": ["esnext.asynciterable", "dom", "es2017"],
12 | 
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "baseUrl": "./",
 6 |     "module": "commonjs",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "node"
10 |     ]
11 |   },
12 |   "files": [
13 |     "test.ts"
14 |   ],
15 |   "include": [
16 |     "polyfills.ts",
17 |     "**/*.spec.ts",
18 |     "**/*.d.ts"
19 |   ]
20 | }
21 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.log(err));
13 | 


--------------------------------------------------------------------------------
/src/global.scss:
--------------------------------------------------------------------------------
 1 | // http://ionicframework.com/docs/theming/
 2 | @import "~@ionic/angular/css/normalize.css";
 3 | @import "~@ionic/angular/css/structure.css";
 4 | @import "~@ionic/angular/css/typography.css";
 5 | @import "~@ionic/angular/css/colors.css";
 6 | 
 7 | @import "~@ionic/angular/css/padding.css";
 8 | @import "~@ionic/angular/css/float-elements.css";
 9 | @import "~@ionic/angular/css/text-alignment.css";
10 | @import "~@ionic/angular/css/text-transformation.css";
11 | @import "~@ionic/angular/css/flex-utils.css";
12 | 
13 | 


--------------------------------------------------------------------------------
/src/app/detail/detail.page.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 |   <ion-toolbar>
 3 |       <ion-buttons slot="start">
 4 |           <ion-back-button></ion-back-button>
 5 |         </ion-buttons>
 6 |     <ion-title>Detail Page</ion-title>
 7 |   </ion-toolbar>
 8 | </ion-header>
 9 | 
10 | <ion-content padding>
11 |   <ion-item>{{currentId}}</ion-item>
12 |   <ion-item>
13 |     <pre>{{(currentItem | async)?.data?.getMessage | json}}</pre>
14 |   </ion-item>
15 |   <div>
16 |     <ion-button (click)="updateMessage()">Update</ion-button>
17 |   </div>
18 | </ion-content>
19 | 


--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from "@angular/core";
 2 | import { Routes, RouterModule } from "@angular/router";
 3 | 
 4 | const routes: Routes = [
 5 |   { path: "", redirectTo: "home", pathMatch: "full" },
 6 |   { path: "home", loadChildren: "./home/home.module#HomePageModule" },
 7 |   {
 8 |     path: "detail/:id",
 9 |     loadChildren: "./detail/detail.module#DetailPageModule"
10 |   }
11 | ];
12 | 
13 | @NgModule({
14 |   imports: [RouterModule.forRoot(routes)],
15 |   exports: [RouterModule]
16 | })
17 | export class AppRoutingModule {}
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Specifies intentionally untracked files to ignore when using Git
 2 | # http://git-scm.com/docs/gitignore
 3 | 
 4 | *~
 5 | *.sw[mnpcod]
 6 | *.log
 7 | *.tmp
 8 | *.tmp.*
 9 | log.txt
10 | *.sublime-project
11 | *.sublime-workspace
12 | .vscode/
13 | npm-debug.log*
14 | 
15 | .idea/
16 | .ionic/
17 | .sourcemaps/
18 | .sass-cache/
19 | .tmp/
20 | .versions/
21 | coverage/
22 | www/
23 | node_modules/
24 | tmp/
25 | temp/
26 | platforms/
27 | plugins/
28 | plugins/android.json
29 | plugins/ios.json
30 | $RECYCLE.BIN/
31 | 
32 | .DS_Store
33 | Thumbs.db
34 | UserInterfaceState.xcuserstate
35 | 


--------------------------------------------------------------------------------
/src/app/home/home.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | import { IonicModule } from '@ionic/angular';
 4 | import { FormsModule } from '@angular/forms';
 5 | import { RouterModule } from '@angular/router';
 6 | 
 7 | import { HomePage } from './home.page';
 8 | 
 9 | @NgModule({
10 |   imports: [
11 |     CommonModule,
12 |     FormsModule,
13 |     IonicModule,
14 |     RouterModule.forChild([
15 |       {
16 |         path: '',
17 |         component: HomePage
18 |       }
19 |     ])
20 |   ],
21 |   declarations: [HomePage]
22 | })
23 | export class HomePageModule {}
24 | 


--------------------------------------------------------------------------------
/src/app/detail/detail.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { CommonModule } from '@angular/common';
 3 | import { FormsModule } from '@angular/forms';
 4 | import { Routes, RouterModule } from '@angular/router';
 5 | 
 6 | import { IonicModule } from '@ionic/angular';
 7 | 
 8 | import { DetailPage } from './detail.page';
 9 | 
10 | const routes: Routes = [
11 |   {
12 |     path: '',
13 |     component: DetailPage
14 |   }
15 | ];
16 | 
17 | @NgModule({
18 |   imports: [
19 |     CommonModule,
20 |     FormsModule,
21 |     IonicModule,
22 |     RouterModule.forChild(routes)
23 |   ],
24 |   declarations: [DetailPage]
25 | })
26 | export class DetailPageModule {}
27 | 


--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
 2 | 
 3 | import 'zone.js/dist/zone-testing';
 4 | import { getTestBed } from '@angular/core/testing';
 5 | import {
 6 |   BrowserDynamicTestingModule,
 7 |   platformBrowserDynamicTesting
 8 | } from '@angular/platform-browser-dynamic/testing';
 9 | 
10 | declare const require: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | import { Platform } from '@ionic/angular';
 4 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 5 | import { StatusBar } from '@ionic-native/status-bar/ngx';
 6 | 
 7 | @Component({
 8 |   selector: 'app-root',
 9 |   templateUrl: 'app.component.html'
10 | })
11 | export class AppComponent {
12 |   constructor(
13 |     private platform: Platform,
14 |     private splashScreen: SplashScreen,
15 |     private statusBar: StatusBar
16 |   ) {
17 |     this.initializeApp();
18 |   }
19 | 
20 |   initializeApp() {
21 |     this.platform.ready().then(() => {
22 |       this.statusBar.styleDefault();
23 |       this.splashScreen.hide();
24 |     });
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>Ionic App</title>
 6 | 
 7 |   <base href="/" />
 8 | 
 9 |   <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
10 |   <meta name="format-detection" content="telephone=no">
11 |   <meta name="msapplication-tap-highlight" content="no">
12 | 
13 |   <link rel="icon" type="image/png" href="assets/icon/favicon.png">
14 | 
15 |   <!-- add to homescreen for ios -->
16 |   <meta name="apple-mobile-web-app-capable" content="yes">
17 |   <meta name="apple-mobile-web-app-status-bar-style" content="black">
18 | 
19 | </head>
20 | <body>
21 |   <app-root></app-root>
22 | </body>
23 | </html>
24 | 


--------------------------------------------------------------------------------
/src/app/home/home.page.spec.ts:
--------------------------------------------------------------------------------
 1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | 
 4 | import { HomePage } from './home.page';
 5 | 
 6 | describe('HomePage', () => {
 7 |   let component: HomePage;
 8 |   let fixture: ComponentFixture<HomePage>;
 9 | 
10 |   beforeEach(async(() => {
11 |     TestBed.configureTestingModule({
12 |       declarations: [ HomePage ],
13 |       schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 |     })
15 |       .compileComponents();
16 |   }));
17 | 
18 |   beforeEach(() => {
19 |     fixture = TestBed.createComponent(HomePage);
20 |     component = fixture.componentInstance;
21 |     fixture.detectChanges();
22 |   });
23 | 
24 |   it('should create', () => {
25 |     expect(component).toBeTruthy();
26 |   });
27 | });
28 | 


--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
 1 | // The file contents for the current environment will overwrite these during build.
 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
 4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
 5 | export const environment = {
 6 |   production: false
 7 | };
 8 | 
 9 | /*
10 |  * In development mode, to ignore zone related error stack frames such as
11 |  * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can
12 |  * import the following file, but please comment it out in production mode
13 |  * because it will have performance impact when throw error
14 |  */
15 | // import 'zone.js/dist/zone-error';  // Included with Angular CLI.
16 | 


--------------------------------------------------------------------------------
/src/app/detail/detail.page.spec.ts:
--------------------------------------------------------------------------------
 1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 2 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 3 | 
 4 | import { DetailPage } from './detail.page';
 5 | 
 6 | describe('DetailPage', () => {
 7 |   let component: DetailPage;
 8 |   let fixture: ComponentFixture<DetailPage>;
 9 | 
10 |   beforeEach(async(() => {
11 |     TestBed.configureTestingModule({
12 |       declarations: [ DetailPage ],
13 |       schemas: [CUSTOM_ELEMENTS_SCHEMA],
14 |     })
15 |     .compileComponents();
16 |   }));
17 | 
18 |   beforeEach(() => {
19 |     fixture = TestBed.createComponent(DetailPage);
20 |     component = fixture.componentInstance;
21 |     fixture.detectChanges();
22 |   });
23 | 
24 |   it('should create', () => {
25 |     expect(component).toBeTruthy();
26 |   });
27 | });
28 | 


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './src/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: 'e2e/tsconfig.e2e.json'
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };
29 | 


--------------------------------------------------------------------------------
/src/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration file, see link for more information
 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |     basePath: '',
 7 |     frameworks: ['jasmine', '@angular-devkit/build-angular'],
 8 |     plugins: [
 9 |       require('karma-jasmine'),
10 |       require('karma-chrome-launcher'),
11 |       require('karma-jasmine-html-reporter'),
12 |       require('karma-coverage-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, 'coverage'),
20 |       reports: ['html', 'lcovonly'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false
30 |   });
31 | };
32 | 


--------------------------------------------------------------------------------
/src/app/home/home.page.html:
--------------------------------------------------------------------------------
 1 | <ion-header>
 2 |   <ion-toolbar>
 3 |     <ion-title>
 4 |       Ionic Blank
 5 |     </ion-title>
 6 |   </ion-toolbar>
 7 | </ion-header>
 8 | 
 9 | <ion-content padding>
10 |   <ion-card>
11 |     <ion-card-content>
12 |       <ion-item>
13 |         <ion-label>Content:</ion-label>
14 |         <ion-input [(ngModel)]="input.content"></ion-input>
15 |       </ion-item>
16 |       <ion-item>
17 |         <ion-label>Author:</ion-label>
18 |         <ion-input [(ngModel)]="input.author"></ion-input>
19 |       </ion-item>
20 |       <ion-button (click)="add()">ADD</ion-button>
21 |     </ion-card-content>
22 |   </ion-card>
23 | 
24 |   <ion-list padding>
25 |     <ion-item *ngFor="let m of (messages | async)" >
26 |       <div routerLink="/detail/{{m.id}}">
27 |         <ion-icon name="document" slot="start"></ion-icon>
28 |         <ion-label  text-wrap>{{m.content}}</ion-label>
29 |         <ion-label><span style="font-style: italic">{{m.created | date:'medium'}}</span> {{m.author}} </ion-label>
30 |       </div>
31 |       <ion-button slot="end" ion-button size="small" color="danger" (click)="deleteMessage(m.id)">DELETE</ion-button>
32 | 
33 |     </ion-item>
34 |   </ion-list>
35 | 
36 |   <div>
37 |     <ion-button ion-button (click)="get()">GET</ion-button>
38 |   </div>
39 | </ion-content>


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from "@angular/core";
 2 | import { BrowserModule } from "@angular/platform-browser";
 3 | import { RouterModule, RouteReuseStrategy, Routes } from "@angular/router";
 4 | 
 5 | import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
 6 | import { SplashScreen } from "@ionic-native/splash-screen/ngx";
 7 | import { StatusBar } from "@ionic-native/status-bar/ngx";
 8 | 
 9 | import { AppComponent } from "./app.component";
10 | import { AppRoutingModule } from "./app-routing.module";
11 | 
12 | // GRAPH QL
13 | import { HttpClientModule } from "@angular/common/http";
14 | import { ApolloModule, Apollo } from "apollo-angular";
15 | import { HttpLinkModule, HttpLink } from "apollo-angular-link-http";
16 | import { InMemoryCache } from "apollo-cache-inmemory";
17 | @NgModule({
18 |   declarations: [AppComponent],
19 |   entryComponents: [],
20 |   imports: [
21 |     HttpClientModule, // provides HttpClient for HttpLink
22 |     ApolloModule,
23 |     HttpLinkModule,
24 |     BrowserModule,
25 |     IonicModule.forRoot(),
26 |     AppRoutingModule
27 |   ],
28 |   providers: [
29 |     StatusBar,
30 |     SplashScreen,
31 |     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
32 |   ],
33 |   bootstrap: [AppComponent]
34 | })
35 | export class AppModule {
36 | 
37 |   constructor(public apollo: Apollo, httpLink: HttpLink) {
38 |     apollo.create({
39 |       // By default, this client will send queries to the
40 |       // `/graphql` endpoint on the same host
41 |       link: httpLink.create({ uri: "https://r9x8jkr0qn.lp.gql.zone/graphql" }),
42 |       cache: new InMemoryCache()
43 |     });
44 |   }
45 | 
46 | }
47 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 2 | import { TestBed, async } from '@angular/core/testing';
 3 | 
 4 | import { Platform } from '@ionic/angular';
 5 | import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 6 | import { StatusBar } from '@ionic-native/status-bar/ngx';
 7 | 
 8 | import { AppComponent } from './app.component';
 9 | 
10 | describe('AppComponent', () => {
11 | 
12 |   let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
13 | 
14 |   beforeEach(async(() => {
15 |     statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
16 |     splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
17 |     platformReadySpy = Promise.resolve();
18 |     platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
19 | 
20 |     TestBed.configureTestingModule({
21 |       declarations: [AppComponent],
22 |       schemas: [CUSTOM_ELEMENTS_SCHEMA],
23 |       providers: [
24 |         { provide: StatusBar, useValue: statusBarSpy },
25 |         { provide: SplashScreen, useValue: splashScreenSpy },
26 |         { provide: Platform, useValue: platformSpy },
27 |       ],
28 |     }).compileComponents();
29 |   }));
30 | 
31 |   it('should create the app', () => {
32 |     const fixture = TestBed.createComponent(AppComponent);
33 |     const app = fixture.debugElement.componentInstance;
34 |     expect(app).toBeTruthy();
35 |   });
36 | 
37 |   it('should initialize the app', async () => {
38 |     TestBed.createComponent(AppComponent);
39 |     expect(platformSpy.ready).toHaveBeenCalled();
40 |     await platformReadySpy;
41 |     expect(statusBarSpy.styleDefault).toHaveBeenCalled();
42 |     expect(splashScreenSpy.hide).toHaveBeenCalled();
43 |   });
44 | 
45 |   // TODO: add more tests!
46 | 
47 | });
48 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ionic4-angular6-gql",
 3 |   "version": "0.0.1",
 4 |   "author": "Ionic Framework",
 5 |   "homepage": "http://ionicframework.com/",
 6 |   "scripts": {
 7 |     "ng": "ng",
 8 |     "start": "ng serve",
 9 |     "build": "ng build",
10 |     "test": "ng test",
11 |     "lint": "ng lint",
12 |     "e2e": "ng e2e"
13 |   },
14 |   "private": true,
15 |   "dependencies": {
16 |     "@angular/common": "~6.1.1",
17 |     "@angular/core": "~6.1.1",
18 |     "@angular/forms": "~6.1.1",
19 |     "@angular/http": "~6.1.1",
20 |     "@angular/platform-browser": "~6.1.1",
21 |     "@angular/platform-browser-dynamic": "~6.1.1",
22 |     "@angular/router": "~6.1.1",
23 |     "@ionic-native/core": "5.0.0-beta.14",
24 |     "@ionic-native/splash-screen": "5.0.0-beta.14",
25 |     "@ionic-native/status-bar": "5.0.0-beta.14",
26 |     "@ionic/angular": "^4.0.0-beta.0",
27 |     "apollo-angular": "^1.2.0",
28 |     "apollo-angular-link-http": "1.2.0",
29 |     "apollo-cache-inmemory": "1.2.8",
30 |     "apollo-client": "2.4.0",
31 |     "core-js": "^2.5.3",
32 |     "graphql": "^0.13.2",
33 |     "graphql-tag": "^2.9.2",
34 |     "rxjs": "6.2.2",
35 |     "zone.js": "^0.8.26"
36 |   },
37 |   "devDependencies": {
38 |     "@angular-devkit/architect": "~0.7.2",
39 |     "@angular-devkit/build-angular": "~0.7.2",
40 |     "@angular-devkit/core": "~0.7.2",
41 |     "@angular-devkit/schematics": "~0.7.2",
42 |     "@angular/cli": "~6.1.1",
43 |     "@angular/compiler": "~6.1.1",
44 |     "@angular/compiler-cli": "~6.1.1",
45 |     "@angular/language-service": "~6.1.1",
46 |     "@ionic/ng-toolkit": "^1.0.7",
47 |     "@ionic/schematics-angular": "^1.0.0",
48 |     "@types/jasmine": "~2.8.6",
49 |     "@types/jasminewd2": "~2.0.3",
50 |     "@types/node": "~10.7.1",
51 |     "codelyzer": "~4.4.2",
52 |     "jasmine-core": "~2.99.1",
53 |     "jasmine-spec-reporter": "~4.2.1",
54 |     "karma": "~3.0.0",
55 |     "karma-chrome-launcher": "~2.2.0",
56 |     "karma-coverage-istanbul-reporter": "~2.0.0",
57 |     "karma-jasmine": "~1.1.1",
58 |     "karma-jasmine-html-reporter": "^0.2.2",
59 |     "protractor": "~5.4.0",
60 |     "ts-node": "~7.0.0",
61 |     "tslint": "~5.11.0",
62 |     "typescript": "2.8.3"
63 |   },
64 |   "description": "An Ionic project"
65 | }
66 | 


--------------------------------------------------------------------------------
/src/theme/variables.scss:
--------------------------------------------------------------------------------
 1 | // Ionic Variables and Theming. For more info, please see:
 2 | // http://ionicframework.com/docs/theming/
 3 | 
 4 | /** Ionic CSS Variables **/
 5 | :root {
 6 |   /** primary **/
 7 |   --ion-color-primary: #488aff;
 8 |   --ion-color-primary-rgb: 72,138,255;
 9 |   --ion-color-primary-contrast: #fff;
10 |   --ion-color-primary-contrast-rgb: 255,255,255;
11 |   --ion-color-primary-shade: #3f79e0;
12 |   --ion-color-primary-tint: #5a96ff;
13 | 
14 |   /** secondary **/
15 |   --ion-color-secondary: #32db64;
16 |   --ion-color-secondary-rgb: 50,219,100;
17 |   --ion-color-secondary-contrast: #fff;
18 |   --ion-color-secondary-contrast-rgb: 255,255,255;
19 |   --ion-color-secondary-shade: #2cc158;
20 |   --ion-color-secondary-tint: #47df74;
21 | 
22 |   /** tertiary **/
23 |   --ion-color-tertiary: #f4a942;
24 |   --ion-color-tertiary-rgb: 244,169,66;
25 |   --ion-color-tertiary-contrast: #fff;
26 |   --ion-color-tertiary-contrast-rgb: 255,255,255;
27 |   --ion-color-tertiary-shade: #d7953a;
28 |   --ion-color-tertiary-tint: #f5b255;
29 | 
30 |   /** success **/
31 |   --ion-color-success: #10dc60;
32 |   --ion-color-success-rgb: 16,220,96;
33 |   --ion-color-success-contrast: #fff;
34 |   --ion-color-success-contrast-rgb: 255,255,255;
35 |   --ion-color-success-shade: #0ec254;
36 |   --ion-color-success-tint: #28e070;
37 | 
38 |   /** warning **/
39 |   --ion-color-warning: #ffce00;
40 |   --ion-color-warning-rgb: 255,206,0;
41 |   --ion-color-warning-contrast: #000;
42 |   --ion-color-warning-contrast-rgb: 0,0,0;
43 |   --ion-color-warning-shade: #e0b500;
44 |   --ion-color-warning-tint: #ffd31a;
45 | 
46 |   /** danger **/
47 |   --ion-color-danger: #f53d3d;
48 |   --ion-color-danger-rgb: 245,61,61;
49 |   --ion-color-danger-contrast: #fff;
50 |   --ion-color-danger-contrast-rgb: 255,255,255;
51 |   --ion-color-danger-shade: #d83636;
52 |   --ion-color-danger-tint: #f65050;
53 | 
54 |   /** light **/
55 |   --ion-color-light: #f4f4f4;
56 |   --ion-color-light-rgb: 244,244,244;
57 |   --ion-color-light-contrast: #000;
58 |   --ion-color-light-contrast-rgb: 0,0,0;
59 |   --ion-color-light-shade: #d7d7d7;
60 |   --ion-color-light-tint: #f5f5f5;
61 | 
62 |   /** medium **/
63 |   --ion-color-medium: #989aa2;
64 |   --ion-color-medium-rgb: 152,154,162;
65 |   --ion-color-medium-contrast: #000;
66 |   --ion-color-medium-contrast-rgb: 0,0,0;
67 |   --ion-color-medium-shade: #86888f;
68 |   --ion-color-medium-tint: #a2a4ab;
69 |   
70 |   /** dark **/
71 |   --ion-color-dark: #222;
72 |   --ion-color-dark-rgb: 34,34,34;
73 |   --ion-color-dark-contrast: #fff;
74 |   --ion-color-dark-contrast-rgb: 255,255,255;
75 |   --ion-color-dark-shade: #1e1e1e;
76 |   --ion-color-dark-tint: #383838;
77 | }


--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * This file includes polyfills needed by Angular and is loaded before the app.
 3 |  * You can add your own extra polyfills to this file.
 4 |  *
 5 |  * This file is divided into 2 sections:
 6 |  *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 7 |  *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 8 |  *      file.
 9 |  *
10 |  * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 |  * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 |  * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 |  *
14 |  * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
15 |  */
16 | 
17 | /***************************************************************************************************
18 |  * BROWSER POLYFILLS
19 |  */
20 | 
21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/
22 | // import 'core-js/es6/symbol';
23 | // import 'core-js/es6/object';
24 | // import 'core-js/es6/function';
25 | // import 'core-js/es6/parse-int';
26 | // import 'core-js/es6/parse-float';
27 | // import 'core-js/es6/number';
28 | // import 'core-js/es6/math';
29 | // import 'core-js/es6/string';
30 | // import 'core-js/es6/date';
31 | // import 'core-js/es6/array';
32 | // import 'core-js/es6/regexp';
33 | // import 'core-js/es6/map';
34 | // import 'core-js/es6/weak-map';
35 | // import 'core-js/es6/set';
36 | 
37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */
38 | // import 'classlist.js';  // Run `npm install --save classlist.js`.
39 | 
40 | /** IE10 and IE11 requires the following for the Reflect API. */
41 | // import 'core-js/es6/reflect';
42 | 
43 | 
44 | /** Evergreen browsers require these. **/
45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
46 | import 'core-js/es7/reflect';
47 | 
48 | 
49 | /**
50 |  * Required to support Web Animations `@angular/platform-browser/animations`.
51 |  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
52 |  **/
53 | // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
54 | 
55 | 
56 | 
57 | /***************************************************************************************************
58 |  * Zone JS is required by Angular itself.
59 |  */
60 | import 'zone.js/dist/zone';  // Included with Angular CLI.
61 | 
62 | 
63 | 
64 | /***************************************************************************************************
65 |  * APPLICATION IMPORTS
66 |  */
67 | 
68 | /**
69 |  * Date, currency, decimal and percent pipes.
70 |  * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
71 |  */
72 | // import 'intl';  // Run `npm install --save intl`.
73 | /**
74 |  * Need to import at least one locale-data with intl.
75 |  */
76 | // import 'intl/locale-data/jsonp/en';
77 | 


--------------------------------------------------------------------------------
/src/app/detail/detail.page.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from "@angular/core";
 2 | import { ActivatedRoute, Router } from "@angular/router";
 3 | import {
 4 |   GetMessageGQL,
 5 |   UpdateMessageGQL,
 6 |   AllMessagesGQL
 7 | } from "../qraphql/MessagesQuery";
 8 | 
 9 | import { BehaviorSubject } from "rxjs";
10 | import { first, pluck } from "../../../node_modules/rxjs/operators";
11 | 
12 | @Component({
13 |   selector: "app-detail",
14 |   templateUrl: "./detail.page.html",
15 |   styleUrls: ["./detail.page.scss"]
16 | })
17 | export class DetailPage implements OnInit {
18 |   currentId;
19 |   currentItem;
20 | 
21 |   constructor(
22 |     public route: ActivatedRoute,
23 |     public router: Router,
24 |     public getMessageQuery: GetMessageGQL,
25 |     public updateMessageQuery: UpdateMessageGQL,
26 |     public msgQuery: AllMessagesGQL
27 |   ) {
28 |     this.currentId = this.route.snapshot.paramMap.get("id") + "";
29 |   }
30 | 
31 |   ngOnInit() {
32 |     this.currentItem = this.getMessage(this.currentId);
33 |   }
34 | 
35 |   getMessage(msgId) {
36 |     return this.getMessageQuery.watch({ id: msgId }).valueChanges;
37 |   }
38 | 
39 |   updateMessage = async () => {
40 |     try {
41 |       // get the current message, using promises to reduce
42 |       // the indentation...
43 |       let { data } = await this.getMessage(this.currentId)
44 |         .pipe(first())
45 |         .toPromise();
46 | 
47 |       let oldMsg = (data as any).getMessage;
48 |       console.log("got data: updated", oldMsg);
49 | 
50 |       // do update mutation
51 |       let updated = await this.updateMessageQuery
52 |         .mutate(
53 |           {
54 |             id: oldMsg.id,
55 |             msgInput: {
56 |               content: oldMsg.content,
57 |               author: oldMsg.author
58 |             }
59 |           },
60 |           {
61 |             update: (proxy, { data: { updateMessage } }) => {
62 |               // Read the data from our cache for this query.
63 |               let data: any = proxy.readQuery({
64 |                 query: this.msgQuery.document
65 |               });
66 | 
67 |               // update message in local data.
68 |               let updatedData = data.getAllMessages.map(item => {
69 |                 if (item.id !== this.currentId) {
70 |                   return item;
71 |                 }
72 |                 return {
73 |                   ...item,
74 |                   ...updateMessage
75 |                 };
76 |               });
77 | 
78 |               // Write our data back to the cache.
79 |               proxy.writeQuery({
80 |                 query: this.msgQuery.document,
81 |                 data: { getAllMessages: updatedData }
82 |               });
83 |             }
84 |           }
85 |         )
86 |         .pipe(first())
87 |         .pipe(pluck("data", "updateMessage"))
88 |         .toPromise();
89 | 
90 |       console.log("updated content", updated);
91 |     } catch (ee) {
92 |       alert(" Updating Message - ERROR" + ee);
93 |     }
94 |   };
95 | }
96 | 


--------------------------------------------------------------------------------
/src/app/qraphql/MessagesQuery.ts:
--------------------------------------------------------------------------------
  1 | import { Injectable } from "@angular/core";
  2 | import { Query, Mutation } from "apollo-angular";
  3 | import gql from "graphql-tag";
  4 | 
  5 | export type AllMessagesQuery = {
  6 |   messages: Message[];
  7 | };
  8 | 
  9 | export type Message = {
 10 |   id: string;
 11 |   content: string;
 12 |   author: string;
 13 |   created: string;
 14 | };
 15 | 
 16 | @Injectable({
 17 |   providedIn: "root"
 18 | })
 19 | export class AllMessagesGQL extends Query<AllMessagesQuery, {}> {
 20 |   document = gql`
 21 |     query getAllMessages {
 22 |       getAllMessages {
 23 |         id
 24 |         content
 25 |         author
 26 |         created
 27 |         updated
 28 |       }
 29 |     }
 30 |   `;
 31 | }
 32 | 
 33 | export type GetMessageQuery = {
 34 |   message: Message;
 35 | };
 36 | 
 37 | export type GetMessageVariables = {
 38 |   id: string;
 39 | };
 40 | 
 41 | @Injectable({
 42 |   providedIn: "root"
 43 | })
 44 | export class GetMessageGQL extends Query<GetMessageQuery, GetMessageVariables> {
 45 |   document = gql`
 46 |     query getMessage($id: ID!) {
 47 |       getMessage(id: $id) {
 48 |         id
 49 |         content
 50 |         author
 51 |         created
 52 |         updated
 53 |       }
 54 |     }
 55 |   `;
 56 | }
 57 | 
 58 | export type DeleteMessageMutation = {
 59 |   message: Message;
 60 | };
 61 | 
 62 | export type DeleteMessageVariables = {
 63 |   id: string;
 64 | };
 65 | 
 66 | @Injectable({
 67 |   providedIn: "root"
 68 | })
 69 | export class DeleteMessageGQL extends Mutation<
 70 |   DeleteMessageMutation,
 71 |   DeleteMessageVariables
 72 | > {
 73 |   document = gql`
 74 |     mutation deleteMessage($id: ID!) {
 75 |       deleteMessage(id: $id) {
 76 |         id
 77 |       }
 78 |     }
 79 |   `;
 80 | }
 81 | 
 82 | export type AddMessageMutation = {
 83 |   newMessage: Message;
 84 | };
 85 | 
 86 | export type AddMessageVariables = {
 87 |   msgInput: {
 88 |     content: string;
 89 |     author: string;
 90 |     created: string;
 91 |   };
 92 | };
 93 | 
 94 | @Injectable({
 95 |   providedIn: "root"
 96 | })
 97 | export class AddMessageGQL extends Mutation<
 98 |   AddMessageMutation,
 99 |   AddMessageVariables
100 | > {
101 |   document = gql`
102 |     mutation add($msgInput: MessageInput!) {
103 |       createMessage(input: $msgInput) {
104 |         id
105 |         content
106 |         author
107 |         created
108 |         updated
109 |       }
110 |     }
111 |   `;
112 | }
113 | 
114 | export type UpdateMessageMutation = {
115 |   updatedMessage: Message;
116 | };
117 | 
118 | export type UpdateMessageVariables = {
119 |   id: string;
120 |   msgInput: {
121 |     content: string;
122 |     author: string;
123 |   };
124 | };
125 | @Injectable({
126 |   providedIn: "root"
127 | })
128 | export class UpdateMessageGQL extends Mutation<
129 |   UpdateMessageMutation,
130 |   UpdateMessageVariables
131 | > {
132 |   document = gql`
133 |     mutation update($id: ID!, $msgInput: MessageInput!) {
134 |       updateMessage(id: $id, input: $msgInput) {
135 |         id
136 |         content
137 |         author
138 |         created
139 |         updated
140 |       }
141 |     }
142 |   `;
143 | }
144 | 


--------------------------------------------------------------------------------
/src/app/home/home.page.ts:
--------------------------------------------------------------------------------
  1 | import { Component, OnInit } from "@angular/core";
  2 | 
  3 | import {
  4 |   AllMessagesGQL,
  5 |   DeleteMessageGQL,
  6 |   AddMessageGQL
  7 | } from "../qraphql/MessagesQuery";
  8 | 
  9 | import { pluck } from "rxjs/operators";
 10 | 
 11 | //
 12 | // see https://launchpad.graphql.com/r9x8jkr0qn for more
 13 | // information on the GraphQL Server
 14 | //
 15 | 
 16 | @Component({
 17 |   selector: "app-home",
 18 |   templateUrl: "home.page.html",
 19 |   styleUrls: ["home.page.scss"]
 20 | })
 21 | export class HomePage implements OnInit {
 22 |   messages;
 23 | 
 24 |   input: any = {
 25 |     content: "test",
 26 |     author: "Aaron Saunders"
 27 |   };
 28 | 
 29 |   constructor(
 30 |     public msgQuery: AllMessagesGQL,
 31 |     public deleteMsgQuery: DeleteMessageGQL,
 32 |     public addMessageQuery: AddMessageGQL
 33 |   ) {}
 34 | 
 35 |   ngOnInit() {
 36 |     this.messages = this.msgQuery
 37 |       .watch()
 38 |       .valueChanges.pipe(pluck("data", "getAllMessages"));
 39 |   }
 40 | 
 41 |   /**
 42 |    *
 43 |    * @param _id
 44 |    */
 45 |   deleteMessage(_id) {
 46 |     console.log(_id);
 47 | 
 48 |     this.deleteMsgQuery
 49 |       .mutate(
 50 |         {
 51 |           id: _id
 52 |         },
 53 |         {
 54 |           update: (proxy, { data: { deleteMessage } }) => {
 55 |             debugger;
 56 |             // Read the data from our cache for this query.
 57 |             let data: any = proxy.readQuery({ query: this.msgQuery.document });
 58 | 
 59 |             let updatedData = data.getAllMessages.filter(u => {
 60 |               return u.id !== deleteMessage.id;
 61 |             });
 62 | 
 63 |             // Write our data back to the cache.
 64 |             proxy.writeQuery({
 65 |               query: this.msgQuery.document,
 66 |               data: { getAllMessages: updatedData }
 67 |             });
 68 |           }
 69 |         }
 70 |       )
 71 |       .subscribe(
 72 |         ({ data }) => {
 73 |           console.log("got data: deleted user", data);
 74 |         },
 75 |         error => {
 76 |           console.log("there was an error sending the query", error);
 77 |         }
 78 |       );
 79 |   }
 80 | 
 81 |   add() {
 82 |     this.addMessageQuery
 83 |       .mutate(
 84 |         {
 85 |           msgInput: {
 86 |             ...this.input,
 87 |             created: new Date()
 88 |           }
 89 |         },
 90 |         {
 91 |           update: (proxy, { data: { createMessage } }) => {
 92 |             debugger;
 93 |             // Read the data from our cache for this query.
 94 |             let data: any = proxy.readQuery({ query: this.msgQuery.document });
 95 | 
 96 |             // Add our message from the mutation to the end.
 97 |             data.getAllMessages.push(createMessage);
 98 | 
 99 |             // Write our data back to the cache.
100 |             proxy.writeQuery({ query: this.msgQuery.document, data });
101 |           }
102 |         }
103 |       )
104 |       .subscribe(
105 |         ({ data }) => {
106 |           console.log("got data", data);
107 |           this.input = {};
108 |         },
109 |         error => {
110 |           alert("there was an error sending the query " + error);
111 |         }
112 |       );
113 |   }
114 | }
115 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "rulesDirectory": [
  3 |     "node_modules/codelyzer"
  4 |   ],
  5 |   "rules": {
  6 |     "arrow-return-shorthand": true,
  7 |     "callable-types": true,
  8 |     "class-name": true,
  9 |     "comment-format": [
 10 |       true,
 11 |       "check-space"
 12 |     ],
 13 |     "curly": true,
 14 |     "deprecation": {
 15 |       "severity": "warn"
 16 |     },
 17 |     "eofline": true,
 18 |     "forin": true,
 19 |     "import-spacing": true,
 20 |     "indent": [
 21 |       true,
 22 |       "spaces"
 23 |     ],
 24 |     "interface-over-type-literal": true,
 25 |     "label-position": true,
 26 |     "max-line-length": [
 27 |       true,
 28 |       140
 29 |     ],
 30 |     "member-access": false,
 31 |     "member-ordering": [
 32 |       true,
 33 |       {
 34 |         "order": [
 35 |           "static-field",
 36 |           "instance-field",
 37 |           "static-method",
 38 |           "instance-method"
 39 |         ]
 40 |       }
 41 |     ],
 42 |     "no-arg": true,
 43 |     "no-bitwise": true,
 44 |     "no-console": [
 45 |       true,
 46 |       "debug",
 47 |       "info",
 48 |       "time",
 49 |       "timeEnd",
 50 |       "trace"
 51 |     ],
 52 |     "no-construct": true,
 53 |     "no-debugger": true,
 54 |     "no-duplicate-super": true,
 55 |     "no-empty": false,
 56 |     "no-empty-interface": true,
 57 |     "no-eval": true,
 58 |     "no-inferrable-types": [
 59 |       true,
 60 |       "ignore-params"
 61 |     ],
 62 |     "no-misused-new": true,
 63 |     "no-non-null-assertion": true,
 64 |     "no-shadowed-variable": true,
 65 |     "no-string-literal": false,
 66 |     "no-string-throw": true,
 67 |     "no-switch-case-fall-through": true,
 68 |     "no-trailing-whitespace": true,
 69 |     "no-unnecessary-initializer": true,
 70 |     "no-unused-expression": true,
 71 |     "no-use-before-declare": true,
 72 |     "no-var-keyword": true,
 73 |     "object-literal-sort-keys": false,
 74 |     "one-line": [
 75 |       true,
 76 |       "check-open-brace",
 77 |       "check-catch",
 78 |       "check-else",
 79 |       "check-whitespace"
 80 |     ],
 81 |     "prefer-const": true,
 82 |     "quotemark": [
 83 |       true,
 84 |       "single"
 85 |     ],
 86 |     "radix": true,
 87 |     "semicolon": [
 88 |       true,
 89 |       "always"
 90 |     ],
 91 |     "triple-equals": [
 92 |       true,
 93 |       "allow-null-check"
 94 |     ],
 95 |     "typedef-whitespace": [
 96 |       true,
 97 |       {
 98 |         "call-signature": "nospace",
 99 |         "index-signature": "nospace",
100 |         "parameter": "nospace",
101 |         "property-declaration": "nospace",
102 |         "variable-declaration": "nospace"
103 |       }
104 |     ],
105 |     "unified-signatures": true,
106 |     "variable-name": false,
107 |     "whitespace": [
108 |       true,
109 |       "check-branch",
110 |       "check-decl",
111 |       "check-operator",
112 |       "check-separator",
113 |       "check-type"
114 |     ],
115 |     "directive-selector": [
116 |       true,
117 |       "attribute",
118 |       "app",
119 |       "camelCase"
120 |     ],
121 |     "component-selector": [
122 |       true,
123 |       "element",
124 |       "app",
125 |       "page",
126 |       "kebab-case"
127 |     ],
128 |     "no-output-on-prefix": true,
129 |     "use-input-property-decorator": true,
130 |     "use-output-property-decorator": true,
131 |     "use-host-property-decorator": true,
132 |     "no-input-rename": true,
133 |     "no-output-rename": true,
134 |     "use-life-cycle-interface": true,
135 |     "use-pipe-transform-interface": true,
136 |     "directive-class-suffix": true
137 |   }
138 | }
139 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
  3 |   "version": 1,
  4 |   "defaultProject": "app",
  5 |   "projects": {
  6 |     "app": {
  7 |       "root": "",
  8 |       "sourceRoot": "src",
  9 |       "projectType": "application",
 10 |       "prefix": "app",
 11 |       "schematics": {},
 12 |       "architect": {
 13 |         "build": {
 14 |           "builder": "@angular-devkit/build-angular:browser",
 15 |           "options": {
 16 |             "progress": false,
 17 |             "outputPath": "www",
 18 |             "index": "src/index.html",
 19 |             "main": "src/main.ts",
 20 |             "polyfills": "src/polyfills.ts",
 21 |             "tsConfig": "src/tsconfig.app.json",
 22 |             "assets": [
 23 |               {
 24 |                 "glob": "**/*",
 25 |                 "input": "src/assets",
 26 |                 "output": "assets"
 27 |               },
 28 |               {
 29 |                 "glob": "**/*.svg",
 30 |                 "input": "node_modules/@ionic/angular/dist/ionic/svg",
 31 |                 "output": "./svg"
 32 |               }
 33 |             ],
 34 |             "styles": [
 35 |               {
 36 |                 "input": "src/theme/variables.scss"
 37 |               },
 38 |               {
 39 |                 "input": "src/global.scss"
 40 |               }
 41 |             ],
 42 |             "scripts": []
 43 |           },
 44 |           "configurations": {
 45 |             "production": {
 46 |               "fileReplacements": [
 47 |                 {
 48 |                   "replace": "src/environments/environment.ts",
 49 |                   "with": "src/environments/environment.prod.ts"
 50 |                 }
 51 |               ],
 52 |               "optimization": true,
 53 |               "outputHashing": "all",
 54 |               "sourceMap": false,
 55 |               "extractCss": true,
 56 |               "namedChunks": false,
 57 |               "aot": true,
 58 |               "extractLicenses": true,
 59 |               "vendorChunk": false,
 60 |               "buildOptimizer": true
 61 |             }
 62 |           }
 63 |         },
 64 |         "serve": {
 65 |           "builder": "@angular-devkit/build-angular:dev-server",
 66 |           "options": {
 67 |             "browserTarget": "app:build"
 68 |           },
 69 |           "configurations": {
 70 |             "production": {
 71 |               "browserTarget": "app:build:production"
 72 |             }
 73 |           }
 74 |         },
 75 |         "extract-i18n": {
 76 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 77 |           "options": {
 78 |             "browserTarget": "app:build"
 79 |           }
 80 |         },
 81 |         "test": {
 82 |           "builder": "@angular-devkit/build-angular:karma",
 83 |           "options": {
 84 |             "main": "src/test.ts",
 85 |             "polyfills": "src/polyfills.ts",
 86 |             "tsConfig": "src/tsconfig.spec.json",
 87 |             "karmaConfig": "src/karma.conf.js",
 88 |             "styles": [
 89 |               "styles.css"
 90 |             ],
 91 |             "scripts": [],
 92 |             "assets": [
 93 |               {
 94 |                 "glob": "favicon.ico",
 95 |                 "input": "src/",
 96 |                 "output": "/"
 97 |               },
 98 |               {
 99 |                 "glob": "**/*",
100 |                 "input": "src/assets",
101 |                 "output": "/assets"
102 |               }
103 |             ]
104 |           }
105 |         },
106 |         "lint": {
107 |           "builder": "@angular-devkit/build-angular:tslint",
108 |           "options": {
109 |             "tsConfig": [
110 |               "src/tsconfig.app.json",
111 |               "src/tsconfig.spec.json"
112 |             ],
113 |             "exclude": [
114 |               "**/node_modules/**"
115 |             ]
116 |           }
117 |         },
118 |         "ionic-cordova-build": {
119 |           "builder": "@ionic/ng-toolkit:cordova-build",
120 |           "options": {
121 |             "browserTarget": "app:build"
122 |           },
123 |           "configurations": {
124 |             "production": {
125 |               "browserTarget": "app:build:production"
126 |             }
127 |           }
128 |         },
129 |         "ionic-cordova-serve": {
130 |           "builder": "@ionic/ng-toolkit:cordova-serve",
131 |           "options": {
132 |             "cordovaBuildTarget": "app:ionic-cordova-build",
133 |             "devServerTarget": "app:serve"
134 |           },
135 |           "configurations": {
136 |             "production": {
137 |               "cordovaBuildTarget": "app:ionic-cordova-build:production",
138 |               "devServerTarget": "app:serve:production"
139 |             }
140 |           }
141 |         }
142 |       }
143 |     },
144 |     "app-e2e": {
145 |       "root": "e2e/",
146 |       "projectType": "application",
147 |       "architect": {
148 |         "e2e": {
149 |           "builder": "@angular-devkit/build-angular:protractor",
150 |           "options": {
151 |             "protractorConfig": "e2e/protractor.conf.js",
152 |             "devServerTarget": "app:serve"
153 |           }
154 |         },
155 |         "lint": {
156 |           "builder": "@angular-devkit/build-angular:tslint",
157 |           "options": {
158 |             "tsConfig": "e2e/tsconfig.e2e.json",
159 |             "exclude": [
160 |               "**/node_modules/**"
161 |             ]
162 |           }
163 |         }
164 |       }
165 |     }
166 |   },
167 |   "cli": {
168 |     "defaultCollection": "@ionic/schematics-angular"
169 |   },
170 |   "schematics": {
171 |     "@ionic/schematics-angular:component": {
172 |       "styleext": "scss"
173 |     },
174 |     "@ionic/schematics-angular:page": {
175 |       "styleext": "scss"
176 |     }
177 |   }
178 | }
179 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # ionic4-angular6-gql
  2 | updated ionic graphql project - still work in progress, this will be based off of this older Ionic GraphQL project [ionic2-graphql-apollo-client](https://github.com/aaronksaunders/ionic2-graphql-apollo-client)
  3 | 
  4 | 
  5 | ## Using the latest version of Ionic framework
  6 | 
  7 | 
  8 | ## Using Apollo Client's New Query & Mutation Classes
  9 | 
 10 | > See the Official Documentation [Query, Mutation, Subscription services
 11 | Additional API to use GraphQL in Angular](https://www.apollographql.com/docs/angular/basics/services.html)
 12 | 
 13 | ### Get All Messages
 14 | This is a query class to query all of the messages, its good because we have the power of typescript that allows for type checking when structuring the query; the should look something like this `MessagesQuery.ts`
 15 | 
 16 | ```javascript
 17 | import { Injectable } from "@angular/core";
 18 | import { Query, Mutation } from "apollo-angular";
 19 | import gql from "graphql-tag";
 20 | 
 21 | @Injectable({
 22 |   providedIn: "root"
 23 | })
 24 | export class AllMessagesGQL extends Query<AllMessagesQuery, {}> {
 25 |   document = gql`
 26 |     query getAllMessages {
 27 |       getAllMessages {
 28 |         id
 29 |         content
 30 |         author
 31 |         created
 32 |       }
 33 |     }
 34 |   `;
 35 | }
 36 | ```
 37 | The `document` variable holds the specific query that you have associated with the Query Object. We can specify what the query results should look like by specifying a type for the results. In this example it is represented by the type `AllMessagesQuery` which holds an array of `Message`
 38 | 
 39 | ```javascript
 40 | export type AllMessagesQuery = {
 41 |   messages: Message[];
 42 | };
 43 | 
 44 | export type Message = {
 45 |   id: string;
 46 |   content: string;
 47 |   author: string;
 48 |   created: string;
 49 | };
 50 | ```
 51 | Next we need to actually use the query we have just created; Import the specific files into `home.page.ts`
 52 | ```javascript
 53 | import { AllMessagesGQL } from "../qraphql/MessagesQuery";
 54 | ```
 55 | 
 56 | Then to use the Query Object, we do the following... set it up in the constructor of the `home.page.ts` file using angular dependency injection
 57 | 
 58 | ```javascript
 59 | constructor( public msgQuery: AllMessagesGQL ) {}
 60 | ```
 61 | 
 62 | Next we use the object to make the call to the query inside the `home.page.ts` file
 63 | 
 64 | ```javascript
 65 | ngOnInit() {
 66 |   this.messages = this.msgQuery
 67 |     .watch()
 68 |     .valueChanges.pipe(pluck("data", "getAllMessages"));
 69 | }
 70 | ```
 71 | Since the result of the query from the graphql server looks like this...
 72 | 
 73 | ```json
 74 | {
 75 |   "data": {
 76 |     "getAllMessages": [
 77 |       {
 78 |         "id": "10",
 79 |         "content": "default message here",
 80 |         "created": "Wed Aug 22 2018 01:51:43 GMT+0000 (UTC)",
 81 |         "author": "Aaron Saunders"
 82 |       }
 83 |     ]
 84 |   }
 85 | }
 86 | ```
 87 | 
 88 | In order to get the specific array of messages to display we can use the `rxjs` `pluck` operator to get the data to render in the `home.page.html` file
 89 | 
 90 | ```html
 91 | <ion-list padding>
 92 |   <ion-item *ngFor="let m of (messages | async)">
 93 |     {{m | json}}
 94 |   </ion-item>
 95 | </ion-list>
 96 | ```
 97 | 
 98 | ### Get Specific Message by Id
 99 | > Implemented, needs to be documented
100 | 
101 | ### Update Message
102 | > Implemented, needs to be documented
103 | 
104 | ### Delete Message
105 | > Implemented, needs to be documented
106 | 
107 | ## Apollo LaunchPad
108 | > Implemented, needs to be documented
109 | 
110 | The server for this project is located here
111 | 
112 | - https://launchpad.graphql.com/r9x8jkr0qn
113 | 
114 | > Launchpad is an in-browser GraphQL server playground. You can write a GraphQL schema example in JavaScript, and instantly create a serverless, publicly-accessible GraphQL endpoint. We call these code snippets that live on Launchpad “pads”.
115 | 
116 | ### Server-side, add the corresponding schema and resolver:
117 | 
118 | ```javascript
119 | // SCHEMA
120 | const typeDefs = `
121 | 
122 |   type Query {
123 |     hello: String
124 |     getMessage(id: ID!): Message
125 |     getAllMessages : [Message]
126 |   }
127 | 
128 |   input MessageInput {
129 |     content: String
130 |     author: String
131 |     created : String
132 |   }
133 | 
134 |   type Message {
135 |     id: ID!
136 |     content: String
137 |     author: String
138 |     created : String
139 |   }
140 | 
141 |   type Mutation {
142 |     createMessage(input: MessageInput): Message
143 |     deleteMessage(id: ID!): Message
144 |     updateMessage(id: ID!, input: MessageInput): Message
145 |   }
146 | `;
147 | ```
148 | Our data is stored in a simple javascript `Map` that is reset every time the application is run. It is initialized with some sample data to get us started
149 | 
150 | ```javascript
151 | const data =  new Map()
152 | 
153 | data.set("10",{
154 |   "content": "default message here",
155 |   "author": "Aaron Saunders",
156 |   "created" : new Date().toString()
157 | })
158 | ```
159 | 
160 | ```javascript
161 | const resolvers = {
162 | 
163 |   // QUERIES - Get your data state from your apollo server.
164 |   Query: {
165 |     getMessage:  (root, {id}, context) => {
166 |       if (!data.get(id)) {
167 |         throw new Error('no message exists with id ' + id);
168 |       }
169 |       return {id, ...data.get(id)};
170 |     },
171 | 
172 |     getAllMessages:  (root, args, context) => {
173 |       let r = []
174 |       console.log("data",data)
175 |       data.forEach ((v,k) => {
176 |         r.push({id:k,...v})
177 |       })
178 |       return r;
179 |     },
180 |   },
181 | 
182 |     // MUTATIONS - Queries that change your data state on your apollo server.
183 |   Mutation : {
184 |     deleteMessage:  (root, {id}, context) => {
185 |       if (!data.get(id)) {
186 |         throw new Error('no message exists with id ' + id);
187 |       }
188 |       data.delete(id)
189 |       return {id };
190 |     },    
191 |     createMessage: (root, {input}, context) => {
192 |       // Create a random id for our "database".
193 |       var id = new Date().getTime() + "";
194 | 
195 |       data.set(id,{id, ...input, created : new Date() })
196 | 
197 |       console.log(input)
198 | 
199 |       return  {...data.get(id)};
200 |     },
201 |   	updateMessage: (root, {id,input}, context) => {
202 |       
203 |       let oldMsg = data.get(id)
204 | 
205 |       data.set(id,{
206 |         id, 
207 |         ...oldMsg, 
208 |         ...input, 
209 |         updated : new Date() 
210 |       })
211 | 
212 |       return  {...data.get(id)};
213 |   	},    
214 |   }  
215 | };
216 | ```
217 | 


--------------------------------------------------------------------------------