How to Add Commento (or other Comments) to Gatsby

Recently, I wanted to add comments to by Gatsby site. I found this open source sysetem (Commento), although I did sign up for the paid version to support open source :D.

Anyway, I wanted to add this to my site. After signing up, I was given the follow code snippet.

<script defer src="https://cdn.commento.io/js/commento.js"></script>
<div id="commento"></div>

The system is supposed to automatically recognize the page and only pull comments for that. So, I just needed to add this to a page and it should work, however, that did not work for me.

This could be because of the caching I used on Gatsby, but I believe this is because of how React Handles it. To solve this, I created a Comment Component to manually inject the script.

import React, { useEffect } from 'react';

const Comments = () => {
    useEffect(() => {
        const script = document.createElement('script');
        script.src = 'https://cdn.commento.io/js/commento.js';
        script.async = true;

        const comments = document.getElementById('comments-container');
        if (comments) comments.appendChild(script);
    }, []);

    return (
        <>
            <div id="comments-container"></div>
            <div id="commento"></div>
        </>
    );
};

export default Comments;

I have a file called post.jsx which is used as a template to render post. In that file I add the following, and comments are added to each page.

<Comments />