CODEWITHSUNDEEP
javascriptreactjsgoogle-api
Rbar
Rbar

Reputation: 3928

Google Calendar Api React 'gapi not found'

I am new to google calendar api and react so I'm sure there is something small I'm missing here. I cannot import the necessary google api libraries to call "gapi." I have try to import them like I would do from local libraries but still get the error "gapi is not defined". I need to use the "gapi" in my component so I don't think I can call and append the script to the body using the componentDidLoad.

  // Libraries
    import React, {Component} from 'react';

    //...import other libraries

    //import google libraries in order to use "gapi" and call "checkAuth"
   import 'https://ajax.googleapis.com/ajax/libs/angularjs/1.2.32/angular.min.js';
   import 'https://apis.google.com/js/client.js?onload=checkAuth';';


    var CLIENT_ID = 'MY_CLIENT_ID_IS_HERE';

    var SCOPES = ["https://www.googleapis.com/auth/calendar"];

    class NewCalendar extends Component {
      constructor(props) {
        super(props);

        this.checkAuth = this.checkAuth.bind(this);
      }

        checkAuth() {
          console.log('checkAuth running...')
          gapi.auth.authorize(   //ISSUE

^issue with the last line

            {
              'client_id': CLIENT_ID,
              'scope': SCOPES.join(' '),
              'immediate': true
            }, this.handleAuthResult);
        }
    ...
    }

    export default NewCalendar;

Does anyone know how to resolve this issue?

Thanks a million.

Upvotes: 1

Views: 2297

Answers (3)

Daniel
Daniel

Reputation: 15453

Place your https://apis.google.com/js/api.js inside a script tag inside of your index.html file, below your meta tag. That should be it.

Then in the browser, refresh the page and in your JavaScript console, you should be able to write out gapi and you should be able to see an object like so: {load: f}.

That object would be the Google API that is available on the window scope of your browser.

Upvotes: 0

dan
dan

Reputation: 54

I struggled with similiar issues. Thats how I solved it. In this case you Need to put the window. scope infront. But hopfeully you found a solution until now ;) Want to share this anyway, maybe it's not the best solution but works for me for the Moment.

componentDidMount() {
    this.loadApi();
}

loadApi() {
    const script = document.createElement("script");
    script.src = "https://apis.google.com/js/api.js";
    document.body.appendChild(script);

    script.onload = () => { 
        window.gapi.load('client:auth2', this.checkAuth.bind(this));
    }
}

bye

Upvotes: 3

Thib-o
Thib-o

Reputation: 100

I am pretty new to React and JSX but it seems that you might have ideas to answer your problems here:

It seems that import only works for local files, and that you will need to to async load of the gapi (https://jsx.github.io/doc/importref.html)

Hope that helps

Upvotes: 0

Related Questions