This article provides the details of Caching the web components in Microsoft Graph Toolkit.
Background
Before we get into details of implementation of caching in Microsoft Graph tookit (MGT) components let's discuss an example. Assume that you want to display information about a person in your app: To show this information you would need to call Microsoft Graph three times. First, you’d retrieve the information about the person, then their picture, and finally their presence.
Now, let’s say you want to show this information not for one person but for five people. Your app will need to run 15 requests. If you need to show information about users in multiple places in your app (for example for showing messages, file authors, or meeting attendees), you might issue calls for data that has already been retrieved.
Microsoft Graph Toolkit is a collection of reusable and framework-agnostic web components and helpers for accessing and working with Microsoft Graph. These web components are extensible and customizable with templating and CSS custom properties. The MGT components provide access to popular Microsoft 365 datasets with the power of Microsoft Graph API.
I have earlier posted detailed articles on Microsoft Graph and basics of MGT, you can check these for details.
While an application’s functionality is very important, users equally value non-functional areas of the application, such as performance, usability, accessibility, and UI.As per the research, it is confirmed that the users are not willing to wait for more than 3 seconds for a page to load. A common challenge in modern applications is dealing with times of spikes in application usage, examples include accessing company's intranet during appraisal cycle, company announcement so on and so forth, there is a see the significant lag in the page loading.
To address these performance issues caching is important consideration, Let's explore how caching can be implemented in MGT Components.
Cache Configuration and Syntax
In MGT, Cache settings are exposed through the CacheService class. There is an option to read and write the cache options through the static class. As per the business needs, developer can control cache globally but also override configuration for a specific workload if necessary.
Implementation
//CacheService Static class
import { CacheService } from '@microsoft/mgt’;
// Disable the cache
CacheService.config.isEnabled = false;
// Set the cache expiry
CacheService.config.defaultInvalidationPeriod = 1800000;
// Disable cache of specific component
CacheService.config.<people>.isEnabled = false;
// Clear the cache globally
CacheService.clearCaches();
Default to the general defaultInvalidationPeriod value of 3,600,000 ms (60 minutes). The presence store is the only exception, and has a default value of 300000 ms, or 5 minutes. Databases created by mgt for caching are prefixed with mgt-. The data for each entity is stored in a separate object store. You can open the developer tools in web browser (press F12 on your browser) and inspect the cache. Use the Application tab in the developer panel - under the Storage section, click on IndexedDB tab.
Summary
MGT Components Cache can help to significantly improve latency and throughput.Increased load on the Microsoft graph calls results in higher latencies to get data, making the overall application performance unpredictable. An effective caching strategy is perhaps the single biggest factor in creating an app that performs well at scale.
Properly leveraging caching can result in an application that not only performs better, but also costs less at scale.
Happy Coding!