refactor(admin-ui): Experiment in exposing Apollo QueryRef to component

admin-ui/src/app/catalog/components/product-list/product-list.component.ts

@@ -1,12 +1,15 @@
 import { Component, OnInit } from '@angular/core';
-import { DataService } from '../../../core/providers/data/data.service';
+import { QueryRef } from 'apollo-angular';
 import { Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
+import { GetProductListQuery, GetProductListQueryVariables } from '../../../common/types/gql-generated-types';
+import { DataService } from '../../../core/providers/data/data.service';
+
 @Component({
     selector: 'vdr-products-list',
     templateUrl: './product-list.component.html',
-    styleUrls: ['./product-list.component.scss']
+    styleUrls: ['./product-list.component.scss'],
 })
 export class ProductListComponent implements OnInit {
 
@@ -14,19 +17,21 @@ export class ProductListComponent implements OnInit {
     totalItems: number;
     itemsPerPage = 25;
     currentPage = 1;
+    private productsQuery: QueryRef<GetProductListQuery, GetProductListQueryVariables>;
 
     constructor(private dataService: DataService) { }
 
     ngOnInit() {
-        this.getPage(1);
+        this.productsQuery = this.dataService.product.getProducts(this.itemsPerPage, 0);
+        this.products$ = this.productsQuery.valueChanges.pipe(
+            tap(val => { this.totalItems = val.data.products.totalItems; }),
+            map(val => val.data.products.items),
+        );
     }
 
     getPage(pageNumber: number): void {
         const take = this.itemsPerPage;
         const skip = (pageNumber - 1) * this.itemsPerPage;
-        this.products$ = this.dataService.product.getProducts(take, skip).pipe(
-            tap(val => { this.totalItems = val.totalItems; }),
-            map(val => val.items),
-        );
+        this.productsQuery.refetch({ skip, take });
     }
 }

admin-ui/src/app/core/providers/data/base-data.service.ts

@@ -1,9 +1,10 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Apollo } from 'apollo-angular';
+import { Apollo, QueryRef } from 'apollo-angular';
 import { DocumentNode } from 'graphql/language/ast';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+
 import { API_URL } from '../../../app.config';
 import { LocalStorageService } from '../local-storage/local-storage.service';
 
@@ -17,7 +18,7 @@ export class BaseDataService {
     /**
      * Performs a GraphQL query
      */
-    query<T, V = Record<string, any>>(query: DocumentNode, variables?: V): Observable<T> {
+    query<T, V = Record<string, any>>(query: DocumentNode, variables?: V): QueryRef<T> {
         return this.apollo.watchQuery<T, V>({
             query,
             variables,
@@ -26,9 +27,7 @@ export class BaseDataService {
                     Authorization: this.getAuthHeader(),
                 },
             },
-        }).valueChanges.pipe(
-            map(result => result.data),
-        );
+        });
     }
 
     /**
@@ -39,7 +38,10 @@ export class BaseDataService {
             headers: {
                 Authorization: this.getAuthHeader(),
             },
-        });
+            observe: 'response',
+        }).pipe(
+            map(response => response.body),
+        );
     }
 
     /**
@@ -50,7 +52,10 @@ export class BaseDataService {
             headers: {
                 Authorization: this.getAuthHeader(),
             },
-        });
+            observe: 'response',
+        }).pipe(
+            map(response => response.body),
+        );
     }
 
     private getAuthHeader(): string {

admin-ui/src/app/core/providers/data/product-data.service.ts

@@ -1,5 +1,5 @@
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { QueryRef } from 'apollo-angular';
+
 import { ID } from '../../../../../../shared/shared-types';
 import { getProductById } from '../../../common/queries/get-product-by-id';
 import { getProductList } from '../../../common/queries/get-product-list';
@@ -8,24 +8,23 @@ import {
     GetProductByIdQueryVariables,
     GetProductListQuery,
     GetProductListQueryVariables,
+    LanguageCode,
 } from '../../../common/types/gql-generated-types';
+
 import { BaseDataService } from './base-data.service';
 
 export class ProductDataService {
 
     constructor(private baseDataService: BaseDataService) {}
 
-    getProducts(take: number = 10, skip: number = 0): Observable<GetProductListQuery['products']> {
-        return this.baseDataService.query<GetProductListQuery, GetProductListQueryVariables>(getProductList, { take, skip }).pipe(
-            map(data => data.products),
-        );
+    getProducts(take: number = 10, skip: number = 0): QueryRef<GetProductListQuery, GetProductListQueryVariables> {
+        return this.baseDataService
+            .query<GetProductListQuery, GetProductListQueryVariables>(getProductList, { take, skip, languageCode: LanguageCode.en });
     }
 
-    getProduct(id: ID): Observable<GetProductByIdQuery['product']> {
+    getProduct(id: ID): any {
         const stringId = id.toString();
-        return this.baseDataService.query<GetProductByIdQuery, GetProductByIdQueryVariables>(getProductById, { id: stringId }).pipe(
-            map(data => data.product),
-        );
+        return this.baseDataService.query<GetProductByIdQuery, GetProductByIdQueryVariables>(getProductById, { id: stringId });
     }
 
 }