refactor(admin-ui): Clean up streams in entity resolvers

Completes the entity streams when navigating away from an entity detail route.

packages/admin-ui/src/app/catalog/providers/routing/collection-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { Collection, ProductWithVariants } from '../../../common/generated-types';
@@ -7,8 +8,9 @@ import { DataService } from '../../../data/providers/data.service';
 
 @Injectable()
 export class CollectionResolver extends BaseEntityResolver<Collection.Fragment> {
-    constructor(private dataService: DataService) {
+    constructor(router: Router, dataService: DataService) {
         super(
+            router,
             {
                 __typename: 'Collection' as 'Collection',
                 id: '',
@@ -25,7 +27,7 @@ export class CollectionResolver extends BaseEntityResolver<Collection.Fragment>
                 parent: {} as any,
                 children: null,
             },
-            id => this.dataService.collection.getCollection(id).mapStream(data => data.collection),
+            id => dataService.collection.getCollection(id).mapStream(data => data.collection),
         );
     }
 }

packages/admin-ui/src/app/catalog/providers/routing/facet-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { FacetWithValues } from '../../../common/generated-types';
@@ -7,8 +8,9 @@ import { DataService } from '../../../data/providers/data.service';
 
 @Injectable()
 export class FacetResolver extends BaseEntityResolver<FacetWithValues.Fragment> {
-    constructor(private dataService: DataService) {
+    constructor(router: Router, dataService: DataService) {
         super(
+            router,
             {
                 __typename: 'Facet' as 'Facet',
                 id: '',
@@ -21,7 +23,7 @@ export class FacetResolver extends BaseEntityResolver<FacetWithValues.Fragment>
                 translations: [],
                 values: [],
             },
-            id => this.dataService.facet.getFacet(id).mapStream(data => data.facet),
+            id => dataService.facet.getFacet(id).mapStream(data => data.facet),
         );
     }
 }

packages/admin-ui/src/app/catalog/providers/routing/product-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { ProductWithVariants } from '../../../common/generated-types';
@@ -7,8 +8,9 @@ import { DataService } from '../../../data/providers/data.service';
 
 @Injectable()
 export class ProductResolver extends BaseEntityResolver<ProductWithVariants.Fragment> {
-    constructor(private dataService: DataService) {
+    constructor(dataService: DataService, router: Router) {
         super(
+            router,
             {
                 __typename: 'Product' as 'Product',
                 id: '',
@@ -25,8 +27,13 @@ export class ProductResolver extends BaseEntityResolver<ProductWithVariants.Frag
                 optionGroups: [],
                 facetValues: [],
                 variants: [],
+                channels: [],
             },
-            id => this.dataService.product.getProduct(id).mapStream(data => data.product),
+            id =>
+                dataService.product
+                    .getProduct(id)
+                    .refetchOnChannelChange()
+                    .mapStream(data => data.product),
         );
     }
 }

packages/admin-ui/src/app/catalog/providers/routing/product-variants-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { GetProductVariantOptions } from '../../../common/generated-types';
@@ -6,8 +7,9 @@ import { DataService } from '../../../data/providers/data.service';
 
 @Injectable()
 export class ProductVariantsResolver extends BaseEntityResolver<GetProductVariantOptions.Product> {
-    constructor(private dataService: DataService) {
+    constructor(router: Router, dataService: DataService) {
         super(
+            router,
             {
                 __typename: 'Product' as 'Product',
                 id: '',
@@ -17,7 +19,7 @@ export class ProductVariantsResolver extends BaseEntityResolver<GetProductVarian
                 optionGroups: [],
                 variants: [],
             },
-            id => this.dataService.product.getProductVariantsOptions(id).mapStream(data => data.product),
+            id => dataService.product.getProductVariantsOptions(id).mapStream(data => data.product),
         );
     }
 }

packages/admin-ui/src/app/common/base-entity-resolver.ts

@@ -1,6 +1,13 @@
-import { ActivatedRouteSnapshot, Resolve, ResolveData, RouterStateSnapshot } from '@angular/router';
+import {
+    ActivatedRouteSnapshot,
+    ActivationStart,
+    Resolve,
+    ResolveData,
+    Router,
+    RouterStateSnapshot,
+} from '@angular/router';
 import { Observable, of } from 'rxjs';
-import { filter, map, shareReplay, take } from 'rxjs/operators';
+import { filter, map, shareReplay, take, takeUntil } from 'rxjs/operators';
 import { Type } from 'shared/shared-types';
 import { notNullOrUndefined } from 'shared/shared-utils';
 
@@ -22,6 +29,7 @@ export function createResolveData<T extends BaseEntityResolver<R>, R>(
  */
 export class BaseEntityResolver<T> implements Resolve<Observable<T>> {
     constructor(
+        protected router: Router,
         private readonly emptyEntity: T,
         private entityStream: (id: string) => Observable<T | null | undefined>,
     ) {}
@@ -29,10 +37,14 @@ export class BaseEntityResolver<T> implements Resolve<Observable<T>> {
     resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Observable<T>> {
         const id = route.paramMap.get('id');
 
+        // Complete the entity stream upon navigating away
+        const navigateAway$ = this.router.events.pipe(filter(event => event instanceof ActivationStart));
+
         if (id === 'create') {
             return of(of(this.emptyEntity));
         } else {
             const stream = this.entityStream(id || '').pipe(
+                takeUntil(navigateAway$),
                 filter(notNullOrUndefined),
                 shareReplay(1),
             );

packages/admin-ui/src/app/customer/providers/routing/customer-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { Customer } from '../../../common/generated-types';
@@ -6,8 +7,9 @@ import { DataService } from '../../../data/providers/data.service';
 
 @Injectable()
 export class CustomerResolver extends BaseEntityResolver<Customer.Fragment> {
-    constructor(private dataService: DataService) {
+    constructor(router: Router, dataService: DataService) {
         super(
+            router,
             {
                 __typename: 'Customer',
                 id: '',
@@ -21,7 +23,7 @@ export class CustomerResolver extends BaseEntityResolver<Customer.Fragment> {
                 addresses: null,
                 user: null,
             },
-            id => this.dataService.customer.getCustomer(id).mapStream(data => data.customer),
+            id => dataService.customer.getCustomer(id).mapStream(data => data.customer),
         );
     }
 }

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

@@ -51,8 +51,7 @@ export class BaseDataService {
             variables,
             fetchPolicy,
         });
-        const queryResult = new QueryResult<T, any>(queryRef);
-        this.refetchOnChannelChange(queryResult);
+        const queryResult = new QueryResult<T, any>(queryRef, this.apollo);
         return queryResult;
     }
 
@@ -73,32 +72,4 @@ export class BaseDataService {
             })
             .pipe(map(result => result.data as T));
     }
-
-    /**
-     * Causes all active queries to be refetched whenever the activeChannelId changes.
-     */
-    private refetchOnChannelChange(queryResult: QueryResult<any>) {
-        const userStatus$ = this.apollo.watchQuery<GetUserStatus.Query>({ query: GET_USER_STATUS })
-            .valueChanges;
-        const activeChannelId$ = userStatus$.pipe(
-            map(data => data.data.userStatus.activeChannelId),
-            distinctUntilChanged(),
-            skip(1),
-        );
-        const loggedOut$ = userStatus$.pipe(
-            map(data => data.data.userStatus.isLoggedIn),
-            distinctUntilChanged(),
-            skip(1),
-            filter(isLoggedIn => !isLoggedIn),
-        );
-
-        activeChannelId$
-            .pipe(
-                delay(50),
-                takeUntil(merge(queryResult.completed$, loggedOut$)),
-            )
-            .subscribe(() => {
-                queryResult.ref.refetch();
-            });
-    }
 }

packages/admin-ui/src/app/data/query-result.ts

@@ -1,22 +1,62 @@
-import { QueryRef } from 'apollo-angular';
-import { NetworkStatus } from 'apollo-client';
-import { Observable, Subject } from 'rxjs';
-import { filter, finalize, map, take } from 'rxjs/operators';
+import { GetUserStatus } from '@vendure/admin-ui/src/app/common/generated-types';
+import { GET_USER_STATUS } from '@vendure/admin-ui/src/app/data/definitions/client-definitions';
+import { Apollo, QueryRef } from 'apollo-angular';
+import { ApolloQueryResult, NetworkStatus } from 'apollo-client';
+import { merge, Observable, Subject } from 'rxjs';
+import { distinctUntilChanged, filter, finalize, map, skip, take, takeUntil, tap } from 'rxjs/operators';
+import { notNullOrUndefined } from 'shared/shared-utils';
 
 /**
  * This class wraps the Apollo Angular QueryRef object and exposes some getters
  * for convenience.
  */
 export class QueryResult<T, V = Record<string, any>> {
-    constructor(private queryRef: QueryRef<T, V>) {}
+    constructor(private queryRef: QueryRef<T, V>, private apollo: Apollo) {
+        this.valueChanges = queryRef.valueChanges;
+    }
 
     completed$ = new Subject();
+    private valueChanges: Observable<ApolloQueryResult<T>>;
+
+    /**
+     * Refetch this query whenever the active Channel changes.
+     */
+    refetchOnChannelChange() {
+        const userStatus$ = this.apollo.watchQuery<GetUserStatus.Query>({ query: GET_USER_STATUS })
+            .valueChanges;
+        const activeChannelId$ = userStatus$.pipe(
+            map(data => data.data.userStatus.activeChannelId),
+            filter(notNullOrUndefined),
+            distinctUntilChanged(),
+            skip(1),
+            takeUntil(this.completed$),
+        );
+        const loggedOut$ = userStatus$.pipe(
+            map(data => data.data.userStatus.isLoggedIn),
+            distinctUntilChanged(),
+            skip(1),
+            filter(isLoggedIn => !isLoggedIn),
+            takeUntil(this.completed$),
+        );
+
+        this.valueChanges = merge(activeChannelId$, this.queryRef.valueChanges).pipe(
+            tap(val => {
+                if (typeof val === 'string') {
+                    new Promise(resolve => setTimeout(resolve, 50)).then(() => this.queryRef.refetch());
+                }
+            }),
+            filter<any>(val => typeof val !== 'string'),
+            takeUntil(loggedOut$),
+            takeUntil(this.completed$),
+        );
+        return this;
+    }
 
     /**
      * Returns an Observable which emits a single result and then completes.
      */
     get single$(): Observable<T> {
-        return this.queryRef.valueChanges.pipe(
+        return this.valueChanges.pipe(
             filter(result => result.networkStatus === NetworkStatus.ready),
             take(1),
             map(result => result.data),
@@ -31,7 +71,7 @@ export class QueryResult<T, V = Record<string, any>> {
      * Returns an Observable which emits until unsubscribed.
      */
     get stream$(): Observable<T> {
-        return this.queryRef.valueChanges.pipe(
+        return this.valueChanges.pipe(
             filter(result => result.networkStatus === NetworkStatus.ready),
             map(result => result.data),
             finalize(() => {

packages/admin-ui/src/app/marketing/providers/routing/promotion-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { Promotion } from '../../../common/generated-types';
@@ -9,8 +10,9 @@ import { DataService } from '../../../data/providers/data.service';
  */
 @Injectable()
 export class PromotionResolver extends BaseEntityResolver<Promotion.Fragment> {
-    constructor(private dataService: DataService) {
+    constructor(router: Router, dataService: DataService) {
         super(
+            router,
             {
                 __typename: 'Promotion',
                 id: '',
@@ -21,7 +23,7 @@ export class PromotionResolver extends BaseEntityResolver<Promotion.Fragment> {
                 conditions: [],
                 actions: [],
             },
-            id => this.dataService.promotion.getPromotion(id).mapStream(data => data.promotion),
+            id => dataService.promotion.getPromotion(id).mapStream(data => data.promotion),
         );
     }
 }

packages/admin-ui/src/app/order/providers/routing/order-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { OrderDetail } from '../../../common/generated-types';
@@ -9,8 +10,9 @@ import { DataService } from '../../../data/providers/data.service';
  */
 @Injectable()
 export class OrderResolver extends BaseEntityResolver<OrderDetail.Fragment> {
-    constructor(private dataService: DataService) {
+    constructor(router: Router, dataService: DataService) {
         super(
+            router,
             {
                 __typename: 'Order',
                 id: '',
@@ -19,7 +21,7 @@ export class OrderResolver extends BaseEntityResolver<OrderDetail.Fragment> {
                 updatedAt: '',
                 total: 0,
             } as any,
-            id => this.dataService.order.getOrder(id).mapStream(data => data.order),
+            id => dataService.order.getOrder(id).mapStream(data => data.order),
         );
     }
 }

packages/admin-ui/src/app/settings/providers/routing/administrator-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { Administrator, Role } from '../../../common/generated-types';
@@ -6,8 +7,9 @@ import { DataService } from '../../../data/providers/data.service';
 
 @Injectable()
 export class AdministratorResolver extends BaseEntityResolver<Administrator.Fragment> {
-    constructor(private dataService: DataService) {
+    constructor(router: Router, dataService: DataService) {
         super(
+            router,
             {
                 __typename: 'Administrator' as 'Administrator',
                 id: '',
@@ -18,7 +20,7 @@ export class AdministratorResolver extends BaseEntityResolver<Administrator.Frag
                 lastName: '',
                 user: { roles: [] } as any,
             },
-            id => this.dataService.administrator.getAdministrator(id).mapStream(data => data.administrator),
+            id => dataService.administrator.getAdministrator(id).mapStream(data => data.administrator),
         );
     }
 }

packages/admin-ui/src/app/settings/providers/routing/channel-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { Channel, CurrencyCode } from '../../../common/generated-types';
@@ -10,8 +11,9 @@ import { DataService } from '../../../data/providers/data.service';
  */
 @Injectable()
 export class ChannelResolver extends BaseEntityResolver<Channel.Fragment> {
-    constructor(private dataService: DataService) {
+    constructor(router: Router, dataService: DataService) {
         super(
+            router,
             {
                 __typename: 'Channel',
                 id: '',
@@ -25,7 +27,7 @@ export class ChannelResolver extends BaseEntityResolver<Channel.Fragment> {
                 defaultShippingZone: {} as any,
                 defaultTaxZone: {} as any,
             },
-            id => this.dataService.settings.getChannel(id).mapStream(data => data.channel),
+            id => dataService.settings.getChannel(id).mapStream(data => data.channel),
         );
     }
 }

packages/admin-ui/src/app/settings/providers/routing/country-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { Country } from '../../../common/generated-types';
@@ -9,8 +10,9 @@ import { DataService } from '../../../data/providers/data.service';
  */
 @Injectable()
 export class CountryResolver extends BaseEntityResolver<Country.Fragment> {
-    constructor(private dataService: DataService) {
+    constructor(router: Router, dataService: DataService) {
         super(
+            router,
             {
                 __typename: 'Country',
                 id: '',
@@ -21,7 +23,7 @@ export class CountryResolver extends BaseEntityResolver<Country.Fragment> {
                 enabled: false,
                 translations: [],
             },
-            id => this.dataService.settings.getCountry(id).mapStream(data => data.country),
+            id => dataService.settings.getCountry(id).mapStream(data => data.country),
         );
     }
 }

packages/admin-ui/src/app/settings/providers/routing/global-settings-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { GetGlobalSettings } from '../../../common/generated-types';
@@ -9,11 +10,12 @@ import { DataService } from '../../../data/providers/data.service';
  */
 @Injectable()
 export class GlobalSettingsResolver extends BaseEntityResolver<GetGlobalSettings.GlobalSettings> {
-    constructor(private dataService: DataService) {
+    constructor(router: Router, dataService: DataService) {
         super(
+            router,
             // we will never be creating a new GlobalSettings entity, so this part is not used.
             {} as any,
-            () => this.dataService.settings.getGlobalSettings().mapStream(data => data.globalSettings),
+            () => dataService.settings.getGlobalSettings().mapStream(data => data.globalSettings),
         );
     }
 }

packages/admin-ui/src/app/settings/providers/routing/payment-method-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { PaymentMethod } from '../../../common/generated-types';
@@ -9,8 +10,9 @@ import { DataService } from '../../../data/providers/data.service';
  */
 @Injectable()
 export class PaymentMethodResolver extends BaseEntityResolver<PaymentMethod.Fragment> {
-    constructor(private dataService: DataService) {
+    constructor(router: Router, dataService: DataService) {
         super(
+            router,
             {
                 __typename: 'PaymentMethod',
                 id: '',
@@ -20,7 +22,7 @@ export class PaymentMethodResolver extends BaseEntityResolver<PaymentMethod.Frag
                 enabled: true,
                 configArgs: [],
             },
-            id => this.dataService.settings.getPaymentMethod(id).mapStream(data => data.paymentMethod),
+            id => dataService.settings.getPaymentMethod(id).mapStream(data => data.paymentMethod),
         );
     }
 }

packages/admin-ui/src/app/settings/providers/routing/role-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { Role } from '../../../common/generated-types';
@@ -6,8 +7,9 @@ import { DataService } from '../../../data/providers/data.service';
 
 @Injectable()
 export class RoleResolver extends BaseEntityResolver<Role.Fragment> {
-    constructor(private dataService: DataService) {
+    constructor(router: Router, dataService: DataService) {
         super(
+            router,
             {
                 __typename: 'Role' as 'Role',
                 id: '',
@@ -18,7 +20,7 @@ export class RoleResolver extends BaseEntityResolver<Role.Fragment> {
                 permissions: [],
                 channels: [],
             },
-            id => this.dataService.administrator.getRole(id).mapStream(data => data.role),
+            id => dataService.administrator.getRole(id).mapStream(data => data.role),
         );
     }
 }

packages/admin-ui/src/app/settings/providers/routing/shipping-method-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { ShippingMethod } from '../../../common/generated-types';
@@ -9,8 +10,9 @@ import { DataService } from '../../../data/providers/data.service';
  */
 @Injectable()
 export class ShippingMethodResolver extends BaseEntityResolver<ShippingMethod.Fragment> {
-    constructor(private dataService: DataService) {
+    constructor(router: Router, dataService: DataService) {
         super(
+            router,
             {
                 __typename: 'ShippingMethod',
                 createdAt: '',
@@ -21,8 +23,7 @@ export class ShippingMethodResolver extends BaseEntityResolver<ShippingMethod.Fr
                 checker: undefined as any,
                 calculator: undefined as any,
             },
-            id =>
-                this.dataService.shippingMethod.getShippingMethod(id).mapStream(data => data.shippingMethod),
+            id => dataService.shippingMethod.getShippingMethod(id).mapStream(data => data.shippingMethod),
         );
     }
 }

packages/admin-ui/src/app/settings/providers/routing/tax-category-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { TaxCategory } from '../../../common/generated-types';
@@ -9,8 +10,9 @@ import { DataService } from '../../../data/providers/data.service';
  */
 @Injectable()
 export class TaxCategoryResolver extends BaseEntityResolver<TaxCategory.Fragment> {
-    constructor(private dataService: DataService) {
+    constructor(router: Router, dataService: DataService) {
         super(
+            router,
             {
                 __typename: 'TaxCategory',
                 id: '',
@@ -18,7 +20,7 @@ export class TaxCategoryResolver extends BaseEntityResolver<TaxCategory.Fragment
                 updatedAt: '',
                 name: '',
             },
-            id => this.dataService.settings.getTaxCategory(id).mapStream(data => data.taxCategory),
+            id => dataService.settings.getTaxCategory(id).mapStream(data => data.taxCategory),
         );
     }
 }

packages/admin-ui/src/app/settings/providers/routing/tax-rate-resolver.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
 
 import { BaseEntityResolver } from '../../../common/base-entity-resolver';
 import { TaxRate } from '../../../common/generated-types';
@@ -9,8 +10,9 @@ import { DataService } from '../../../data/providers/data.service';
  */
 @Injectable()
 export class TaxRateResolver extends BaseEntityResolver<TaxRate.Fragment> {
-    constructor(private dataService: DataService) {
+    constructor(router: Router, dataService: DataService) {
         super(
+            router,
             {
                 __typename: 'TaxRate',
                 id: '',
@@ -23,7 +25,7 @@ export class TaxRateResolver extends BaseEntityResolver<TaxRate.Fragment> {
                 zone: {} as any,
                 customerGroup: null,
             },
-            id => this.dataService.settings.getTaxRate(id).mapStream(data => data.taxRate),
+            id => dataService.settings.getTaxRate(id).mapStream(data => data.taxRate),
         );
     }
 }