Using Google API (gapi) with React

App.js

/* global gapi */

const API_KEY = 'YOURAPIKEYHERE';

import React, { Component } from 'react';

class App extends Component {

  loadYoutubeApi() {
    const script = document.createElement("script");
    script.src = "https://apis.google.com/js/client.js";

    script.onload = () => {
      gapi.load('client', () => {
        gapi.client.setApiKey(API_KEY);
        gapi.client.load('youtube', 'v3', () => {
          this.setState({ gapiReady: true });
        });
      });
    };

    document.body.appendChild(script);
  }

  componentDidMount() {
    this.loadYoutubeApi();
  }

  render() {
    if (this.state.gapiReady) {
     return (
       <h1>GAPI is loaded and ready to use.</h1>
     );
  };
}

export default App;

Isnt working for me:

index.js:2178 ./src/app/js/components/App.js
'gapi' is not defined no-undef

I am having the same problem as @zhabinsky is having.

Use window.gapi instead of gapi

I was having the same problem. gapi was undefined, as well as window.gapi in my onload function.

Apparently it isn't available immediately when you load it through a script tag by appending the element to the document, even though you use onload.

We can use the gapi_processed attribute on our script tag to know when it's loaded and gapi is accessible. Google appends gapi_processed=true to our script tag when gapi becomes available.

See here for more information: https://stackoverflow.com/questions/19892662/what-does-gapi-processed-mean/33591421

My solution was to create a function called loadClientWhenGapiReady:

loadClientWhenGapiReady = (script) => {
    console.log('Trying To Load Client!');
    console.log(script)
    if(script.getAttribute('gapi_processed')){
      console.log('Client is ready! Now you can access gapi. :)');
      if(window.location.hostname==='localhost'){
        gapi.client.load("http://localhost:8080/_ah/api/discovery/v1/apis/metafields/v1/rest")
        .then((response) => {
          console.log("Connected to metafields API locally.");
          },
          function (err) {
            console.log("Error connecting to metafields API locally.");
          }
        );
      }
    }
    else{
      console.log('Client wasn\'t ready, trying again in 100ms');
      setTimeout(() => {this.loadClientWhenGapiReady(script)}, 100);
    }
  }

It's called from within my initGapi function:

initGapi = () => {
    console.log('Initializing GAPI...');
    console.log('Creating the google script tag...');

    const script = document.createElement("script");
    script.onload = () => {
      console.log('Loaded script, now loading our api...')
      // Gapi isn't available immediately so we have to wait until it is to use gapi.
      this.loadClientWhenGapiReady(script);
    };
    script.src = "https://apis.google.com/js/client.js";
    
    document.body.appendChild(script);
  }

@ZackKnopp Thank you for this, this was very helpful and appears to have solved the issue for me.

In my case I had to change calls to gapi to window.gapi to get it to work.

Does anyone know how I can get the gapi to work with react-native?

const API_KEY = 'YOURAPIKEYHERE';

Publish this to the web? I do not think it is secure.

Only use API key from the server. From the client side you need OAuth implicit grant flow.

const API_KEY = 'YOURAPIKEYHERE';

Publish this to the web? I do not think it is secure.

Only use API key from the server. From the client side you need OAuth implicit grant flow.

100% Agree

Does anyone know how I can get the gapi to work with react-native?

did you find a way to do with react-native if yes plz let me know

const API_KEY = 'YOURAPIKEYHERE';

Publish this to the web? I do not think it is secure.

Only use API key from the server. From the client side you need OAuth implicit grant flow.

I didnt get, why the implementation is not secure? You can define local variable on you server and receive you key from the variable.

Subsequently you can create config file to store you key and depending on node_env value use key from different sources on prod and dev enviroments.

@ZackKnopp nice solution

@mharrisweb

Does anyone know how I can get the gapi to work with react-native?

@ahmed-raza12

did you find a way to do with react-native if yes plz let me know

Did either of you figure it out?

@mharrisweb

Does anyone know how I can get the gapi to work with react-native?

@ahmed-raza12

did you find a way to do with react-native if yes plz let me know

Did either of you figure it out?

Are there any specific problems or incompatibilities between gapi and React Native or you're just looking for an example of how to use gapi ?

@bradeac all the documentation I've found for gapi uses <script> tags or refers to a document object, neither of which you can do in React Native

@McFarJ I see. Unfortunately, I cannot help you in this case, no experience with React Native from my side. If it worked as it works with React (web), I could've given some examples.

@bradeac No I haven't. I'm just pulling data from the url like this:

wix/react-native-calendars#416 (comment)

I am still very interested in using gapi if there is ever a RN solution.

@McFarJ I didn't get the solution for this but I think you should read documentation of google api for android.

@ZackKnopp One thing I'd like to add to ZackKnopp's solution:
Some google api doesn't add the gapi_processed flag, in this case we could simple check typeof window.gapi !== 'undefined'

@mharrisweb

Does anyone know how I can get the gapi to work with react-native?

@ahmed-raza12

did you find a way to do with react-native if yes plz let me know

Did either of you figure it out?

Are there any specific problems or incompatibilities between gapi and React Native or you're just looking for an example of how to use gapi ?
i want send email through gmail api in react native. In that i got same error cant fid variable 'gapi'.Give me suggestion .

@Alamut98 no I am still looking for an example using RN. The docs are very terse.

Would help if there was a closure at the bottom closing the class.

<script src="https://apis.google.com/js/client.js"></script>

add this script tag in index.html
then type "gapi" in console of your tab in which your project is running to check if gapi is defined