gatsby-gapi

🛸 Intro

npm package that loads gapi script and initialize some functions.which supports server-side-rendering in gatsby.

There is a package which loads the gapi functions for us gapi-script , this package uses modified code of gapi-script make build possible in gatsby with google login. You can either call loadGapiInsideDOM to load the gatsby-gapi inside a <script> tag on your browser. Or use the static gapi value that was copied from google api platform, pasted to this project and exported as gapi.

👨‍🔧 How to use

Add the package to your project:

npm install gatsby-gapi

//or

yarn add gatsby-gapi

You can load gapi with following approach 1 - import gapi where you need it:

1import { gapi } from 'gatsby-gapi';

2 - import gapi in your react app:

1
2useEffect(() => {
3    function start() {
4      gapi.client.init({
5        clientId: "client-id",
6        scope: 'email',
7      });
8    }
9
10    gapi.load('client:auth2', start);
11  }, []);
12
13

After loading gatsby-gapi you can access as window.gapi in your component

Once you have gapi you can use it in other functions to make your life easier

If you need to use gapi auth2 the package already has a function to initialize it:

1import { loadAuth2, loadAuth2WithProps, loadClientAuth2 } from 'gatsby-gapi';
2
3let a2 = await loadAuth2(gapi, clientId, scopes);
4
5// or if you need to use more props from gapi you can use this method:
6let a2 = await loadAuth2WithProps(gapi, { /* object with props from gapi */ });
7
8// if you want to use the gapi client itself
9let gClient = loadClientAuth2(gapi, clientId, scopes);

🎁 How to contribute

Can make pull requst with a good description about feature or bug fix.