├── .DS_Store
├── README.md
├── client
    ├── .angular-cli.json
    ├── .editorconfig
    ├── .gitignore
    ├── README.md
    ├── e2e
    │   ├── app.e2e-spec.ts
    │   ├── app.po.ts
    │   └── tsconfig.e2e.json
    ├── karma.conf.js
    ├── package.json
    ├── protractor.conf.js
    ├── src
    │   ├── app
    │   │   ├── app.component.html
    │   │   ├── app.component.scss
    │   │   ├── app.component.spec.ts
    │   │   ├── app.component.ts
    │   │   ├── app.module.ts
    │   │   ├── global-query.ts
    │   │   └── graphql.module.ts
    │   ├── assets
    │   │   └── .gitkeep
    │   ├── environments
    │   │   ├── environment.prod.ts
    │   │   └── environment.ts
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── main.ts
    │   ├── polyfills.ts
    │   ├── styles.css
    │   ├── test.ts
    │   ├── tsconfig.app.json
    │   ├── tsconfig.spec.json
    │   └── typings.d.ts
    ├── tsconfig.json
    └── tslint.json
└── server
    ├── .gitignore
    ├── config
        ├── config.js
        └── mongoose.js
    ├── graphql
        ├── index.js
        ├── mutations
        │   ├── add.js
        │   ├── index.js
        │   ├── remove.js
        │   └── update.js
        ├── queries
        │   └── user.js
        └── types
        │   └── user.js
    ├── models
        └── user.js
    ├── package.json
    └── server.js


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tithi021/graphql-apollo-nodejs-mongodb-angular5/efd1de8157429966c2b278ecd915ec6f6e0ca98f/.DS_Store


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # graphql-apollo-nodejs-mongodb-angular5
2 | A simple Apollo + GraphQL + NodeJs + Express + MongoDB + Angular5 CRUD
3 | 
4 | This repository shows a complete example of a CRUD application based on NodeJs, Angular 5 with Graphql API.
5 | 
6 | Please read <a href="https://blog.cloudboost.io/a-crud-app-with-apollo-graphql-nodejs-express-mongodb-angular5-2874111cd6a5" target="_blank">https://blog.cloudboost.io/a-crud-app-with-apollo-graphql-nodejs-express-mongodb-angular5-2874111cd6a5</a> to see how this app was created step by step.
7 | 
8 | Demo - <a href="https://graphql-crud.herokuapp.com/">https://graphql-crud.herokuapp.com/</a>
9 | 


--------------------------------------------------------------------------------
/client/.angular-cli.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 3 |   "project": {
 4 |     "name": "my-app"
 5 |   },
 6 |   "apps": [
 7 |     {
 8 |       "root": "src",
 9 |       "outDir": "dist",
10 |       "assets": [
11 |         "assets",
12 |         "favicon.ico"
13 |       ],
14 |       "index": "index.html",
15 |       "main": "main.ts",
16 |       "polyfills": "polyfills.ts",
17 |       "test": "test.ts",
18 |       "tsconfig": "tsconfig.app.json",
19 |       "testTsconfig": "tsconfig.spec.json",
20 |       "prefix": "app",
21 |       "styles": [
22 |         "../node_modules/bootstrap/dist/css/bootstrap.min.css",
23 |         "styles.css"
24 |       ],
25 |       "scripts": [],
26 |       "environmentSource": "environments/environment.ts",
27 |       "environments": {
28 |         "dev": "environments/environment.ts",
29 |         "prod": "environments/environment.prod.ts"
30 |       }
31 |     }
32 |   ],
33 |   "e2e": {
34 |     "protractor": {
35 |       "config": "./protractor.conf.js"
36 |     }
37 |   },
38 |   "lint": [
39 |     {
40 |       "project": "src/tsconfig.app.json",
41 |       "exclude": "**/node_modules/**"
42 |     },
43 |     {
44 |       "project": "src/tsconfig.spec.json",
45 |       "exclude": "**/node_modules/**"
46 |     },
47 |     {
48 |       "project": "e2e/tsconfig.e2e.json",
49 |       "exclude": "**/node_modules/**"
50 |     }
51 |   ],
52 |   "test": {
53 |     "karma": {
54 |       "config": "./karma.conf.js"
55 |     }
56 |   },
57 |   "defaults": {
58 |     "styleExt": "css",
59 |     "component": {}
60 |   }
61 | }


--------------------------------------------------------------------------------
/client/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see http://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/client/.gitignore:
--------------------------------------------------------------------------------
 1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # compiled output
 4 | /dist
 5 | /tmp
 6 | /out-tsc
 7 | 
 8 | # dependencies
 9 | /node_modules
10 | 
11 | # IDEs and editors
12 | /.idea
13 | .project
14 | .classpath
15 | .c9/
16 | *.launch
17 | .settings/
18 | *.sublime-workspace
19 | 
20 | # IDE - VSCode
21 | .vscode/*
22 | !.vscode/settings.json
23 | !.vscode/tasks.json
24 | !.vscode/launch.json
25 | !.vscode/extensions.json
26 | 
27 | # misc
28 | /.sass-cache
29 | /connect.lock
30 | /coverage
31 | /libpeerconnection.log
32 | npm-debug.log
33 | testem.log
34 | /typings
35 | 
36 | # e2e
37 | /e2e/*.js
38 | /e2e/*.map
39 | 
40 | # System Files
41 | .DS_Store
42 | Thumbs.db
43 | 


--------------------------------------------------------------------------------
/client/README.md:
--------------------------------------------------------------------------------
 1 | # GraphQL Angular2
 2 | 
 3 | This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.5.0.
 4 | 
 5 | ## Development server
 6 | 
 7 | Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 8 | 
 9 | ## Code scaffolding
10 | 
11 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
12 | 
13 | ## Build
14 | 
15 | Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
16 | 
17 | ## Running unit tests
18 | 
19 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
20 | 
21 | ## Running end-to-end tests
22 | 
23 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
24 | 
25 | ## Further help
26 | 
27 | To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
28 | 


--------------------------------------------------------------------------------
/client/e2e/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | 
 3 | describe('my-app 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()).toEqual('Welcome to app!');
13 |   });
14 | });
15 | 


--------------------------------------------------------------------------------
/client/e2e/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.css('app-root h1')).getText();
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/client/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 |     "types": [
 9 |       "jasmine",
10 |       "jasminewd2",
11 |       "node"
12 |     ]
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/client/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/cli'],
 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/cli/plugins/karma')
14 |     ],
15 |     client:{
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       reports: [ 'html', 'lcovonly' ],
20 |       fixWebpackSourcePaths: true
21 |     },
22 |     angularCli: {
23 |       environment: 'dev'
24 |     },
25 |     reporters: ['progress', 'kjhtml'],
26 |     port: 9876,
27 |     colors: true,
28 |     logLevel: config.LOG_INFO,
29 |     autoWatch: true,
30 |     browsers: ['Chrome'],
31 |     singleRun: false
32 |   });
33 | };
34 | 


--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-app",
 3 |   "version": "0.0.0",
 4 |   "license": "MIT",
 5 |   "scripts": {
 6 |     "ng": "ng",
 7 |     "start": "ng serve",
 8 |     "build": "ng build",
 9 |     "test": "ng test",
10 |     "lint": "ng lint",
11 |     "e2e": "ng e2e"
12 |   },
13 |   "private": true,
14 |   "dependencies": {
15 |     "@angular/animations": "^5.0.0",
16 |     "@angular/common": "^5.0.0",
17 |     "@angular/compiler": "^5.0.0",
18 |     "@angular/core": "^5.0.0",
19 |     "@angular/forms": "^5.0.0",
20 |     "@angular/http": "^5.0.0",
21 |     "@angular/platform-browser": "^5.0.0",
22 |     "@angular/platform-browser-dynamic": "^5.0.0",
23 |     "@angular/router": "^5.0.0",
24 |     "apollo-angular": "^1.0.0",
25 |     "apollo-angular-link-http": "^1.0.0",
26 |     "apollo-cache-inmemory": "^1.1.0",
27 |     "apollo-client": "^2.0.2",
28 |     "bootstrap": "^3.3.7",
29 |     "core-js": "^2.4.1",
30 |     "font-awesome": "^4.7.0",
31 |     "graphql": "^0.11.7",
32 |     "graphql-tag": "^2.5.0",
33 |     "ngx-bootstrap": "^2.0.0-beta.8",
34 |     "rxjs": "^5.5.2",
35 |     "zone.js": "^0.8.14"
36 |   },
37 |   "devDependencies": {
38 |     "@angular/cli": "1.5.0",
39 |     "@angular/compiler-cli": "^5.0.0",
40 |     "@angular/language-service": "^5.0.0",
41 |     "@types/jasmine": "~2.5.53",
42 |     "@types/jasminewd2": "~2.0.2",
43 |     "@types/node": "~6.0.60",
44 |     "codelyzer": "~3.2.0",
45 |     "jasmine-core": "~2.6.2",
46 |     "jasmine-spec-reporter": "~4.1.0",
47 |     "karma": "~1.7.0",
48 |     "karma-chrome-launcher": "~2.1.1",
49 |     "karma-cli": "~1.0.1",
50 |     "karma-coverage-istanbul-reporter": "^1.2.1",
51 |     "karma-jasmine": "~1.1.0",
52 |     "karma-jasmine-html-reporter": "^0.2.2",
53 |     "protractor": "~5.1.2",
54 |     "ts-node": "~3.2.0",
55 |     "tslint": "~5.7.0",
56 |     "typescript": "~2.4.2"
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/client/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 |     './e2e/**/*.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 | 


--------------------------------------------------------------------------------
/client/src/app/app.component.html:
--------------------------------------------------------------------------------
 1 | <div class="container">
 2 |   <div class="col-md-6">
 3 |     <div class="row">
 4 |       <div class="col1">
 5 |         <h3>Users List</h3>
 6 |       </div>
 7 |       <div class="col2">
 8 |         <!-- Create New User  -->
 9 |         <button type="button" class="btn btn-primary pull-right" (click)="openModal(template)">
10 |           Create New User
11 |         </button>
12 |       </div>
13 |     </div>
14 | 
15 |     <!-- Modal Template of New User Form -->
16 |     <ng-template #template>
17 |       <div class="modal-header">
18 |         <h4 class="modal-title pull-left">Create New User</h4>
19 |         <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
20 |           <span aria-hidden="true">&times;</span>
21 |         </button>
22 |       </div>
23 |       <div class="modal-body">
24 |         <form>
25 |           <div class="form-group">
26 |             <label for="name">User Name</label>
27 |             <input type="text" class="form-control" name="name" placeholder="Name" [(ngModel)]="name">
28 |           </div>
29 |           <button type="button" class="btn btn-default" *ngIf="!user.id" (click)="createUser(name);">Create</button>
30 |           <button type="button" class="btn btn-default" *ngIf="user.id" (click)="updateUser(name);">Update</button>
31 |         </form>
32 |       </div>
33 |     </ng-template>
34 | 
35 |     <!-- List of All Users  -->
36 |     <table class="table table-bordered table-striped table-hover">
37 |       <thead>
38 |         <tr>
39 |           <th class="text-center">ID</th>
40 |           <th class="text-center">Name</th>
41 |           <th class="text-center">Actions</th>
42 |         </tr>
43 |       </thead>
44 |       <tbody>
45 |         <tr *ngFor="let user of users; let i = index">
46 |           <td>{{ i+1 }}</td>
47 |           <td>{{ user.name }}</td>
48 |           <td>
49 |             <!-- Show Edit User Form  -->
50 |             <button class="btn btn-info" (click)="showEditUserForm(user, template)">
51 |               <i class="fa fa-edit"></i>
52 |             </button>
53 |             <!-- Remove User  -->
54 |             <button class="btn btn-danger" (click)="removeUser(user.id)">
55 |               <i class="fa fa-minus"></i>
56 |             </button>
57 |           </td>
58 |         </tr>
59 |       </tbody>
60 |     </table>
61 |   </div>
62 | </div>


--------------------------------------------------------------------------------
/client/src/app/app.component.scss:
--------------------------------------------------------------------------------
 1 | .container {
 2 |     .row {
 3 |         .col1 {
 4 |             width: 50%;
 5 |             margin: 0px;
 6 |         }
 7 |         .col2 {
 8 |             width: 50%;
 9 |             float: right;
10 |             margin: 1%;
11 |         }
12 |     }
13 |     tr {
14 |         text-align: center;
15 |     }
16 | }


--------------------------------------------------------------------------------
/client/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, async } from '@angular/core/testing';
 2 | import { AppComponent } from './app.component';
 3 | describe('AppComponent', () => {
 4 |   beforeEach(async(() => {
 5 |     TestBed.configureTestingModule({
 6 |       declarations: [
 7 |         AppComponent
 8 |       ],
 9 |     }).compileComponents();
10 |   }));
11 |   it('should create the app', async(() => {
12 |     const fixture = TestBed.createComponent(AppComponent);
13 |     const app = fixture.debugElement.componentInstance;
14 |     expect(app).toBeTruthy();
15 |   }));
16 |   it(`should have as title 'app'`, async(() => {
17 |     const fixture = TestBed.createComponent(AppComponent);
18 |     const app = fixture.debugElement.componentInstance;
19 |     expect(app.title).toEqual('app');
20 |   }));
21 |   it('should render title in a h1 tag', async(() => {
22 |     const fixture = TestBed.createComponent(AppComponent);
23 |     fixture.detectChanges();
24 |     const compiled = fixture.debugElement.nativeElement;
25 |     expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
26 |   }));
27 | });
28 | 


--------------------------------------------------------------------------------
/client/src/app/app.component.ts:
--------------------------------------------------------------------------------
  1 | import { Component, TemplateRef } from '@angular/core';
  2 | import { Apollo } from 'apollo-angular';
  3 | import { Observable } from 'rxjs/Observable';
  4 | import { BsModalService } from 'ngx-bootstrap/modal';
  5 | import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
  6 | import * as Query from './global-query';
  7 | import 'rxjs/add/operator/map';
  8 | 
  9 | @Component({
 10 |   selector: 'app-root',
 11 |   templateUrl: './app.component.html',
 12 |   styleUrls: ['./app.component.scss']
 13 | })
 14 | export class AppComponent {
 15 |   modalRef: BsModalRef;
 16 |   users: Array<any> = []; // List of Users
 17 |   user: any = {};
 18 |   name: any;
 19 | 
 20 |   constructor(private apollo: Apollo,
 21 |     private modalService: BsModalService) { }
 22 | 
 23 |   ngOnInit() {
 24 |     this.getUsers();
 25 |   }
 26 | 
 27 |   /**
 28 |    * Create User
 29 |    * @param value     Name of User
 30 |    */
 31 |   createUser(value) {
 32 |     this.apollo
 33 |       .mutate({
 34 |         mutation: Query.addUser,
 35 |         variables: {
 36 |           name: value
 37 |         },
 38 |         update: (proxy, { data: { addUser } }) => {
 39 |           // Read the data from our cache for this query.
 40 |           const data: any = proxy.readQuery({ query: Query.Users });
 41 | 
 42 |           data.users.push(addUser);
 43 | 
 44 |           // Write our data back to the cache.
 45 |           proxy.writeQuery({ query: Query.Users, data });
 46 |         }
 47 |       })
 48 |       .subscribe(({ data }) => {
 49 |         this.closeFirstModal(); // Close Modal
 50 |       }, (error) => {
 51 |         console.log('there was an error sending the query', error);
 52 |       });
 53 |   }
 54 | 
 55 |   /**
 56 |    * Remove User
 57 |    * @param id 
 58 |    */
 59 |   removeUser(id) {
 60 |     this.apollo
 61 |       .mutate({
 62 |         mutation: Query.removeUser,
 63 |         variables: {
 64 |           id: id
 65 |         },
 66 |         update: (proxy, { data: { removeUser } }) => {
 67 |           // Read the data from our cache for this query.
 68 |           const data: any = proxy.readQuery({ query: Query.Users });
 69 | 
 70 |           var index = data.users.map(function (x) { return x.id; }).indexOf(id);
 71 | 
 72 |           data.users.splice(index, 1);
 73 | 
 74 |           // Write our data back to the cache.
 75 |           proxy.writeQuery({ query: Query.Users, data });
 76 |         }
 77 |       })
 78 |       .subscribe(({ data }) => {
 79 |         console.log(data)
 80 |       }, (error) => {
 81 |         console.log('there was an error sending the query', error);
 82 |       });
 83 |   }
 84 | 
 85 |   /**
 86 |    * Edit User Form
 87 |    * @param user 
 88 |    * @param template 
 89 |    */
 90 |   showEditUserForm(user, template) {
 91 |     this.name = user.name;
 92 |     this.user = user;
 93 |     this.modalRef = this.modalService.show(template);
 94 |   }
 95 | 
 96 |   /**
 97 |    * Update User
 98 |    * @param user 
 99 |    */
100 |   updateUser(user) {
101 |     this.apollo
102 |       .mutate({
103 |         mutation: Query.updateUser,
104 |         variables: {
105 |           id: this.user.id,
106 |           name: user
107 |         },
108 |         update: (proxy, { data: { updateUser } }) => {
109 |           // Read the data from our cache for this query.
110 |           const data: any = proxy.readQuery({ query: Query.Users });
111 | 
112 |           var index = data.users.map(function (x) { return x.id; }).indexOf(this.user.id);
113 | 
114 |           data.users[index].name = user;
115 | 
116 |           // Write our data back to the cache.
117 |           proxy.writeQuery({ query: Query.Users, data });
118 |         }
119 |       })
120 |       .subscribe(({ data }) => {
121 |         this.closeFirstModal();
122 |       }, (error) => {
123 |         console.log('there was an error sending the query', error);
124 |       });
125 |   }
126 | 
127 |   /**
128 |    * ----------------------------------------------------
129 |    * Get All Users
130 |    * ----------------------------------------------------
131 |    * @method getUsers
132 |    */
133 |   getUsers() {
134 |     this.apollo.watchQuery({ query: Query.Users })
135 |       .valueChanges
136 |       .map((result: any) => result.data.users).subscribe((data) => {
137 |         this.users = data;
138 |       })
139 |   }
140 | 
141 |   // Open Modal
142 |   openModal(template: TemplateRef<any>) {
143 |     this.name = '';
144 |     this.user = {};
145 |     this.modalRef = this.modalService.show(template);
146 |   }
147 | 
148 |   // Close Modal
149 |   closeFirstModal() {
150 |     this.modalRef.hide();
151 |     this.modalRef = null;
152 |   }
153 | }
154 | 


--------------------------------------------------------------------------------
/client/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | import { AppComponent } from './app.component';
 4 | import { ModalModule } from 'ngx-bootstrap/modal';
 5 | import { HttpClientModule } from '@angular/common/http';
 6 | import { FormsModule } from '@angular/forms';
 7 | // Apollo
 8 | import { GraphQLModule } from './graphql.module';
 9 | 
10 | @NgModule({
11 |   declarations: [
12 |     AppComponent
13 |   ],
14 |   imports: [
15 |     BrowserModule,
16 |     HttpClientModule, // provides HttpClient for HttpLink
17 |     GraphQLModule,
18 |     FormsModule,
19 |     ModalModule.forRoot()
20 |   ],
21 |   providers: [],
22 |   bootstrap: [AppComponent]
23 | })
24 | export class AppModule { }
25 | 


--------------------------------------------------------------------------------
/client/src/app/global-query.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Server Mutation Query
 3 |  */
 4 | 
 5 | 'use strict';
 6 | 
 7 | import gql from 'graphql-tag';
 8 | 
 9 | export const addUser = gql`
10 |   mutation addUser($name: String!) {
11 |     addUser(name: $name) {
12 |       id
13 |       name
14 |     }
15 |   }`;
16 | 
17 | export const Users = gql`
18 |   query {
19 |     users{
20 |       id
21 |       name
22 |     }
23 |   }`;
24 | 
25 | export const removeUser = gql`
26 |   mutation removeUser($id: String!) {
27 |     removeUser(id: $id) {
28 |       id
29 |       name
30 |     }
31 |   }`;
32 | 
33 | export const updateUser = gql`
34 |   mutation updateUser($id: String!, $name: String!) {
35 |     updateUser(id: $id, name: $name) {
36 |       id
37 |       name
38 |     }
39 |   }`;


--------------------------------------------------------------------------------
/client/src/app/graphql.module.ts:
--------------------------------------------------------------------------------
 1 | import { NgModule } from '@angular/core';
 2 | import { HttpClientModule } from '@angular/common/http';
 3 | // Apollo
 4 | import { ApolloModule, Apollo } from 'apollo-angular';
 5 | import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http';
 6 | import { InMemoryCache } from 'apollo-cache-inmemory';
 7 | 
 8 | // const uri = 'http://localhost:4000/graphql'; // Development
 9 | const uri = 'https://graphql-crud-server.herokuapp.com/graphql'; // Production
10 | 
11 | @NgModule({
12 |   exports: [
13 |     HttpClientModule,
14 |     ApolloModule,
15 |     HttpLinkModule
16 |   ]
17 | })
18 | export class GraphQLModule {
19 |   constructor(
20 |     apollo: Apollo,
21 |     httpLink: HttpLink
22 |   ) {
23 |     // create Apollo
24 |     apollo.create({
25 |       link: httpLink.create({ uri }),
26 |       cache: new InMemoryCache()
27 |     });
28 |   }
29 | }


--------------------------------------------------------------------------------
/client/src/assets/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tithi021/graphql-apollo-nodejs-mongodb-angular5/efd1de8157429966c2b278ecd915ec6f6e0ca98f/client/src/assets/.gitkeep


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


--------------------------------------------------------------------------------
/client/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 | 
6 | export const environment = {
7 |   production: false
8 | };
9 | 


--------------------------------------------------------------------------------
/client/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tithi021/graphql-apollo-nodejs-mongodb-angular5/efd1de8157429966c2b278ecd915ec6f6e0ca98f/client/src/favicon.ico


--------------------------------------------------------------------------------
/client/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>GraphQL Angular2</title>
 7 |   <base href="/">
 8 | 
 9 |   <meta name="viewport" content="width=device-width, initial-scale=1">
10 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
11 | 
12 | </head>
13 | 
14 | <body>
15 |   <app-root></app-root>
16 | </body>
17 | 
18 | </html>


--------------------------------------------------------------------------------
/client/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 | 


--------------------------------------------------------------------------------
/client/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 | 


--------------------------------------------------------------------------------
/client/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 | 
3 | @import "~bootstrap/dist/css/bootstrap.min.css";
4 | @import "~font-awesome/css/font-awesome.css";


--------------------------------------------------------------------------------
/client/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/long-stack-trace-zone';
 4 | import 'zone.js/dist/proxy.js';
 5 | import 'zone.js/dist/sync-test';
 6 | import 'zone.js/dist/jasmine-patch';
 7 | import 'zone.js/dist/async-test';
 8 | import 'zone.js/dist/fake-async-test';
 9 | import { getTestBed } from '@angular/core/testing';
10 | import {
11 |   BrowserDynamicTestingModule,
12 |   platformBrowserDynamicTesting
13 | } from '@angular/platform-browser-dynamic/testing';
14 | 
15 | // Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
16 | declare const __karma__: any;
17 | declare const require: any;
18 | 
19 | // Prevent Karma from running prematurely.
20 | __karma__.loaded = function () {};
21 | 
22 | // First, initialize the Angular testing environment.
23 | getTestBed().initTestEnvironment(
24 |   BrowserDynamicTestingModule,
25 |   platformBrowserDynamicTesting()
26 | );
27 | // Then we find all the tests.
28 | const context = require.context('./', true, /\.spec\.ts$/);
29 | // And load the modules.
30 | context.keys().map(context);
31 | // Finally, start Karma to run the tests.
32 | __karma__.start();
33 | 


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


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


--------------------------------------------------------------------------------
/client/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 |   id: string;
5 | }
6 | 


--------------------------------------------------------------------------------
/client/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 |     "typeRoots": [
12 |       "node_modules/@types"
13 |     ],
14 |     "lib": [
15 |       "esnext",
16 |       "es2017",
17 |       "dom"
18 |     ]
19 |   }
20 | }


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


--------------------------------------------------------------------------------
/server/.gitignore:
--------------------------------------------------------------------------------
1 | # dependencies
2 | /node_modules


--------------------------------------------------------------------------------
/server/config/config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     //MongoDB configuration
 3 |     development: {
 4 |         db: 'mongodb://127.0.0.1/graphql',
 5 |         app: {
 6 |             name: 'graphql'
 7 |         }
 8 |     },
 9 |     production: {
10 |         db: 'mongodb://<username>:<password>@ds157325.mlab.com:57325/graphql-api',
11 |         app: {
12 |             name: 'graphql'
13 |         }
14 |     }
15 | };


--------------------------------------------------------------------------------
/server/config/mongoose.js:
--------------------------------------------------------------------------------
 1 | var env = process.env.NODE_ENV || 'development',
 2 |     config = require('./config')[env],
 3 |     mongoose = require('mongoose');
 4 | 
 5 | module.exports = function () {
 6 |     mongoose.Promise = global.Promise;
 7 |     var db = mongoose.connect(config.db, { useMongoClient: true });
 8 |     mongoose.connection.on('error', function (err) {
 9 |         console.log('Error: Could not connect to MongoDB. Did you forget to run `mongod`?'.red);
10 |     }).on('open', function () {
11 |         console.log('Connection extablised with MongoDB')
12 |     })
13 |     return db;
14 | };
15 | 


--------------------------------------------------------------------------------
/server/graphql/index.js:
--------------------------------------------------------------------------------
 1 | var GraphQLSchema = require('graphql').GraphQLSchema;
 2 | var GraphQLObjectType = require('graphql').GraphQLObjectType;
 3 | var queryType = require('./queries/user').queryType;
 4 | var mutation = require('./mutations/index');
 5 | 
 6 | exports.userSchema = new GraphQLSchema({
 7 |   query: queryType,
 8 |   mutation: new GraphQLObjectType({
 9 |     name: 'Mutation',
10 |     fields: mutation
11 |   })
12 | })
13 | 
14 | 


--------------------------------------------------------------------------------
/server/graphql/mutations/add.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var GraphQLNonNull = require('graphql').GraphQLNonNull;
 3 | var GraphQLString = require('graphql').GraphQLString;
 4 | var UserType = require('../types/user');
 5 | var UserModel = require('../../models/user');
 6 | 
 7 | exports.add = {
 8 |   type: UserType.userType,
 9 |   args: {
10 |     name: {
11 |       type: new GraphQLNonNull(GraphQLString),
12 |     }
13 |   },
14 |   resolve(root, params) {
15 |     const uModel = new UserModel(params);
16 |     const newUser = uModel.save();
17 |     if (!newUser) {
18 |       throw new Error('Error');
19 |     }
20 |     return newUser
21 |   }
22 | }


--------------------------------------------------------------------------------
/server/graphql/mutations/index.js:
--------------------------------------------------------------------------------
1 | var addUser = require('./add').add;
2 | var removeUser = require('./remove').remove;
3 | var updateUser = require('./update').update;
4 | 
5 | module.exports = {
6 |   addUser,
7 |   removeUser,
8 |   updateUser
9 | }


--------------------------------------------------------------------------------
/server/graphql/mutations/remove.js:
--------------------------------------------------------------------------------
 1 | var GraphQLNonNull = require('graphql').GraphQLNonNull;
 2 | var GraphQLString = require('graphql').GraphQLString;
 3 | var UserType = require('../types/user');
 4 | var UserModel = require('../../models/user');
 5 | 
 6 | exports.remove = {
 7 |   type: UserType.userType,
 8 |   args: {
 9 |     id: {
10 |       type: new GraphQLNonNull(GraphQLString)
11 |     }
12 |   },
13 |   resolve(root, params) {
14 |     const removeduser = UserModel.findByIdAndRemove(params.id).exec();
15 |     if (!removeduser) {
16 |       throw new Error('Error')
17 |     }
18 |     return removeduser;
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/server/graphql/mutations/update.js:
--------------------------------------------------------------------------------
 1 | var GraphQLNonNull = require('graphql').GraphQLNonNull;
 2 | var GraphQLString = require('graphql').GraphQLString;
 3 | var UserType = require('../types/user');
 4 | var UserModel = require('../../models/user');
 5 | 
 6 | exports.update = {
 7 |   type: UserType.userType,
 8 |   args: {
 9 |     id: {
10 |       name: 'id',
11 |       type: new GraphQLNonNull(GraphQLString)
12 |     },
13 |     name: {
14 |       type: new GraphQLNonNull(GraphQLString),
15 |     }
16 |   },
17 |   resolve(root, params) {
18 |     return UserModel.findByIdAndUpdate(
19 |       params.id,
20 |       { $set: { name: params.name } },
21 |       { new: true }
22 |     )
23 |       .catch(err => new Error(err));
24 |   }
25 | }
26 | 
27 | 


--------------------------------------------------------------------------------
/server/graphql/queries/user.js:
--------------------------------------------------------------------------------
 1 | 
 2 | var GraphQLObjectType = require('graphql').GraphQLObjectType;
 3 | var GraphQLList = require('graphql').GraphQLList;
 4 | var UserModel = require('../../models/user');
 5 | var userType = require('../types/user').userType;
 6 | 
 7 | // Query
 8 | exports.queryType = new GraphQLObjectType({
 9 |   name: 'Query',
10 |   fields: function () {
11 |     return {
12 |       users: {
13 |         type: new GraphQLList(userType),
14 |         resolve: function () {
15 |           const users = UserModel.find().exec()
16 |           if (!users) {
17 |             throw new Error('Error')
18 |           }
19 |           return users
20 |         }
21 |       }
22 |     }
23 |   }
24 | });
25 | 
26 | 


--------------------------------------------------------------------------------
/server/graphql/types/user.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | var GraphQLObjectType = require('graphql').GraphQLObjectType;
 4 | var GraphQLNonNull = require('graphql').GraphQLNonNull;
 5 | var GraphQLID = require('graphql').GraphQLID;
 6 | var GraphQLString = require('graphql').GraphQLString;
 7 | 
 8 | // User Type
 9 | exports.userType = new GraphQLObjectType({
10 |   name: 'user',
11 |   fields: function () {
12 |     return {
13 |       id: {
14 |         type: new GraphQLNonNull(GraphQLID)
15 |       },
16 |       name: {
17 |         type: GraphQLString
18 |       }
19 |     }
20 |   }
21 | });
22 | 
23 | 


--------------------------------------------------------------------------------
/server/models/user.js:
--------------------------------------------------------------------------------
 1 | var mongoose = require('mongoose');
 2 | var Schema = mongoose.Schema;
 3 | 
 4 | var userSchema = new Schema({
 5 |   name: {
 6 |     type: String,
 7 |     required: true
 8 |   }
 9 | });
10 | var Model = mongoose.model('User', userSchema);
11 | module.exports = Model;
12 | 


--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "graphql-nodejs",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "server.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1",
 8 |     "start": "node server.js"
 9 |   },
10 |   "keywords": [
11 |     "nodejs",
12 |     "express",
13 |     "graphql"
14 |   ],
15 |   "author": "Afroza Yasmin",
16 |   "license": "ISC",
17 |   "dependencies": {
18 |     "bluebird": "^3.5.1",
19 |     "cors": "^2.8.4",
20 |     "express": "^4.16.2",
21 |     "express-graphql": "^0.6.11",
22 |     "graphql": "^0.11.7",
23 |     "mongoose": "^4.13.2"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/server/server.js:
--------------------------------------------------------------------------------
 1 | const express = require("express");
 2 | const mongoose = require('./config/mongoose');
 3 | const graphqlHTTP = require("express-graphql");
 4 | const cors = require("cors");
 5 | const db = mongoose();
 6 | const app = express();
 7 | 
 8 | app.use('*', cors());
 9 | 
10 | const userSchema = require('./graphql/index').userSchema;
11 | app.use('/graphql', cors(), graphqlHTTP({
12 |   schema: userSchema,
13 |   rootValue: global,
14 |   graphiql: true
15 | }));
16 | 
17 | // Up and Running at Port 4000
18 | app.listen(process.env.PORT || 4000, () => {
19 |   console.log('A GraphQL API running at port 4000');
20 | });
21 | 


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