Google Calendar Api React 'gapi not found'

Question

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.

score 3 · Accepted Answer · answered Jun 01 '17 at 22:47

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

yes, this is how I eventually solved it too. Good to have an answer up here for others too — Rbar, Jun 01 '17 at 22:52

score 0 · Answer 2 · edited May 23 '17 at 12:02

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

score 0 · Answer 3 · answered Feb 11 '19 at 14:25

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.

Google Calendar Api React 'gapi not found'

3 Answers3