Exercise - Cache data loaded by components - Training

8 minutes

In this exercise, you'll see how Microsoft Graph Toolkit components cache their data. You'll also control cache configuration and see how it affects loading data from Microsoft Graph.

Before you start

Complete the following steps as prerequisites for this exercise.

1. Configure a Microsoft Entra app

For this module, you'll need an application with the following settings:

Name: My app
Platform: Single Page Application (SPA)
Supported account types: Accounts in any organizational directory (Any Microsoft Entra directory - Multitenant) and personal Microsoft accounts (for example, Skype, Xbox)
Redirect URIs: http://localhost:3000

You can create this application by following these steps:

In the browser, go to the Microsoft Entra admin center, sign in, and go to Microsoft Entra ID.
Select App registrations in the left pane, and select New Registration.
On the Register an application screen, enter the following values:
- Name: enter the name for your application.
- Supported account types: select Accounts in any organizational directory (Any Microsoft Entra directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox).
- Redirect URI (optional): select Single page application (SPA) and enter http://localhost:3000.
- Select Register.

2. Set up your environment

On your desktop, create a folder named mgt-performance.
In Visual Studio Code, open the mgt-performance folder.
In the mgt-performance folder, create a file named index.html.

Copy the following code into index.html, and replace YOUR-CLIENT-ID with your copied Application (client) ID from your Microsoft Entra app that was created earlier.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>
  <body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
  </body>
</html>

Add a folder named .vscode into the root of your project folder.
Add a file named settings.json into the .vscode folder. Copy and paste the following code into settings.json, and save the file.
```
{
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}
```

Explore data cached by the toolkit components

First, let's look at how Microsoft Graph Toolkit components cache data by default.

In Visual Studio Code, open the index.html file.

Before the closing body tag, add the mgt-people component, as follows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
  </head>
  <body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
    <mgt-people></mgt-people>
  </body>
</html>

In Visual Studio Code, select the following key combination in Visual Studio Code and search for Live Server:
- Windows: CTRL+SHIFT+P
- macOS: COMMAND+SHIFT+P
Run Live Server to test your app.
Open your browser, and go to http://localhost:3000. If you have the file index.html open when you launch the Live Server, the browser will open http://localhost:3000/Index.html. Make sure you change the url to http://localhost:3000, before you sign in with your Microsoft 365 developer account. If you don't update the URL, you will get the following error.

The redirect URI 'http://localhost:3000/Index.html' specified in the request does not match the redirect URIs configured for the application <Your client ID>. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.
Select the Sign in button, and sign in with your Microsoft 365 developer account. Consent to the required permissions and select Accept. You should see a list of people.
In the web browser, open the developer tools and switch to the Application tab. In the Storage section, expand the IndexedDB group. Notice the three databases created by Microsoft Graph Toolkit.
Expand the mgt-people database and select peopleQuery. In the details pane, expand the data stored in the cache:
In the developer tools, switch to the Network tab. Choose to show only XHR requests and refresh the page. Notice that while your app is showing data, it hasn't run a single request to Microsoft Graph. All data is loaded from the cache.

Control cache settings for toolkit components

You saw how Microsoft Graph Toolkit components cache and load data from cache by default. Now, let's disable the cache and see how it affects the behavior of your app.

In the web browser, open the developer tools and select the Console tab.
Clear the Microsoft Graph Toolkit cache, by running the following statement in the console:
```
var cacheId = await mgt.Providers.getCacheId();
mgt.CacheService.clearCacheById(cacheId)
```
To confirm that the cache has been cleared, switch to the Application tab. There are no longer any databases under IndexedDB.
Next, disable the cache for all toolkit components. In Visual Studio Code, open the index.html file. Before the closing head tag, add the following snippet:
```
<script>
  mgt.CacheService.config.isEnabled = false;
</script>
```
In the web browser, refresh the page. In the developer tools, switch to the Network tab. Notice the different requests to Microsoft Graph.
Refresh the page again, and notice that the same requests have been run. Because you disabled the cache, all data needs to be retrieved from Microsoft Graph.

Continue

Exercise - Cache data loaded by components

Before you start

1. Configure a Microsoft Entra app

2. Set up your environment

Explore data cached by the toolkit components

Control cache settings for toolkit components

Feedback