How to Prerender Comments | Gatsbyjs Guide

export class CommentRepo implements ICommentRepo {
  ...
  getAllComments (): Promise<Comment[]> {
    const query = `SELECT * FROM comments ORDER BY created_at DESC;`;
    return new Promise((resolve, reject) => {
      this.conn.query(query, (err, result) => {
        if (err) return reject(err);
        return resolve(result.map((r) => CommentMap.toDomain(r)));
      })
    })
  }
}

import { Comment } from "../models/Comment";

export class CommentMap {
  public static toDomain (raw: any): Comment {
    return {
      id: raw.id,
      name: raw.name,
      comment: raw.comment,
      createdAt: raw.created_at,
      url: raw.url,
      approved: raw.approved === 0 ? false : true,
      parentCommentId: raw.parent_comment_id
    }
  }
}

import { ICommentRepo } from "../../../repos/CommentRepo";

export class GetAllComments {
  private commentRepo: ICommentRepo;

  constructor (commentRepo: ICommentRepo) {
    this.commentRepo = commentRepo;
  }

  async execute (): Promise<any> {
    const comments = await this.commentRepo.getAllComments();
    return comments;
  }
}

import { GetAllComments } from "./GetAllComments";

export const GetAllCommentsController = (useCase: GetAllComments) => {
  return async (req, res) =>  {
    try {
      const comments = await useCase.execute();
      return res.status(200).json({ comments })
    } catch (err) {
      return res.status(500).json({ message: "Failed", error: err.toString() })
    }
  }
}

import { GetAllComments } from "./GetAllComments";
import { commentRepo } from "../../../repos";
import { GetAllCommentsController } from "./GetAllCommentsController";

const getAllComments = new GetAllComments(commentRepo);
const getAllCommentsController = GetAllCommentsController(getAllComments);

export {
  getAllCommentsController
}

import express from 'express';
import { getAllCommentsController } from '../../../useCases/admin/getAllComments';

const commentsRouter = express.Router();

...

commentsRouter.get('/all', 
  (req, res) => getAllCommentsController(req, res)
);

...

export {
  commentsRouter
}

mkdir plugins

cd plugins
mkdir gatsby-source-self-hosted-comments

cd gatsby-source-self-hosted-comments
npm init -y
npm install --save axios
touch gatsby-node.js

const axios = require('axios');
const crypto = require('crypto');

/**
 * @desc Marshalls a comment into the format that
 * we need it, and adds the required attributes in
 * order for graphql to register it as a node.
 */

function processComment (comment) {
  const commentData = {
    name: comment.name,
    text: comment.comment,
    createdAt: comment.createdAt,
    url: comment.url,
    approved: comment.approved,
    parentCommentId: comment.parentCommentId,
  }

  return {
    ...commentData,
    // Required fields.
    id: comment.id,
    parent: null,
    children: [],
    internal: {
      type: `Comment`,
      contentDigest: crypto
        .createHash(`md5`)
        .update(JSON.stringify(commentData))
        .digest(`hex`),
    }
  }
}

exports.sourceNodes = async ({ actions }, configOptions) => {
  const { createNode } = actions
  // Create nodes here.
  try {
    // We will include the API as a gatsby-config option when we hook the
    // plugin up. 
    const apiUrl = configOptions.url;
    // Fetch the data
    const response = await axios.get(apiUrl);
    const comments = response.data.comments;
    // Process data into nodes.
    comments.forEach(comment => createNode(processComment(comment)))
  } catch (err) {
    console.log(err);
  }

  return
} 

{
  allComment {
    edges {
      node {
        name
        parentCommentId
        text
        url
        createdAt
        approved
      }
    }
  }
}

import PropTypes from 'prop-types'
import React from 'react';
import Editor from './Editor';
import Comment from './Comment';
import { TextInput } from '../../shared/text-input';
import { SubmitButton } from '../../shared/buttons';
import "../styles/Comments.sass"
import { commentService } from '../../../services/commentService';

export class Comments extends React.Component {
  constructor (props) {
    super(props);

    this.maxCommentLength = 3000;
    this.minCommentLength = 10;

    this.state = {
      isFetchingComments: true, 
      comments: [],
      name: '',
      commentText: '',
      commentSubmitted: false,
    }
  }

  ...

  async getCommentsFromAPI () {
    try {
      const url = window.location.pathname;
      this.setState({ ...this.state, isFetchingComments: true });
      const comments = await commentService.getComments(url);
      this.setState({ ...this.state, isFetchingComments: false, comments });
    } catch (err) {
      this.setState({ ...this.setState, isFetchingComments: false, comments: [] })
    }
  }

  componentDidMount () {
    this.getCommentsFromAPI();
  }

  sortComments (a, b) {
    return new Date(a.createdAt) - new Date(b.createdAt)
  }

  isReply (comment) {
    return !!comment.parentCommentId === true;
  }

  presentComments (comments) {
    const replies = comments.filter((c) => this.isReply(c));
    
    comments = comments
      .filter((c) => !this.isReply(c))
      .map((c) => {
        const commentReplies = replies.filter((r) => r.parentCommentId === c.id);
        if (commentReplies.length !== 0) {
          c.replies = commentReplies.sort(this.sortComments);
        };
        return c;
      })

    return comments
      .sort(this.sortComments)
  }

  getRealTimeComments () {
    return this.presentComments(this.state.comments);
  }

  getPrerenderedComments () {
    return this.presentComments(this.props.comments ? this.props.comments : []);
  }

  getComments () {
    return typeof window === 'undefined' 
      ? this.getPrerenderedComments() 
      : this.getRealTimeComments();
  }

  render () {
    const comments = this.getComments();
    const { commentText } = this.state;
    const numComments = comments.length;
    const hasComments = numComments !== 0;

    return (
      <div className="comments-container">
        <h3>{numComments} {numComments === 1 ? 'Comment' : 'Comments'}</h3>
        {!hasComments ? <p>Be the first to leave a comment</p> : ''}
        <TextInput
          placeholder="Name"
          value={this.state.name}
          onChange={(e) => this.updateFormField('name', e)}
        />
        <Editor 
          text={commentText}
          handleChange={(e) => this.updateFormField('commentText', e)}
          maxLength={3000}
          placeholder="Comment"
        />
        <SubmitButton
          text="Submit"
          // icon
          onClick={() => this.submitComment()}
          loading={false}
          disabled={!this.isFormReady()}
        />
        {comments.map((c, i) => <Comment {...c} key={i}/>)}
      </div>
    )
  }
}

Comments.propTypes = {
  comments: PropTypes.arrayOf(PropTypes.shape({
    approved: PropTypes.bool.isRequired,
    createdAt: PropTypes.string,
    id: PropTypes.string,
    name: PropTypes.string,
    text: PropTypes.string,
    url: PropTypes.string.isRequired
  }))
}

getComments () {
    return typeof window === 'undefined' 
      ? this.getPrerenderedComments() 
      : this.getRealTimeComments();
  }

gatsby build