Dynamic Comments with Gatsby and WordPress

Using a static site generator like Gatsby for the frontend of your WordPress site can be an excellent solution for a fast, easily maintained, and scalable site. But what about dynamic content, like comments?

In this article, we’ll show you how to add basic commenting functionality to your Gatsby site that seamlessly integrates with a headless WordPress backend for storage and moderation.

Getting Started

This article assumes that you already understand the basics of using Gatsby with a WordPress source. With that said, here are a few requirements:

  • A basic understanding of Gatsby.
  • An existing Gatsby site that uses WordPress and the WPGraphQL plugin as a source.

If you’ve never created a site with Gatsby that uses WordPress as a source, you might want to take a look at JS for WP’s article about setting up Gatsby, WordPress, and WPGraphQL.

If you already have some familiarity with WordPress and Gatsby, but want to look a little deeper into how we’ve set them up using WPGraphQL, take a look at our re-creation of the Twenty Nineteen theme in Gatsby.

If you want to follow along with a complete project using the examples in this article, we’ve placed a fully functional example on GitHub.

Configuring Client-Side Rendering in Gatsby

To dynamically load a post’s comments when visited by a user, we’ll be loading them client-side. Client-side rendering ensures that the comments are always up-to-date on each visit.

Installing Required Modules

In this example, we’ll be using Apollo to make the remote requests to our WordPress site that’s running WPGraphQL. Let’s go ahead and install a few modules to accomplish the task:

Configuring Apollo in Gatsby

When loading things client-side, Gatsby uses the gatsby-browser.js file. Here’s what our example code inside this file looks like:

Inside this example, we’re using wrapRootElement to wrap our entire page with the ApolloProvider React component that contains our client. Of course, be sure to replace http://example.com with the URL to your WordPress site.

Displaying Comments

Now that we’ve prepared our site to use Apollo, it’s time to create a React component that fetches and displays comments. For the purposes of this article, we’ll call it comment-list.js. Here’s a basic example of what that component looks like:

Within the above example, we’re first setting up our GraphQL query within the commentQuery constant. For simplicity, we’re also breaking up that query into multiple fragments named CommentFields and AuthorFields.

Next is the render function of our CommentList component. Like all other React components, this determines how our component’s markup is output.

Digging deeper into the CommentList component, you’ll notice that we’re calling another React component: <Query>. This component allows us to efficiently execute the GraphQL query that we’ve previously defined, then render additional output based on the results.

The first 7 lines inside the Query component contain a few conditions to handle how the comment list is displayed while it’s loading the data from the remote source, or if there’s an error when making the query.

After our additional error handling is the meat of the component that displays the comments. Here, we’re getting a list of comments and looping through them to display information from each one.

Handling Comment Submissions

In addition to displaying comments dynamically for each post, a comment form can also be utilized for users to submit new comments.

Here’s an example component to create a comment submission form that submits new comments to the WordPress backend using GraphQL. For the purposes of this article, we’ll call it comment-form.js:

If you’re already experienced in managing state within React components, this should look very familiar to you.

Using State to Watch Field Changes

In the above example, we’re creating a React component that watches the contents of each comment form field. If the contents of a field change, the component’s state also changes to reflect the current input.

Once we have all of our data, it’s time to handle the one more critical piece: comment submission to the WordPress backend.

The <form> Element and onSubmit Action

Within the <form> element, you’ll notice that we’ve defined an onSubmit action that runs a function when the comment form is submitted. Inside this function, we prevent the default behavior of form submissions and instead send the GraphQL mutation to the headless WordPress backend.

Handling Comment State with the commentStatus Property

Because of the slight delay that may occur between when the form submission button is clicked and a response from the WordPress backend is received, additional handling is in place.

Since we’re rendering things based on user interaction, the commentStatus state property is being changed a few times throughout the process. This ensures that the form isn’t submitted twice, and any errors or success messages are appropriately displayed.

Where To Go From Here

Using this example, you should be able to easily manage comments when using Gatsby to build your site from a headless WordPress data source.

For a complete Gatsby site that uses this example, take a look at our example repository on GitHub.

Since this is intended only as a single example of how dynamic comments are achieved, there are a few other things that you might want to do when building a production-ready site with comment functionality.

Additional changes that you might want to make could be:

  • Nonce verification to prevent possible API abuse.
  • Threaded comments.
  • Additional human verification such as a CAPTCHA.
  • Pagination.

When building your site using a decoupled backend and frontend, the sky’s the limit! Have you built a Gatsby site that uses WordPress as a backend? Do you have a better solution for handling comments? Let us know in the comments below!

1 Comment

  1. Martin
    Martin

    This is awesome thanks a lot! There isn’t much content out there yet about this kind of stuff.

    What I personally would love to see is a guide on a whole userflow between gatsby and wp as in registering and logging users in and then getting their profile data etc 🙂

    Reply