the `timeout` property of the fetchOptions is not working?

[kafka-yu]

Bug Report

Prerequisites

I use the below codes to init the client in my React app, NOTE the "timeout" value,

    this._client = Client.initWithMiddleware({
      authProvider,
      fetchOptions: {
        timeout: 15 * 1000, 
      },
    });

While when I calling the MS Graph API via the client, the timeout of the fetch action does not work.

Steps to Reproduce

1. Init the client with the above code
2. Turn off the network connection
3. Invoke the API request via the above client
4. The fetch request is in "Pending" status over 15s seen from the DevTools in the Edge browser.

Expected behavior: [What you expected to happen]
The fetch request should be timeout after 15s

Actual behavior: [What actually happened]
The fetch request is still Pending

Additional Context

SDK Version - [SDK version you are using] 2.2.1

• Node (Check, if using Node version of SDK)

Node Version - [The version of Node you are using] node 14

• Browser (Check, if using Browser version of SDK)

Browser Name - [The name of Browser that you are using for SDK] MS Edge

Version - [The version of the browser you are using]
2.2.1

Thanks.
AB#9002

[nikithauc]

@kafka-yu Thank you for the feedback!

FetchOptions gets the timeout option by extending an interface has some options that are in node-fetch

export interface NodeFetchInit {
	follow?: number;
	timeout?: number;
	compress?: boolean;
	size?: number;
	agent?: any;
}
interface FetchOptions extends RequestInit, NodeFetchInit {}

timeout: 0 // req/res timeout in ms, it resets on redirect. 0 to disable (OS limit applies). Signal is recommended instead.
https://www.npmjs.com/package/node-fetch

Can you please try using an AbortController to cancel the request on timeout?
Example -

const controller = new AbortController();

const timeout = setTimeout(() => {
	controller.abort();
}, 150);

const fetchOptions: FetchOptions = {
	signal: controller.signal;
}

const client = Client.initWithMiddleware({
  fetchOptions, // Pass the FetchOptions value where the AbortController.signal is set
  authProvider,
  ...
});