Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using Google API (gapi) with React
/* 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;
@zhabinsky

This comment has been minimized.

Copy link

@zhabinsky zhabinsky commented Feb 4, 2018

Isnt working for me:

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

@Polymer21

This comment has been minimized.

Copy link

@Polymer21 Polymer21 commented Feb 6, 2018

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

@indapublic

This comment has been minimized.

Copy link

@indapublic indapublic commented Feb 15, 2018

Use window.gapi instead of gapi

@ZackKnopp

This comment has been minimized.

Copy link

@ZackKnopp ZackKnopp commented Apr 5, 2018

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);
  }
@MarchosiasM

This comment has been minimized.

Copy link

@MarchosiasM MarchosiasM commented Jul 25, 2018

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

@StuffieStephie

This comment has been minimized.

Copy link

@StuffieStephie StuffieStephie commented Oct 18, 2018

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

@mharrisweb

This comment has been minimized.

Copy link

@mharrisweb mharrisweb commented Nov 3, 2018

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

@Download

This comment has been minimized.

Copy link

@Download Download commented Nov 6, 2018

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.

@farindra

This comment has been minimized.

Copy link

@farindra farindra commented Nov 22, 2018

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

@ahmed-raza12

This comment has been minimized.

Copy link

@ahmed-raza12 ahmed-raza12 commented Nov 26, 2018

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

@Max-im

This comment has been minimized.

Copy link

@Max-im Max-im commented Feb 18, 2019

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.

@bradeac

This comment has been minimized.

Copy link

@bradeac bradeac commented Jul 2, 2019

@ZackKnopp nice solution

@McFarJ

This comment has been minimized.

Copy link

@McFarJ McFarJ commented Jul 19, 2019

@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?

@bradeac

This comment has been minimized.

Copy link

@bradeac bradeac commented Jul 19, 2019

@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 ?

@McFarJ

This comment has been minimized.

Copy link

@McFarJ McFarJ commented Jul 19, 2019

@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

@bradeac

This comment has been minimized.

Copy link

@bradeac bradeac commented Jul 19, 2019

@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.

@mharrisweb

This comment has been minimized.

Copy link

@mharrisweb mharrisweb commented Jul 20, 2019

@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.

@ahmed-raza12

This comment has been minimized.

Copy link

@ahmed-raza12 ahmed-raza12 commented Jul 24, 2019

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

@szhou42

This comment has been minimized.

Copy link

@szhou42 szhou42 commented Nov 14, 2019

@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'

@Alamut98

This comment has been minimized.

Copy link

@Alamut98 Alamut98 commented Nov 25, 2019

@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 .

@mharrisweb

This comment has been minimized.

Copy link

@mharrisweb mharrisweb commented Nov 25, 2019

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

@dsyorkd

This comment has been minimized.

Copy link

@dsyorkd dsyorkd commented May 6, 2020

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

@simranbirla

This comment has been minimized.

Copy link

@simranbirla simranbirla commented Aug 30, 2020

<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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment