Accessing Graph Api from Team Toolkit personal tab

Question

I'm trying to access the graph API from a personal tab setup using Microsoft teams tool kit.
I have created an Azure app and given the appropriate permissions.
I'm trying to read the current users details. All i get is the generic error- No response from the server.
Please let me know what additional steps i need to do to fix this.

import { graph } from '@pnp/graph/presets/all'  ;  
import { AdalFetchClient } from "@pnp/nodejs";  
graph.setup({  
  graph: {  
      fetchClientFactory: () => {  
          return new AdalFetchClient("***********-f3bf-4315-******", "d36b0cfb-368c-4573-b488-940b4de29514", "Password");  
      },  
  },  
});  
private async getUserDetails()  
  {  
      await graph.me().then(u=>{  
          this.setState({  
            UserEmail:u['mail']!,  
            UserName:u['displayName']!    
          })  
          console.log(JSON.stringify(u));  
      }).catch((err) => {    
          console.log("Graph API Error "+err);  
        });  
         
  }  

Answer 1

Apologies for the late reply..From the console log, all i could get is "No response from the server."