[mgt-get] Adding support for resource caching (#763)

sebastienlevert · nmetulev · web-flow · commit 0d329aafb7c2 · 2020-11-17T09:38:52.000-08:00
* Adding support for mgt-get caching

* Adding new React types.

* Refresh + polling support and images

* Update packages/mgt/src/components/mgt-get/mgt-get.ts

Co-authored-by: Nikola Metulev &lt;nmetulev@users.noreply.github.com&gt;

* Formatting code

* Adding the caching story

Co-authored-by: Nikola Metulev &lt;nmetulev@users.noreply.github.com&gt;
diff --git a/packages/mgt-react/src/generated/react.ts b/packages/mgt-react/src/generated/react.ts
@@ -28,6 +28,8 @@ export type GetProps = {
 	type?: ResponseType;
 	maxPages?: number;
 	pollingRate?: number;
+	cacheEnabled?: boolean;
+	cacheInvalidationPeriod?: number;
 	templateConverters?: MgtElement.TemplateContext;
 	templateContext?: MgtElement.TemplateContext;
 	direction?: string;
diff --git a/packages/mgt/src/components/mgt-get/mgt-get.ts b/packages/mgt/src/components/mgt-get/mgt-get.ts
@@ -9,6 +9,7 @@ import { customElement, html, property } from 'lit-element';
 import { Providers, ProviderState, MgtTemplatedComponent, equals } from '@microsoft/mgt-element';
 import { prepScopes } from '../../utils/GraphHelpers';
 import { getPhotoForResource } from '../../graph/graph.photos';
+import { CacheItem, CacheSchema, CacheService, CacheStore } from '../../utils/Cache';
 
 /**
  * Enumeration to define what types of query are available
@@ -28,6 +29,45 @@ export enum ResponseType {
   image = 'image'
 }
 
+/**
+ * Definition of cache structure
+ */
+const cacheSchema: CacheSchema = {
+  name: 'responses',
+  stores: {
+    responses: {}
+  },
+  version: 1
+};
+
+/**
+ * Object to be stored in cache representing a generic query
+ */
+interface CacheResponse extends CacheItem {
+  /**
+   * json representing a resonse as string
+   */
+  response?: string;
+}
+
+/**
+ * Defines the expiration time
+ */
+const getResponseInvalidationTime = (currentInvalidationPeriod: number): number =>
+  currentInvalidationPeriod ||
+  CacheService.config.response.invalidationPeriod ||
+  CacheService.config.defaultInvalidationPeriod;
+
+/**
+ * Whether the response store is enabled
+ */
+const responseCacheEnabled = (): boolean => CacheService.config.response.isEnabled && CacheService.config.isEnabled;
+
+/**
+ * Name of the response store name
+ */
+const responsesStore: string = 'responses';
+
 /**
  * Custom element for making Microsoft Graph get queries
  *
@@ -124,6 +164,33 @@ export class MgtGet extends MgtTemplatedComponent {
   })
   public pollingRate: number = 0;
 
+  /**
+   * Enables cache on the response from the specified resource
+   * default = false
+   *
+   * @type {boolean}
+   * @memberof MgtGet
+   */
+  @property({
+    attribute: 'cache-enabled',
+    reflect: true,
+    type: Boolean
+  })
+  public cacheEnabled: boolean = false;
+
+  /**
+   * Invalidation period of the cache for the responses in milliseconds
+   *
+   * @type {number}
+   * @memberof MgtGet
+   */
+  @property({
+    attribute: 'cache-invalidation-period',
+    reflect: true,
+    type: Number
+  })
+  public cacheInvalidationPeriod: number = 0;
+
   /**
    * Gets or sets the response of the request
    *
@@ -141,6 +208,7 @@ export class MgtGet extends MgtTemplatedComponent {
   @property({ attribute: false }) public error: any;
 
   private isPolling: boolean = false;
+  private isRefreshing: boolean = false;
 
   /**
    * Synchronizes property values when attributes change.
@@ -164,7 +232,9 @@ export class MgtGet extends MgtTemplatedComponent {
    * @memberof MgtGet
    */
   public refresh(hardRefresh = false) {
+    this.isRefreshing = true;
     this.requestStateUpdate(hardRefresh);
+    this.isRefreshing = false;
   }
 
   /**
@@ -235,74 +305,92 @@ export class MgtGet extends MgtTemplatedComponent {
 
     if (this.resource) {
       try {
-        let uri = this.resource;
-        let isDeltaLink = false;
+        let cache: CacheStore<CacheResponse>;
+        const key = `${this.version}${this.resource}`;
+        let response = null;
 
-        // if we had a response earlier with a delta link, use it instead
-        if (this.response && this.response['@odata.deltaLink']) {
-          uri = this.response['@odata.deltaLink'];
-          isDeltaLink = true;
-        } else {
-          isDeltaLink = new URL(uri, 'https://graph.microsoft.com').pathname.endsWith('delta');
+        if (this.shouldRetrieveCache()) {
+          cache = CacheService.getCache<CacheResponse>(cacheSchema, responsesStore);
+          const result: CacheResponse = responseCacheEnabled() ? await cache.getValue(key) : null;
+          if (result && getResponseInvalidationTime(this.cacheInvalidationPeriod) > Date.now() - result.timeCached) {
+            response = JSON.parse(result.response);
+          }
         }
 
-        const graph = provider.graph.forComponent(this);
-        let request = graph.api(uri).version(this.version);
+        if (!response) {
+          let uri = this.resource;
+          let isDeltaLink = false;
 
-        if (this.scopes && this.scopes.length) {
-          request = request.middlewareOptions(prepScopes(...this.scopes));
-        }
+          // if we had a response earlier with a delta link, use it instead
+          if (this.response && this.response['@odata.deltaLink']) {
+            uri = this.response['@odata.deltaLink'];
+            isDeltaLink = true;
+          } else {
+            isDeltaLink = new URL(uri, 'https://graph.microsoft.com').pathname.endsWith('delta');
+          }
 
-        let response = null;
-        if (this.type === ResponseType.json) {
-          response = await request.get();
+          const graph = provider.graph.forComponent(this);
+          let request = graph.api(uri).version(this.version);
 
-          if (isDeltaLink && this.response && Array.isArray(this.response.value) && Array.isArray(response.value)) {
-            response.value = this.response.value.concat(response.value);
+          if (this.scopes && this.scopes.length) {
+            request = request.middlewareOptions(prepScopes(...this.scopes));
           }
 
-          if (!this.isPolling && !equals(this.response, response)) {
-            this.response = response;
-          }
+          if (this.type === ResponseType.json) {
+            response = await request.get();
 
-          // get more pages if there are available
-          if (response && Array.isArray(response.value) && response['@odata.nextLink']) {
-            let pageCount = 1;
-            let page = response;
-
-            while (
-              (pageCount < this.maxPages || this.maxPages <= 0 || (isDeltaLink && this.pollingRate)) &&
-              page &&
-              page['@odata.nextLink']
-            ) {
-              pageCount++;
-              const nextResource = page['@odata.nextLink'].split(this.version)[1];
-              page = await graph.client
-                .api(nextResource)
-                .version(this.version)
-                .get();
-              if (page && page.value && page.value.length) {
-                page.value = response.value.concat(page.value);
-                response = page;
-                if (!this.isPolling) {
-                  this.response = response;
+            if (isDeltaLink && this.response && Array.isArray(this.response.value) && Array.isArray(response.value)) {
+              response.value = this.response.value.concat(response.value);
+            }
+
+            if (!this.isPolling && !equals(this.response, response)) {
+              this.response = response;
+            }
+
+            // get more pages if there are available
+            if (response && Array.isArray(response.value) && response['@odata.nextLink']) {
+              let pageCount = 1;
+              let page = response;
+
+              while (
+                (pageCount < this.maxPages || this.maxPages <= 0 || (isDeltaLink && this.pollingRate)) &&
+                page &&
+                page['@odata.nextLink']
+              ) {
+                pageCount++;
+                const nextResource = page['@odata.nextLink'].split(this.version)[1];
+                page = await graph.client
+                  .api(nextResource)
+                  .version(this.version)
+                  .get();
+                if (page && page.value && page.value.length) {
+                  page.value = response.value.concat(page.value);
+                  response = page;
+                  if (!this.isPolling) {
+                    this.response = response;
+                  }
                 }
               }
             }
-          }
-        } else {
-          if (this.resource.indexOf('/photo/$value') === -1) {
-            throw new Error('Only /photo/$value endpoints support the image type');
-          }
+          } else {
+            if (this.resource.indexOf('/photo/$value') === -1) {
+              throw new Error('Only /photo/$value endpoints support the image type');
+            }
 
-          // Sanitizing the resource to ensure getPhotoForResource gets the right format
-          const sanitizedResource = this.resource.replace('/photo/$value', '');
-          const photoResponse = await getPhotoForResource(graph, sanitizedResource, this.scopes);
+            // Sanitizing the resource to ensure getPhotoForResource gets the right format
+            const sanitizedResource = this.resource.replace('/photo/$value', '');
+            const photoResponse = await getPhotoForResource(graph, sanitizedResource, this.scopes);
 
-          if (photoResponse) {
-            response = {
-              image: photoResponse.photo
-            };
+            if (photoResponse) {
+              response = {
+                image: photoResponse.photo
+              };
+            }
+          }
+
+          if (this.shouldUpdateCache() && response) {
+            cache = CacheService.getCache<CacheResponse>(cacheSchema, responsesStore);
+            cache.putValue(key, { response: JSON.stringify(response) });
           }
         }
 
@@ -330,4 +418,12 @@ export class MgtGet extends MgtTemplatedComponent {
 
     this.fireCustomEvent('dataChange', { response: this.response, error: this.error });
   }
+
+  private shouldRetrieveCache(): boolean {
+    return responseCacheEnabled() && this.cacheEnabled && !(this.isRefreshing || this.isPolling);
+  }
+
+  private shouldUpdateCache(): boolean {
+    return responseCacheEnabled() && this.cacheEnabled;
+  }
 }
diff --git a/packages/mgt/src/utils/Cache.ts b/packages/mgt/src/utils/Cache.ts
@@ -65,6 +65,14 @@ export interface CacheConfig {
    * @memberof CacheConfig
    */
   users: CacheOptions;
+
+  /**
+   * Cache options for a generic response store
+   *
+   * @type {CacheOptions}
+   * @memberof CacheConfig
+   */
+  response: CacheOptions;
 }
 
 /**
@@ -153,6 +161,10 @@ export class CacheService {
     users: {
       invalidationPeriod: null,
       isEnabled: true
+    },
+    response: {
+      invalidationPeriod: null,
+      isEnabled: true
     }
   };
 
diff --git a/stories/components/get.stories.js b/stories/components/get.stories.js
@@ -157,3 +157,11 @@ export const UsingImageType = () => html`
     </template>
   </mgt-get>
 `;
+
+export const UsingCaching = () => html`
+  <mgt-get resource="me" caching-enabled="true">
+    <template>
+      Hello {{ displayName }}
+    </template>
+  </mgt-get>
+`;
