How to implement caching in MS Teams Client SPFX Webpart

Question

I am trying to implement caching for a SPFX WebPart using @pnp-Storage. The caching is working alright in the Temas browser but in the Teams client, it isn't working. It is very slow as I have to make multiple azure function call. Can someone please help me with caching in the Team's app. Please refer the code below.

// Getting data from session variable
This.isListsExists = this.storage.session.get(isListsExists);

// If it exists in the session variable then don't make the HTTP call. Otherwise, make the  
// call and save it in the session variable.

if (!this.isListsExists) {
  this.isListsExists = await this.mapDataProvider.checkIfAllListsExist(); //cache 
  // Setting Session variable.
  this.storage.session.put(isListsExists, this.isListsExists, end);
}

score 0 · Answer 1 · answered Jun 30 '21 at 14:29

I was using session storage and it wasn't working with teams but when I changed it to local storage it worked like a charm.

 // Edit - Cache code
this.isListsExists = this.storage.local.get(isListsExistsCache);
// console.log("isListsExists - " + this.isListsExists);
if (!this.isListsExists) {
  this.isListsExists = await this.mapDataProvider.checkIfAllListsExist(); //cache 
  this.storage.local.put(isListsExistsCache, this.isListsExists, end);
}

How to implement caching in MS Teams Client SPFX Webpart

1 Answers1