Having issues to connect to Google Drive API

Question

I am trying to connect to Google Drive API but I keep getting the return "Uncaught TypeError: Cannot read property 'init' of undefined at initClient."

I am not sure what to do to fix this.

Here is the code I was running:

       `enter code here`var CLIENT_ID = ' ';
        var API_KEY = ' ';          
        // Array of API discovery doc URLs for APIs used by the quickstart
        var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];
  
        // Authorization scopes required by the API; multiple scopes can be
        // included, separated by spaces.
        var SCOPES = 'https://www.googleapis.com/auth/drive.readonly';
  
        
  
        var FILES = {};
  
        function handleClientLoad() {
            setTimeout(function(){ gapi.load('client', initClient()); }, 3000);
        }
  
        function initClient() {
            gapi.client.init({
                apiKey: API_KEY,
                clientId: CLIENT_ID,
                discoveryDocs: DISCOVERY_DOCS,
                scope: SCOPES
            }).then(function () {
                // Listen for sign-in state changes.
                gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
    
                // Handle the initial sign-in state.
                updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
                authorizeButton.onclick = handleAuthClick();
                signoutButton.onclick = handleSignoutClick();
            }, function(error) {
                console.log(JSON.stringify(error, null, 2));
            });
            
            return gapi;
        }

I changed it as suggested but it's still not working. I am not sure what I did wrong! Here is the updated code:

`enter code here`var CLIENT_ID = ' ';
        var API_KEY = ' ';          
        // Array of API discovery doc URLs for APIs used by the quickstart
        var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"];
  
        // Authorization scopes required by the API; multiple scopes can be
        // included, separated by spaces.
        var SCOPES = 'https://www.googleapis.com/auth/drive.readonly';
  
        
  
        var FILES = {};
  
        function handleClientLoad() {
            setTimeout(function(){ gapi.load('client:auth2', initClient); }, 3000);
        }
  
        function initClient() {
            gapi.client.init({
                apiKey: API_KEY,
                clientId: CLIENT_ID,
                discoveryDocs: DISCOVERY_DOCS,
                scope: SCOPES
            }).then(function () {
                // Listen for sign-in state changes.
                gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
    
                // Handle the initial sign-in state.
                updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
                authorizeButton.onclick = handleAuthClick();
                signoutButton.onclick = handleSignoutClick();
            }, function(error) {
                console.log(JSON.stringify(error, null, 2));
            });
            
            return gapi;
        }

Any other suggestions? Thank you!

Answer 1

gapi.load takes a callback function, but you're passing it the output of initClient().

Secondly, you will need to load the OAuth2 library (auth2).

See reference docs

Change this:

function handleClientLoad() {
  setTimeout(function() { gapi.load('client', initClient()); }, 3000);

To this:

function handleClientLoad() {
  setTimeout(function() { gapi.load('client:auth2', initClient); }, 3000);

PS. If you put your code in the text of your question, rather than a screenshot, it's a lot easier for others to cut-paste an answer.