Consume aadHttpClientFactory.getClient response code 200 but no data fetched

[ozie02]

Category

• Question
• Typo
• Bug
• Additional article idea

Expected or Desired Behavior

I have created an extension that consists of child components and a webpart to make a call to an Azure function that has authentication enabled which would return data in the response after successfully authenticating.

Observed Behavior

The webpart returns data after successfully authenticating but not for the extension even though they are consuming the same API. Once you click the button the extension attempts to fetch data from the API after authenticating but it seems the response comes back blank even though the response code is 200.

I am passing this.context from the Root component which extends BaseApplicationCustomizer to the child component (Root --> ReactHeader --> ReactPanel --> ReactOrders.ts) which requires to make authentication and the API call.

On the other hand, for some reason after upgrading the extension to SPFX 1.9.1, the generated files are showing in the source folders.

I have added more details (steps + Screenshots) in each example.

Steps to Reproduce

The first example is a webpart consuming my Azure Function and rendering data accordingly (this is to ensure the web service configuration is healthy).

In the second example, I have an Extension attempting to use the same web service via child component that fails to fetch data but successfully authenticated.

Webpart Source Code + Steps: https://github.com/ozie02/Learning/tree/master/Webpart/contoso-api

Extension Source Code + Steps: https://github.com/ozie02/Learning/tree/master/Extensions/contoso-api-extension

Thanks for your contribution! Sharing is caring.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[andrewconnell]

Do the two work if they are not on the page at the same time? Asking because there's a known issue (#4892) where a race condition is present... a fix is being worked on.

[ozie02]

That a good point, I removed the webpart from the page and had the extension all alone but unfortunately, I still had the same issue.

[andrewconnell]

What exactly is the error you're receiving? Use the browser's dev tools & look at the network tab. Find the request that is fetching the data / access token. Look at the raw response... there has to be a response that's got more detail than "failed to fetch data". :)

Also... what is the code doing. Please share the code snippet from the extension where the error is occurring.

[ozie02]

That's the problem, I don't see any errors in browser console or the Network tab :)

I have uploaded the complete code on github under as well https://github.com/ozie02/Learning/tree/master/Extensions/contoso-api-extension

Code Snippet

public componentDidMount() {
    this.authenticateUser().then( () =>{
      this.ordersClient
      .get('https://func1.mintranet.net/api/HttpTrigger2?id=12', AadHttpClient.configurations.v1)
      .then((res: HttpClientResponse): void => {
        this.setState({myOrders: res.json()});
      });
    });
  }
  
  protected authenticateUser(): Promise<void> {
    return new Promise<void>((resolve: () => void, reject: (error: any) => void): void => {
      this.props.context.aadHttpClientFactory
        .getClient('https://func1.mintranet.net')
        .then((client: AadHttpClient): void => {
          this.ordersClient = client;
          resolve();
        }, err => reject(err));
    });
  }

Screenshot below
Console Tab

Network Tab