Как использовать гаппи в реакции

Question

Я хочу использовать gapi для доступа к ресурсам API пользователей из Google, я пробовал много способов сделать эту работу, но до сих пор не могу получить ответ. Это не ошибка, нет предупреждения. Вот мой код

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();
  }

Может кто-нибудь сказать мне, почему я не могу даже получить информацию журнала консоли, это на самом деле работает?

Обновить:

Однажды я закомментировал эти коды

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

Я могу получить информацию о своей консоли, это как-то связано с этими методами?

Обновить:

Я могу получить гапфи объект и console.log(window.gapi) чтобы увидеть его детали.

Answer 1

Предполагая, что вы используете create-react-app и у тебя есть webpack настроен с общедоступной папкой HTML, тогда вам нужно будет разместить тег сценария.

Вы можете не видеть вашу общую папку в определенных деревьях проекта текстового редактора, но вы увидите ее в браузере файлов вашей ОС. Просто перейдите в общую папку и отредактируйте файл index.html со строкой:

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

прямо над закрытием </head> тег. Вы делаете это косвенно с вашим текущим кодом в любом случае. Вы можете удалить:

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

и onload вызов, поместив все ваши вызовы объекта API (с окном в качестве базового объекта) в вашем componentDidMount() метод. Вам не нужно беспокоиться о его загрузке, так как ваш компонент может монтироваться только после загрузки всего.

Кроме того, не беспокойтесь, что это замедлит работу или загрузит скрипт до того, как он вам понадобится. Когда ты бежишь npm run build перед производством вы все равно будете сгущать все в несколько файлов.

РЕДАКТИРОВАТЬ:

Вы должны изменить свой onload позвонить addEventListener('load', callback);

Answer 2

У меня было много проблем с попыткой добавить пробел в мой проект реакции. Все найденные мной пакеты устарели, поэтому я создал новый.

gapi-скрипт позволяет добавлять gapi с помощью:

import { gapi } from 'gapi-script'

Answer 3

Я сделал специальный крюк для этого!

      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;