#5 Setup Graphql

web/package.json

@@ -24,10 +24,17 @@
     "@fortawesome/free-brands-svg-icons": "^5.13.0",
     "@fortawesome/free-regular-svg-icons": "^5.13.0",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "apollo-angular": "^1.9.1",
     "oidc-client": "^1.10.1",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.10.2",
+    "apollo-angular-link-http": "^1.10.0",
+    "apollo-link": "^1.2.11",
+    "apollo-client": "^2.6.0",
+    "apollo-cache-inmemory": "^1.6.0",
+    "graphql-tag": "^2.10.0",
+    "graphql": "^14.6.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.901.4",

web/src/app/app.module.ts

@@ -16,6 +16,8 @@ import { ListDirective } from './components/list/list.directive';
 import { AddgroupComponent } from './components/addgroup/addgroup.component';
 import { RepositoryDetailComponent } from './views/repository-detail/repository-detail.component';
 import { ListDetailsComponent } from './components/list-details/list-details.component';
+import { GraphQLModule } from './graphql.module';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -36,7 +38,9 @@ import { ListDetailsComponent } from './components/list-details/list-details.com
   imports: [
     BrowserModule,
     AppRoutingModule,
-    FontAwesomeModule
+    FontAwesomeModule,
+    GraphQLModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

web/src/app/graphql.module.ts

@@ -0,0 +1,25 @@
+import {NgModule} from '@angular/core';
+import {ApolloModule, APOLLO_OPTIONS} from 'apollo-angular';
+import {HttpLinkModule, HttpLink} from 'apollo-angular-link-http';
+import {InMemoryCache} from 'apollo-cache-inmemory';
+
+// TODO: Add GrpahQL ndpoint
+const uri = ''; // <-- add the URL of the GraphQL server here
+export function createApollo(httpLink: HttpLink) {
+  return {
+    link: httpLink.create({uri}),
+    cache: new InMemoryCache(),
+  };
+}
+
+@NgModule({
+  exports: [ApolloModule, HttpLinkModule],
+  providers: [
+    {
+      provide: APOLLO_OPTIONS,
+      useFactory: createApollo,
+      deps: [HttpLink],
+    },
+  ],
+})
+export class GraphQLModule {}

web/src/app/schematics/example.graphql

@@ -0,0 +1,12 @@
+query allPosts {
+  posts {
+    id
+    title
+    votes
+    author {
+      id
+      firstName
+      lastName
+    }
+  }
+}

web/src/app/services/example-graphql.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ExampleGraphqlService } from './example-graphql.service';
+
+describe('ExampleGraphqlService', () => {
+  let service: ExampleGraphqlService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ExampleGraphqlService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

web/src/app/services/example-graphql.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { Apollo } from 'apollo-angular';
+import gql from 'graphql-tag';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ExampleGraphqlService {
+  private rates;
+  private loading
+  private error;
+
+  constructor(private apollo: Apollo) { }
+
+  exampleQuerieCall() {
+    this.apollo
+      .watchQuery({
+        query: gql`
+          {
+            rates(currency: "USD") {
+              currency
+              rate
+            }
+          }
+        `,
+      })
+      .valueChanges.subscribe((result: any) => {
+        this.rates = result.data && result.data.rates;
+        this.loading = result.loading;
+        this.error = result.error;
+      });
+  }
+}