The issue

When I first put this site on Gatsby, I found adding comments tricky. I used this blog post, Dynamic Comments with Gatsby and WordPress, tweaked it a bit and shoved it in. I only used it for the comments form because I wasn’t worried about rebuilding – I really just wanted to see how it worked.

But I didn’t understand it and I didn’t like wrapping my site in an ApolloClient, it seemed to slow it down a bit, and it all seemed a bit much to get not a lot of comments.

Enter this week as I’m doing something else and came across this page in the Gatsby docs, Build time and client runtime data fetching, and read about using fetch. Fetch! I know how to use that. Well… I know how to use that with the WordPress REST API. And you know what? That will do.

A high level overview

I’m keeping the posts the same as before but dynamically loading comments and handling comment submissions using fetch and the WordPress REST API.

When getting the comments, the fetch requests are wrapped in useEffect to get them after the page load, making sure to unsubscribe to the fetch Promise, and I’m using useState to set the comment list.

Submitting the comment is handled in an onclick function which sends a POST request to the WordPress comments endpoint. I allow anonymous comments (and don’t have or want logged in users submitting comments) so there’s a tiny plugin with Gatsby helpers to which I’ve added a filter to allow anonymous comments which are off by default.

The details

There are a few components used.

• Comments: parent component for all comment related things (Comments gist here)
• CommentsList: the list of all comments, uses Comment (CommentsList gist here)
• Comment: the individual comment (Comment gist here)
• CommentCount: the number of published comments on the post (CommentCount gist here)
• CommentForm: the form for comment submission (CommentForm gist here)

I’ll explain the ones with the requests in detail here, Comments and CommentForm.

The Comments component

The entire component is at the end of this. It uses fetch as an async function in useEffect. This async function is immediately called to get the comments from the site. It’s done this way because useEffect won’t take an async function like useEffect( async () => ... so this needs to be inside the function it does use eg :

The fetch response in the Comments component sets the comments state which will either be an array of the comments or, if there aren’t any or there was an error, an empty array.

The request in this function is a simple GET request to the comments endpoint with a query variable post=postId to tell it which post’s comments it should get. This endpoint only sends the published comments and is public by default. The comments come as an array of objects. The WP REST API developer handbook is not the best, but you can see the schema here – it will be the “view” context that is returned.

There is a cleanup function in useEffect to avoid the “… To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function” error. The explanation for this I used it here in “Cancelling a Promise with React.useEffect” which explains things better than I could.

The CommentsForm component

This is what it says on the tin: a form for submitting comments. The form is a bog standard form. It used to be component based but I updated it to use functions and hooks a while ago and love them! I highly recommend this if you need something satisfying to do and want to sit on your computer doing it.

BEFORE YOU START

This component requires a filter in the WordPress install which allows the REST API to accept anonymous submissions. This functionality is off by default. I’m using a very simple plugin which consists of a file with this in it. (I’ll add to this plugin at some point, there is functionality elsewhere that I use which should be in it.)

BACK TO THE COMPONENT

The bit that handles the submission is this:

The body is sent as a JSON string with the Content-Type header as application/json. It’s sent to the comments endpoint and the ID of the post for which it’s a comment is in the body. All of the parameters available are in the developer handbook.

The entire component is below. I don’t do any validation of the form fields, it’s very bare bones.

Summing up

I’m happy with this tbh. I have a slight feeling of weirdness about combining the REST API with GraphQL but I’m ok with that. The entire point of Gatsby is to get data from different sources and using whatever is easiest for each particular case makes sense to me.