title: How to use Google API Client Library for JavaScript (gapi) with async/await?
body: <p>I have a Vue 3 / Quasar / TypeScript app that is using the <a href="https://github.com/google/google-api-javascript-client" rel="nofollow noreferrer">Google API Client Library for JavaScript</a> (also known as gapi).</p>
  <p>All the official code examples use a convoluted mess of callbacks. Instead, I want to implement it using async/await.</p>
  <p>I found <a href="https://advancedweb.hu/how-to-use-async-functions-with-gapi-the-google-drive-client-and-the-file-picker/#load-the-gapi" rel="nofollow noreferrer">this tutorial</a> which has given me a head start. But I'm struggling to implement it.</p>
  <p>As per the tutorial I put this in the <code>&lt;head&gt;</code> of my <code>index.template.html</code>:</p>
  <pre class="lang-HTML prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;script
        async
        defer
        src=&quot;https://apis.google.com/js/api.js&quot;
        onload=&quot;window.gapiLoaded()&quot;
        onerror=&quot;window.gapiLoadError(event)&quot;
      &gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;q-app&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I then combine other parts of the tutorial into my own <code>loadGooglePeopleApi</code> function. This is placed inside a Vue composable, and called within a single file component (SFC):</p>
  <pre><code>export const loadGooglePeopleApi = async (accessToken: string) =&gt; {
    // Wait for the defered gapi script tag to finish loading
    await new Promise((res, rej) =&gt; {
      window.gapiLoaded = res;
      window.gapiLoadError = rej;
    });
    // Load Google API Client Library (aka gapi)
    await new Promise((res, rej) =&gt; {
      gapi.load('client', { callback: res, onerror: rej });
    });
    // Load an interface for the Google People API
    await gapi.client.load('https://people.googleapis.com/$discovery/rest');
    // Set the access_token
    gapi.client.setToken({ access_token: accessToken });
  };
  </code></pre>
  <p>Unfortunatley it produces some TypeScript errors because those types do not exist on <code>window</code>:</p>
  <pre><code>Property 'gapiLoaded' does not exist on type 'Window &amp; typeof globalThis'. ts(2339)
  Property 'gapiLoadError' does not exist on type 'Window &amp; typeof globalThis'. ts(2339)
  </code></pre>
  <p>So I added the types like so:</p>
  <pre><code>declare global {
    interface Window {
      gapiLoaded?: (value: unknown) =&gt; void;
      gapiLoadError?: (reason?: any) =&gt; void;
    }
  }
  </code></pre>
  <p>But now I am getting this error in the console whenever the page loads:</p>
  <pre><code>Uncaught TypeError: window.gapiLoaded is not a function
  </code></pre>
  <p>Am I implementing this correctly? Why do I get the console error?</p>