GAPIが定義されていません - ReactJS - Googleシート

Question

私のWebアプリケーションに含めるためにGoogle Sheets APIを使用しようとしていますが、gapiライブラリが定義されていないことを指定するエラーを受け取り続けます。私は、ComponentDidMountライフサイクルメソッドを使用してサーバーへの要求を遅らせ、そのメソッドでタイムアウトを使用してみましたが、同じエラーを受け取り続けます。アプリケーションで使用するために、どうやってgapiライブラリを定義できますか？

import React from 'react'; 
var CLIENT_ID = ''; 
var SCOPES = ["https://www.googleapis.com/auth/spreadsheets.readonly"]; 


export default class MyNavbar extends React.Component { 

    constructor(props) { 
    super(props); 
    } 

    componentDidMount(){ 
    this.checkAuth(); 

    } 

     /** 
     * Check if current user has authorized this application. 
     */  
    checkAuth(){ 
     gapi.auth.authorize(
      { 
      'client_id': CLIENT_ID, 
      'scope': SCOPES.join(' '), 
      'immediate': true 
      }, this.handleAuthResult()); 
     } 

     /** 
     * Handle response from authorization server. 
     * 
     * @param {Object} authResult Authorization result. 
     */ 
     handleAuthResult(authResult) { 
     var authorizeDiv = document.getElementById('authorize-div'); 
     if (authResult && !authResult.error) { 
      // Hide auth UI, then load client library. 
      authorizeDiv.style.display = 'none'; 
      loadSheetsApi(); 
     } else { 
      // Show auth UI, allowing the user to initiate authorization by 
      // clicking authorize button. 
      authorizeDiv.style.display = 'inline'; 
     } 
     } 

     /** 
     * Initiate auth flow in response to user clicking authorize button. 
     * 
     * @param {Event} event Button click event. 
     */ 
    handleAuthClick(event) { 
     gapi.auth.authorize(
      {client_id: CLIENT_ID, scope: SCOPES, immediate: false}, 
      handleAuthResult); 
     return false; 
     } 

     /** 
     * Load Sheets API client library. 
     */ 
    loadSheetsApi() { 
     var discoveryUrl = 
      'https://sheets.googleapis.com/$discovery/rest?version=v4'; 
     gapi.client.load(discoveryUrl).then(listMajors); 
     } 

     /** 
     * Print the names and majors of students in a sample spreadsheet: 
     * https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit 
     */ 
     listMajors() { 
     gapi.client.sheets.spreadsheets.values.get({ 
      spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms', 
      range: 'Class Data!A2:E', 
     }).then(function(response) { 
      var range = response.result; 
      if (range.values.length > 0) { 
      appendPre('Name, Major:'); 
      for (i = 0; i < range.values.length; i++) { 
       var row = range.values[i]; 
       // Print columns A and E, which correspond to indices 0 and 4. 
       appendPre(row[0] + ', ' + row[4]); 
      } 
      } else { 
      appendPre('No data found.'); 
      } 
     }, function(response) { 
      appendPre('Error: ' + response.result.error.message); 
     }); 
     } 

     /** 
     * Append a pre element to the body containing the given message 
     * as its text node. 
     * 
     * @param {string} message Text to be placed in pre element. 
     */ 
     appendPre(message) { 
     var pre = document.getElementById('output'); 
     var textContent = document.createTextNode(message + '\n'); 
     pre.appendChild(textContent); 
     } 


    render(){ 
     return (
     <div> 
      <h1>Hello World My Name Is Justin 2</h1> 
      <div id="authorize-div"></div> 
      <pre id="output"></pre> 
     </div> 
    ); 
    } 
} 

Answer 1

あなたは反応-非同期ローダーと非同期（async）gapi jsのスクリプトを読み込むことができ、より良いのindex.htmlファイルにbundle.js前gapiライブラリをロードする必要がある、または。 は、ここではそれを行うことができます方法は次のとおりです。

import React, { Component, PropTypes } from 'react'; 
import asyncLoad from 'react-async-loader'; // for loading script tag asyncly 

// For making gapi object passed as props to our component 
const mapScriptToProps = state => ({ 
    gapi: { 
    globalPath: 'gapi', 
    url: 'https://your-gapi-url' 
    } 
}); 
// decorate our component 
@asyncLoad(mapScriptToProps) 
class yourComponent extends Component { 
    componentDidMount() { 
     // Check is gapi loaded? 
     if (this.props.gapi !== null) { 
     this.checkAuth(); 
     } 
    } 

    componentWillReceiveProps({ gapi }) { 
     if (gapi!== null) { 
     this.checkAuth(); 
     } 
    } 

    checkAuth =() => { 
     // Better check with window and make it available in component 
     this.gapi = window.gapi; 
     this.gapi.auth.authorize({ 
     'client_id': CLIENT_ID, 
     'scope': SCOPES.join(' '), 
     'immediate': true 
     }, this.handleAuthResult); 
    } 

    handleAuthResult = (authData) => { 
     // Your auth loagic... 
    } 

    render() { 
     return (<div> 
        { this.props.gapi && 
        <YourSpreadsheetOrWhatever data={ this.getData() } /> 
        } 
      </div>) 
    } 
} 

は、これであなたのコードを交換してみてください、それが動作するかどうか確認してください。

Answer 2

ここでこれを試してください。

import React from 'react'; 
import asyncLoad from 'react-async-loader'; // for loading script tag asyncly `npm i --save react-async-loader` 

const CLIENT_ID = ''; 
const SCOPES = ["https://www.googleapis.com/auth/spreadsheets.readonly"]; 

// For making gapi object passed as props to our component 
const mapScriptToProps = state => ({ 
    // gapi will be this.props.gapi 
    gapi: { 
     globalPath: 'gapi', 
     url: 'https://your-gapi-url' 
    } 
}); 

@asyncLoad(mapScriptToProps) 
class MyNavbar extends React.Component { 

    constructor(props) { 
    super(props); 
    this.gapi = null; 
    // You need to bind methods to this class's object context. (i.e this)! 
    this.checkAuth = this.checkAuth.bind(this); 
    this.handleAuthResult = this.authResult.bind(this); 
    this.handleAuthClick = this.handleAuthClick.bind(this); 
    this.loadSheetsApi = this.loadSheetsApi.bind(this); 
    this.listMajors = this.listMajors.bind(this); 
    } 

    componentDidMount() { 
    // Check is gapi loaded? 
    if (this.props.gapi !== null) { 
     this.checkAuth(); 
    } 
    } 

    componentWillReceiveProps({ gapi }) { 
    if (gapi!== null) { 
     this.checkAuth(); 
    } 
    } 

    /** 
    * Check if current user has authorized this application. 
    */ 
    checkAuth() { 

    // this will give you an error of gapi is not defined because there is no 
    // reference of gapi found globally you cannot access global object which are 
    // not predefined in javascript(in this case its window.gapi). 
    // properties added by Programmer cannot be accessed directly(if it's not in the same file as well as the same scope!) in commonjs modules. Because they 
    // don't' run in a global scope. Any variable in another module which is not 
    // exported, will not be available to other modules. 

    this.gapi = window.gapi; // you can do like this. Now you can access gapi in all methods if this class. 
    this 
     .gapi 
     .auth 
     .authorize({ 
      'client_id': CLIENT_ID, 
      'scope': SCOPES.join(' '), 
      'immediate': true 
     }, this.handleAuthResult()); 
    } 

    /** 
    * Handle response from authorization server. 
    * 
    * @param {Object} authResult Authorization result. 
    */ 
    handleAuthResult(authResult) { 
    var authorizeDiv = document.getElementById('authorize-div'); 
    if (authResult && !authResult.error) { 
     // Hide auth UI, then load client library. 
     authorizeDiv.style.display = 'none'; 
     loadSheetsApi(); 
    } else { 
     // Show auth UI, allowing the user to initiate authorization by clicking 
     // authorize button. 
     authorizeDiv.style.display = 'inline'; 
    } 
    } 

    /** 
    * Initiate auth flow in response to user clicking authorize button. 
    * 
    * @param {Event} event Button click event. 
    */ 
    handleAuthClick(event) { 
    // gapi.auth.authorize( here also gapi is not defined 
    this 
     .gapi 
     .auth 
     .authorize({ 
      client_id: CLIENT_ID, 
      scope: SCOPES, 
      immediate: false 
     }, handleAuthResult); 
    return false; 
    } 

    /** 
    * Load Sheets API client library. 
    */ 
    loadSheetsApi() { 
    var discoveryUrl = 'https://sheets.googleapis.com/$discovery/rest?version=v4'; 
    // also will give your error 
    // for gapi being not defined. 
    // gapi.client.load(discoveryUrl).then(listMajors); 
    this 
     .gapi 
     .client 
     .load(discoveryUrl) 
     .then(listMajors); 
    } 

    /** 
    * Print the names and majors of students in a sample spreadsheet: 
    * https://docs.google.com/spreadsheets/d/1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms/edit 
    */ 
    listMajors() { 
    this.gapi 
     .client 
     .sheets 
     .spreadsheets 
     .values 
     .get({spreadsheetId: '1BxiMVs0XRA5nFMdKvBdBZjgmUUqptlbs74OgvE2upms', range: 'Class Data!A2:E'}) 
     .then(function (response) { 
      var range = response.result; 
      if (range.values.length > 0) { 
       appendPre('Name, Major:'); 
       for (i = 0; i < range.values.length; i++) { 
        var row = range.values[i]; 
        // Print columns A and E, which correspond to indices 0 and 4. 
        appendPre(row[0] + ', ' + row[4]); 
       } 
      } else { 
       appendPre('No data found.'); 
      } 
     }, function (response) { 
      appendPre('Error: ' + response.result.error.message); 
     }); 
    } 

/** 
    * Append a pre element to the body containing the given message 
    * as its text node. 
    * 
    * @param {string} message Text to be placed in pre element. 
    */ 
    appendPre(message) { 
    // as you can see. You are accessing window.document as document. 
    // its fine because its defined in javascript (implicitly), 
    // not explicitly by programmer(here you!). 
    var pre = document.getElementById('output'); 
    var textContent = document.createTextNode(message + '\n'); 
    pre.appendChild(textContent); 
    } 

    render() { 
    return (
     <div> 
      <h1>Hello World My Name Is Justin 2</h1> 
      <div id="authorize-div"></div> 
      <pre id="output"></pre> 
     </div> 
    ); 
    } 
} 

export default MyNavbar; 

Answer 3

私はこのプロジェクトが見つかりましたhttps://github.com/rlancer/gapi-starterこれは役に立ちます。

Googleのログイン& API + ReactJS +流れ+ WebPACKのスターターキット

のGoogleのAPIのは素晴らしいですが、Javascriptのプログラミングのモジュールパートナーが普及するようになった前に、彼らが設計されました。この初心者は、Googleログインとライブラリの読み込みを手渡すことを修正します。

コードを取得してください！

gitのクローンhttps://github.com/rlancer/gapi-starter.git CD GAPIスターター NPMインストール