Graphcomment plugin - implementation with Gatsby

Question

I have a Gatsby powered blog. I have implemented a GrapComment plugin to enable readers to comment on the blogs. GraphComment provides a javascript snippet:

<div id="graphcomment"></div>
<script type="text/javascript">

  /* - - - CONFIGURATION VARIABLES - - - */

  var __semio__params = {
    graphcommentId: "<your-site-id>", // make sure the id is yours

    behaviour: {
      // HIGHLY RECOMMENDED
      //  uid: "...", // uniq identifer for the comments thread on your page (ex: your page id)
    },

    // configure your variables here

  }

  /* - - - DON'T EDIT BELOW THIS LINE - - - */

  function __semio__onload() {
    __semio__gc_graphlogin(__semio__params)
  }


  (function() {
    var gc = document.createElement('script'); gc.type = 'text/javascript'; gc.async = true;
    gc.onload = __semio__onload; gc.defer = true; gc.src = 'https://integration.graphcomment.com/gc_graphlogin.js?' + Date.now();
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(gc);
  })();
  

</script>

However, when I run yarn start, I see this error:

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed


/home/hnhegde/work/square-deal-blog/src/components/Comments.jsx
  20:13  error  '__semio__gc_graphlogin' is not defined  no-undef

✖ 1 problem (1 error, 0 warnings)


File: src/components/Comments.jsx

failed Building development bundle - 18.196s

The error message itself makes sense because __semio__gc_graphlogin isn't defined anywhere. Has anyone used GraphComment with Gatsby/React? Did you encounter this issue? My react component looks like:

import React, {useEffect} from 'react';

const Comments = () => {
    useEffect(() => {

        let __semio__params = {
            graphcommentId: "<site-id>", // make sure the id is yours

            behaviour: {
                // HIGHLY RECOMMENDED
                uid: "<page-id>", // uniq identifer for the comments thread on your page (ex: your page id)
            },

            // configure your variables here
        }

        /* - - - DON'T EDIT BELOW THIS LINE - - - */

        function __semio__onload() {
            __semio__gc_graphlogin(__semio__params)
        }

        (function () {
            let gc = document.createElement('script');
            gc.type = 'text/javascript';
            gc.async = true;
            gc.onload = __semio__onload;
            gc.defer = true;
            gc.src = 'https://integration.graphcomment.com/gc_graphlogin.js?' + Date.now();
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(gc);
        })();

    }, []);

    return <div id="graphcomment"/>
};

export default Comments;

Answer 1

Try this... whe you use function directly in gatsby is not good.

import React, { useEffect } from 'react';

const COMMENTS_ID = 'graphcomment';

const Comments = () => {
    useEffect(() => {
        window.gc_params = {
            graphcomment_id: '<YOUR_GRAPHCOMMENT_ID>',
            fixed_header_height: 0,
            
          };

        const script = document.createElement('script');
        script.src = 'https://graphcomment.com/js/integration.js?' + Date.now();
        script.async = true;

        const comments = document.getElementById(COMMENTS_ID);
        if (comments) comments.appendChild(script);

        // This function will get called when the component unmounts
        // To make sure we don't end up with multiple instances of the comments component
        return () => {
            const comments = document.getElementById(COMMENTS_ID);
            if (comments) comments.innerHTML = '';
        };
    }, []);

    return <div id={COMMENTS_ID} />
};

export default Comments;

And them, just import the component in your blog;

Answer 2

The error you have is an linting error : https://eslint.org/docs/rules/no-undef

Indeed you are right __semio__gc_graphlogin is undefined in your code though if you were to explore the script you are loading : https://integration.graphcomment.com/gc_graphlogin.js

This script define on the window closure the function __semio__gc_graphlogin.

Also fixing your issue is quite simple, you have to tell eslint that this function is defined at the time you are calling it

• I would recommend to to it locally like :

      // eslint-disable-next-line no-undef
      __semio__gc_graphlogin(__semio__params);

• otherwise you ll have to add globals to your linting config

Cheers !

PS: you are rendering a DOM element that will be manipulated by another script that react be sure not to rerender ever to avoid any bad reconcilation with react. (you ll have to use react.memo or shouldComponentUpdate)

Answer 3

Have you tried adding it natively?

• Using Helmet (import Helmet from react-helmet):

  <Helmet>
  <script type='text/javascript'>
           let __semio__params = {
               graphcommentId: "<site-id>", // make sure the id is yours
  
               behaviour: {
                   // HIGHLY RECOMMENDED
                   uid: "<page-id>", // uniq identifer for the comments 
  thread on your page (ex: your page id)
               },
  
               // configure your variables here
           }
  
           /* - - - DON'T EDIT BELOW THIS LINE - - - */
  
           function __semio__onload() {
               __semio__gc_graphlogin(__semio__params)
           }
  
           (function () {
               let gc = document.createElement('script');
               gc.type = 'text/javascript';
               gc.async = true;
               gc.onload = __semio__onload;
               gc.defer = true;
               gc.src = 'https://integration.graphcomment.com/gc_graphlogin.js?' + Date.now();
               (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(gc);
           })();
  </script>
  </Helmet>
  

• If you want to use <script>, use backticks (`) along with dangerouslySetInnerHTML. You can combine in with Helmet if needed:

  <script dangerouslySetInnerHTML= {{ __html: `putYourSciptHereInBackticks`}} />`  
  

• Depending on your specifications, you can use setHeadComponents (preferred way since it's the most Gatsby native approach):

  exports.onRenderBody = ({ setHeadComponents }) =>
     setHeadComponents([
       <script key='myscript' src='...' />
     ]);
  
  

  One of the gatsby-ssr.js APIs is the onRenderBody, which exposes a setHeadComponents method that allows you to customize the <head> tag.