Skip to content

Migration from 1.x.x to 2.x.x

Jump to bottom
Muthurathinam edited this page Jul 1, 2019 · 4 revisions

For list of changes refer this page

Polyfill only when required

Library was shipping with polyfills for fetch and promise and now we took a smart decision not to ship the polyfills neither to import them into the code. This gives more space for the users of the library to take actions regarding polyfills according to their need.

Having said that, this particular code change requires some ground work from your side.

  • Node environment - if you are using the library in node server you want polyfill fetch.

If you have code like this:

import { Client } from "@microsoft/microsoft-graph-client";

//Or

const MicrosoftGraph = require("@microsoft/microsoft-graph-client");

Migrate to this:

Note: Choice of fetch polyfill is not restricted to "isomorphic-fetch", you can choose your preferred choice.

npm i -S "isomorphic-fetch";
import "isomorphic-fetch";
import { Client } from "@microsoft/microsoft-graph-client";

//Or

require("isomorphic-fetch");
const MicrosoftGraph = require("@microsoft/microsoft-graph-client");

If you have code like this:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@microsoft/microsoft-graph-client/lib/graph-js-sdk-web.js"></script>

<!--or-->

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@microsoft/microsoft-graph-client/lib/graph-js-sdk-core.js"></script>

Migrate to this:

Note: graph-js-sdk-web.js and graph-js-sdk-core.js are removed and graph-js-sdk.js should be used instead.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@microsoft/microsoft-graph-client/lib/graph-js-sdk.js"></script>

<!--
    If your application's supported browsers doesn't have support for promise, fetch then add the below lines to your html file
    NOTE: The polyfills are not restricted to below, you can add your own choice of polyfills
-->

<!-- polyfilling promise -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/es6-promise/dist/es6-promise.auto.min.js"></script>

<!-- polyfilling fetch -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/whatwg-fetch/dist/fetch.umd.min.js"></script>

New Minified Files

graph-js-sdk-web.js and graph-js-sdk-core.js files are no longer available, new file named graph-js-sdk.js will be shipped along with graph-es-sdk.js. Both graph-js-sdk.js and graph-es-sdk.js will not depend on the isomorphic-fetch and es6-promise anymore.

If you have code like this:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@microsoft/microsoft-graph-client/lib/graph-js-sdk-web.js"></script>

<!--or-->

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@microsoft/microsoft-graph-client/lib/graph-js-sdk-core.js"></script>

Migrate to this:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@microsoft/microsoft-graph-client/lib/graph-js-sdk.js"></script>

Getting Raw Response

When making request using callback method raw response is not passed as the param to the callback, instead get the same by using .responseType(ResponseType.RAW)

If you have code like this:

client
    .api('/me')
    .get((err, res, rawResponse) => {
        console.log(rawResponse);
    });

Migrate to this:

client
    .api('/me')
    .responseType(ResponseType.RAW)
    .get((err, rawResponse) => {
        console.log(rawResponse);
    });

Initializing AuthenticationProvider for MSAL

If you have code like this:

const clientID = "your_client_id"; // Client Id of the registered application
const graphScopes = ["user.read", "mail.send"]; // An array of graph scopes
const options = {
	redirectUri: "Your redirect URI",
};
const authProvider = new MicrosoftGraph.MSALAuthenticationProvider(clientId, graphScopes, options);

or

const clientId = "your_client_id"; // Client Id of the registered application
const callback = (errorDesc, token, error, tokenType) => {};
const options = {
	redirectUri: "Your redirect URI",
};
const graphScopes = ["user.read", "mail.send"]; // An array of graph scopes
const userAgentApplication = new Msal.UserAgentApplication(clientId, undefined, callback, options);
const authProvider = new MicrosoftGraph.MSALAuthenticationProvider(userAgentApplication, graphScopes);

Migrate to this:

Note: Params for initializing UserAgentApplication got changed and MSALAuthenticationProvider is now renamed as ImplicitMSALAuthenticationProvider

const msalConfig = {
	auth: {
		clientId: "your_client_id"; // Client Id of the registered application
		redirectUri: "your_redirect_uri",
	},
};
const graphScopes = ["user.read", "mail.send"]; // An array of graph scopes

const msalInstance = new Msal.UserAgentApplication(msalConfig);
const options = new MicrosoftGraph.MSALAuthenticationProviderOptions(graphScopes);
const authProvider = new MicrosoftGraph.ImplicitMSALAuthenticationProvider(msalInstance, options);

If you have code like this:

import { MSALAuthenticationProvider } from "./node_modules/@microsoft/microsoft-graph-client/lib/src/MSALAuthenticationProvider";

const clientId = "your_client_id"; // Client Id of the registered application
const graphScopes = ["user.read", "mail.send"]; // An array of graph scopes
const options = {
	redirectUri: "Your redirect URI",
};
const authProvider = new MSALAuthenticationProvider(clientId, scopes, options);

or

import { UserAgentApplication } from "msal";

import { MSALAuthenticationProvider } from "./node_modules/@microsoft/microsoft-graph-client/lib/src/MSALAuthenticationProvider";

const clientId = "your_client_id"; // Client Id of the registered application
const callback = (errorDesc, token, error, tokenType) => {};
const options = {
	redirectUri: "Your redirect URI",
};
const graphScopes = ["user.read", "mail.send"]; // An array of graph scopes
const userAgentApplication = new UserAgentApplication(clientId, undefined, callback, options);
const authProvider = new MSALAuthenticationProvider(userAgentApplication, scopes);

Migrate to this:

[Note: Params for initializing UserAgentApplication got changed and MSALAuthenticationProvider is now renamed as ImplicitMSALAuthenticationProvider]

import { UserAgentApplication } from "msal";

import { ImplicitMSALAuthenticationProvider } from "./node_modules/@microsoft/microsoft-graph-client/lib/src/ImplicitMSALAuthenticationProvider";

const msalConfig = {
	auth: {
		clientId: "your_client_id"; // Client Id of the registered application
		redirectUri: "your_redirect_uri",
	},
};
const graphScopes = ["user.read", "mail.send"]; // An array of graph scopes

const msalInstance = new UserAgentApplication(msalConfig);
const options = new MicrosoftGraph.MSALAuthenticationProviderOptions(graphScopes);
const authProvider = new ImplicitMSALAuthenticationProvider(msalInstance, options);

Default Content-Type for put request

The default Content-Type for a put request is changed from application/octet-stream to application/json. So if you have a code that depend on streaming the payload to the server, switch to putStream instead

If you have code like this:

let readStream = fs.createReadStream("<FILE_PATH>");
client
    .api('/me/drive/root/children/<FILE_NAME_WITH_EXTENSION>/content')
    .put(readStream)
    .then((res) => {
        console.log(res);
    })
    .catch((err) => {
        console.log(err);
    });

Migrate to this:

let readStream = fs.createReadStream("<FILE_PATH>");
client
    .api('/me/drive/root/children/<FILE_NAME_WITH_EXTENSION>/content')
    .put(readStream)
    .then((res) => {
        console.log(res);
    })
    .catch((err) => {
        console.log(err);
    });

If you are putting the json payload by explicitly mentioning the Content-Type, now you don't have to do that little extra work, put request method takes care of it.

If you have code like this:

const teamSettings = {  
    memberSettings: {
        allowCreateUpdateChannels: true
    },
    messagingSettings: {
        allowUserEditMessages: true,
        allowUserDeleteMessages: true
    },
    funSettings: {
        allowGiphy: true,
        giphyContentRating: "strict"
    }
};
client
    .api('/groups/${groupId}/team')
    .put(teamSettings)
    .header("Content-Type", "application/json")
    .then((res) => {
        console.log(res);
    })
    .catch((err) => {
        console.log(err);
    });

Migrate to this:

const teamSettings = {  
    memberSettings: {
        allowCreateUpdateChannels: true
    },
    messagingSettings: {
        allowUserEditMessages: true,
        allowUserDeleteMessages: true
    },
    funSettings: {
        allowGiphy: true,
        giphyContentRating: "strict"
    }
};
client
    .api('/groups/${groupId}/team')
    .put(teamSettings)
    .then((res) => {
        console.log(res);
    })
    .catch((err) => {
        console.log(err);
    });
Clone this wiki locally