Javascript 如何从react组件发出google analytics reporting API请求？

我正在尝试使用React/Gatsby和Google analytics Reporting API v4构建一个分析仪表板。我已经将脚本包含在我的布局组件中

我知道它正在加载到页面上，因为在browser developer tools控制台中，我可以访问

window.gapi

，并且google登录按钮显示正确。但是在我的页面组件中，我有一个useEffect钩子。当组件装载时，我想使用

window.gapi.client.request（…）

发出请求

我尝试将请求包装在以下内容中：

if（typeof window！==undefined）{…}

根据

Layout.js

      <Helmet>
        <meta
          name="google-signin-client_id"
          content="MYCLIENTID"
        />
        <meta
          name="google-signin-scope"
          content="https://www.googleapis.com/auth/analytics.readonly"
        />
        <script src="https://apis.google.com/js/client:platform.js"></script>
      </Helmet>

---

我希望可以从useEffect钩子访问window.gapi，但我得到

TypeError:window.gapi未定义

您可以尝试使用

setInterval

函数查看何时加载

window.gapi

，然后在加载后将其清除：

useffect（window.interval=setInterval（waitForAPI，1000），[]）
waitForAPI（）{
if（window.gapi.client.request！==未定义）{
querySuccessfulSubmissions（）；
clearInterval（window.interval）；
}
}

  useEffect(querySuccessfulSubmissions, [])

  function querySuccessfulSubmissions() {
    if (typeof window !== `undefined`) {
      window.gapi.client
        .request({
          path: "/v4/reports:batchGet",
          root: "https://analyticsreporting.googleapis.com/",
          method: "POST",
          body: {
            reportRequests: [
              {
                viewId: "MYVIEWID",
                samplingLevel: "LARGE",
                dateRanges: [
                  {
                    startDate: "365daysAgo",
                    endDate: "yesterday",
                  },
                ],
                metrics: [
                  {
                    expression: `ga:goal1Completions`,
                    alias: "",
                  },
                ],
                dimensions: [
                  {
                    name: "ga:yearMonth",
                  },
                ],
              },
            ],
          },
        })
        .then(response => console.log('success'))
    }
  }