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:
import { gapi } from 'gatsby-gapi';
2 - import gapi
in your react app:
useEffect(() => {
function start() {
gapi.client.init({
clientId: "client-id",
scope: 'email',
});
}
gapi.load('client:auth2', start);
}, []);
window.gapi
in your component
After loading gatsby-gapi you can access as 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:
import { loadAuth2, loadAuth2WithProps, loadClientAuth2 } from 'gatsby-gapi';
let a2 = await loadAuth2(gapi, clientId, scopes);
// or if you need to use more props from gapi you can use this method:
let a2 = await loadAuth2WithProps(gapi, { /* object with props from gapi */ });
// if you want to use the gapi client itself
let gClient = loadClientAuth2(gapi, clientId, scopes);
🎁 How to contribute
Can make pull requst with a good description about feature or bug fix.