CODEWITHSUNDEEP
javascriptreactjsgoogle-apigoogle-api-js-client
Darren
Darren

Reputation: 153

How to use gapi in react

I want to use gapi to access people api resources from google, I tried many ways to do the job, but I still cannot get any response. It has not error, no warning. Here is my code.

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

    script.onload = () => {
      window.gapi.load('client', () => {
        window.gapi.client.setApiKey(types.API_KEY)
        window.gapi.client.setClientId(types.CLIENT_ID)
        window.gapi.client.setDiscoveryDocs(types.DISCOVERY_DOCS)
        window.gapi.client.setScope(types.SCOPE)
        window.gapi.client.load('client:auth2', 'v3', () => {
          console.log("gapi is ready")
          this.setState({ gapiReady: true });
        });
      });
    };

    document.body.appendChild(script);
  }

  componentDidMount() {
    this.loadYoutubeApi();
  }

Can anyone tell me why I cant even get the console log info, is it actually working?

Update:

Once I commented these codes out

window.gapi.client.setClientId(types.CLIENT_ID)
window.gapi.client.setDiscoveryDocs(types.DISCOVERY_DOCS)
window.gapi.client.setScope

I can get my console info, is it something to do with those methods?

Update:

I can get gapi object and console.log(window.gapi) to see its detail.

Upvotes: 11

Views: 28323

Answers (3)

Alexis Poveda
Alexis Poveda

Reputation: 109

I made a custom Hook for this!

import { useEffect } from 'react';

const useGoogle = () => {

    useEffect(() => {

        const SCOPE = "TODO: your scope here";
        const handleClientLoad = () => window.gapi.load('client:auth2', initClient);
    
        const initClient = () => {
            const discoveryUrl = "TODO: your discoveryUrl here";
            window.gapi.client.init({
                'clientId': "TODO: your client id here",
                'discoveryDocs': [discoveryUrl],
                'scope': SCOPE
            });
            console.log("Google loaded");
        };

        const script = document.createElement('script');

        script.src = "https://apis.google.com/js/api.js";
        script.async = true;
        script.defer = true;
        script.onload = handleClientLoad;

        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };

    }, []);
};

export default useGoogle;

Upvotes: 11

Lucas Andrade
Lucas Andrade

Reputation: 4600

I had a lot a problems trying to add the gapi at my react project. All the packages that I found were outdated, so I created a new one.

gapi-script allow you to add gapi with:

import { gapi } from 'gapi-script'

Upvotes: 20

David Kamer
David Kamer

Reputation: 2885

Assuming you are using create-react-app and you have webpack configured with a public HTML folder, than that is where you will need to place your script tag.

You may not see your public folder in certain text editor project trees, but you will see it in your OS file browser. Simply go to the public folder and edit index.html with the line:

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

right above the closing </head> tag. You are doing this indirectly with your current code anyway. You can remove:

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

and the onload call, placing all of your api object calls (with window as the base object) in your componentDidMount() method. You don't have to worry about it being loaded as your component can only mount after everything is loaded.

Also, don't worry about it slowing anything down or loading the script before you need it. When you run npm run build before production you will condense everything into a few files anyway.

EDIT:

You should change your onload call to addEventListener('load', callback);

Upvotes: 11

Related Questions