Caching now supports checking eTag for user photos (#608)

* support for etag checking added for user photos caching

* removed unused import

* fixed etag logic

* added checking for null etags

* removed console log

* added etag checking for myPhoto

Co-authored-by: Nikola Metulev <[email protected]>

Author: adrien-chaussabel

packages/mgt-element/src/IBatch.ts

@@ -38,6 +38,12 @@ export class BatchResponse {
    * @memberof BatchResponse
    */
   public content: any;
+  /**
+   * The header of the response
+   * @type {*}
+   * @memberof BatchResponse
+   */
+  public headers: string[];
 }
 
 /**

packages/mgt/src/graph/graph.photos.ts

@@ -29,7 +29,7 @@ const cacheSchema: CacheSchema = {
 /**
  * photo object stored in cache
  */
-interface CachePhoto extends CacheItem {
+export interface CachePhoto extends CacheItem {
   /**
    * user tag associated with photo
    */
@@ -79,8 +79,7 @@ export async function getPhotoForResource(graph: IGraph, resource: string, scope
     if (!response.ok) {
       return null;
     }
-
-    const eTag = response.headers.get('ETag');
+    const eTag = response.headers.get('eTag');
     const blob = await blobToBase64(await response.blob());
     return { eTag, photo: blob };
   } catch (e) {
@@ -121,15 +120,32 @@ export async function getContactPhoto(graph: IGraph, contactId: string): Promise
 export async function getUserPhoto(graph: IGraph, userId: string): Promise<string> {
   let cache: CacheStore<CachePhoto>;
   let photoDetails: CachePhoto;
+
   if (photosCacheEnabled()) {
     cache = CacheService.getCache<CachePhoto>(cacheSchema, userStore);
     photoDetails = await cache.getValue(userId);
     if (photoDetails && getPhotoInvalidationTime() > Date.now() - photoDetails.timeCached) {
       return photoDetails.photo;
+    } else if (photoDetails) {
+      // there is a photo in the cache, but it's stale
+      try {
+        const response = await graph.api(`users/${userId}/photo`).get();
+        if (
+          response &&
+          (response['@odata.mediaEtag'] !== photoDetails.eTag ||
+            (response['@odata.mediaEtag'] === null && response.eTag === null))
+        ) {
+          // set photoDetails to null so that photo gets pulled from the graph later
+          photoDetails = null;
+        }
+      } catch {
+        return null;
+      }
     }
   }
 
-  photoDetails = await getPhotoForResource(graph, `users/${userId}`, ['user.readbasic.all']);
+  // if there is a photo in the cache, we got here because it was stale
+  photoDetails = photoDetails || (await getPhotoForResource(graph, `users/${userId}`, ['user.readbasic.all']));
   if (photosCacheEnabled() && photoDetails) {
     cache.putValue(userId, photoDetails);
   }
@@ -152,7 +168,20 @@ export async function myPhoto(graph: IGraph): Promise<string> {
     }
   }
 
-  photoDetails = await getPhotoForResource(graph, 'me', ['user.read']);
+  try {
+    const response = await graph.api(`me/photo`).get();
+    if (
+      response &&
+      (response['@odata.mediaEtag'] !== photoDetails.eTag ||
+        (response['@odata.mediaEtag'] === null && response.eTag === null))
+    ) {
+      photoDetails = null;
+    }
+  } catch {
+    return null;
+  }
+
+  photoDetails = photoDetails || (await getPhotoForResource(graph, 'me', ['user.read']));
   if (photosCacheEnabled()) {
     cache.putValue('me', photoDetails || {});
   }

packages/mgt/src/graph/graph.user.ts

@@ -15,7 +15,8 @@ import {
   getPhotoFromCache,
   getPhotoInvalidationTime,
   photosCacheEnabled,
-  storePhotoInCache
+  storePhotoInCache,
+  CachePhoto
 } from './graph.photos';
 import { IDynamicPerson } from './types';
 
@@ -114,6 +115,10 @@ export async function getUserWithPhoto(graph: IGraph, userId?: string): Promise<
   let cache: CacheStore<CacheUser>;
   let photo = null;
   let user: IDynamicPerson;
+  let cachedPhoto: CachePhoto;
+  const resource = userId ? `users/${userId}` : 'me';
+  const scopes = userId ? ['user.readbasic.all'] : ['user.read'];
+
   // attempt to get user and photo from cache if enabled
   if (usersCacheEnabled()) {
     cache = CacheService.getCache<CacheUser>(cacheSchema, userStore);
@@ -123,11 +128,21 @@ export async function getUserWithPhoto(graph: IGraph, userId?: string): Promise<
     }
   }
   if (photosCacheEnabled()) {
-    const cachedPhoto = await getPhotoFromCache(userId || 'me', 'users');
+    cachedPhoto = await getPhotoFromCache(userId || 'me', 'users');
     if (cachedPhoto && getPhotoInvalidationTime() > Date.now() - cachedPhoto.timeCached) {
       photo = cachedPhoto.photo;
+    } else if (cachedPhoto) {
+      try {
+        const response = await graph.api(`${resource}/photo`).get();
+        if (response && response['@odata.mediaEtag'] && response['@odata.mediaEtag'] === cachedPhoto.eTag) {
+          // put current image into the cache to update the timestamp since etag is the same
+          storePhotoInCache(userId || 'me', 'users', cachedPhoto);
+          photo = cachedPhoto.photo;
+        }
+      } catch (e) {}
     }
   }
+
   if (!photo && !user) {
     // batch calls
     const batch = graph.createBatch();
@@ -139,8 +154,17 @@ export async function getUserWithPhoto(graph: IGraph, userId?: string): Promise<
       batch.get('photo', 'me/photo/$value', ['user.read']);
     }
     const response = await batch.executeAll();
+    const eTag = response.get('photo').headers['ETag'];
     photo = response.get('photo').content;
     user = response.get('user').content;
+
+    // store user & photo in their respective cache
+    if (usersCacheEnabled()) {
+      cache.putValue(userId || 'me', { user: JSON.stringify(user) });
+    }
+    if (photosCacheEnabled()) {
+      storePhotoInCache(userId || 'me', 'users', { eTag, photo: photo });
+    }
   } else if (!photo) {
     // get photo from graph
     const resource = userId ? `users/${userId}` : 'me';
@@ -165,9 +189,9 @@ export async function getUserWithPhoto(graph: IGraph, userId?: string): Promise<
           .get();
     if (response) {
       if (usersCacheEnabled()) {
-        cache.putValue(userId || 'me', { user: JSON.stringify(response.content) });
+        cache.putValue(userId || 'me', { user: JSON.stringify(response) });
       }
-      user = response.content;
+      user = response;
     }
   }
   person = user;

packages/mgt/src/utils/Batch.ts

@@ -164,6 +164,7 @@ export class Batch implements IBatch {
 
       response.id = request.id;
       response.index = request.index;
+      response.headers = r.headers;
 
       if (r.status !== 200) {
         if (r.status === 429) {