João Mendes
Microsoft MVP | SharePoint and Office 365 Solutions Developer
Get User Information and Photo using MSGraph Batch
To obtain information about the user and the respective photo, we have to make two requests, one to obtain user information and the other to obtain a photo. If your application obtains information from just one user, this may not be a problem, but if you need to obtain a list of users, there will be a performance degradation, since for each user we have to make two requests.
For example to create a list of contacts like the below, even with paging (20 items) we will have to wait some seconds to show the list.
To limit the number of requests we can use MS Graph Batch, this allows us to combine several requests in one HTTP call, all requests are executed on the server and when all requests are made we receive the result of each request. Each request is defined in the JSON object array that is passed as a property to the MS Graph Batch API.
Here my snippet to get information of user and photo and save the information on local cache:
/**
* Get User Data
* @param user
*/
const getUserId = async (user: string): Promise<IUserInfo> => {
let userInfo: IUserInfo;
let blobPhoto: string;
let usersResults: User;
// Create a Batch Request
// 2 rquests
// id=1 = user Info
// id=2 = user Photo
const batchRequests: IBatchRequest[] = [
{
id: "1",
url: `/users/${user}`,
method: "GET",
headers: {
ConsistencyLevel: "eventual",
},
},
{
id: "2",
url: `/users/${user}/photo/$value`,
headers: { "content-type": "img/jpg" },
method: "GET",
},
];
// Try to get user information from cache
try {
userInfo = await cache.get(`${user}`);
return userInfo;
} catch (error) {
// execute batch
const batchResults: any = await msgGraphclient
.api(`/$batch`)
.version("v1.0")
.post({ requests: batchRequests });
// get Responses
const responses: any = batchResults.responses;
// load responses
for (const response of responses) {
// user info
switch (response.id) {
case "1":
usersResults = response.body;
break;
case "2":
const binToBlob = response?.body
? await b64toBlob(response?.body, "img/jpg")
: undefined;
blobPhoto = (await blobToBase64(binToBlob)) ?? undefined;
break;
default:
break;
}
}
// save userinfo in cache
userInfo = { ...usersResults, userPhoto: blobPhoto };
// return Userinfo with photo
await cache.put(`${user}`, userInfo);
return userInfo;
}
};
With this code we get all the information of the user and photo in a single request and minimize the application network latency and with cache we only do a request if user not exists, and return an object
Please see all code here
Thank you for reading !
João Mendes 