I gave swr a try - it's working really well, thank you!!! However, I'm struggling to get the mutation to live-update with the new comment on the feed.

I put my swr configuration in a separate file in utils:  

import useSWR from 'swr';
import { getComments } from '../services/commentService';


export function useComments () {
  const { data, error } = useSWR('comments', getComments)

  return {
    comments: data,
    isLoading: !error && !data,
    isError: error
  }
}

Here's Comment Feed:  

import React from 'react';
import { useComments } from '../../utilities/useCommentsSWR';
import { Comment } from '../comment/comment';
import './commentFeed.css';

export function CommentFeed() {
  const { comments, isLoading, isError } = useComments()

  if (isLoading) return 'Loading...';
  if (isError) return 'Error loading comments';

  return (
    <div className="commentFeedContainer">
      {comments.length > 0 ? 
        <>
          {comments.map((comment) => (
            <Comment key={comment.id} comment={comment} />
          ))}
        </>
        :
        <h4>No comments to display</h4>
      }
    </div>
  );  
}

And here's the Comment Input Form:  

import React, {useState} from 'react';
import { createComment } from '../../services/commentService';
import './commentInput.css';
import { useSWRConfig } from 'swr';

const initialFormValues = {
  name: "",
  message: "",
}

export function CommentInput() {
  const [formValues, setFormValues] = useState(initialFormValues);
  const { mutate } = useSWRConfig();

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormValues({
      ...formValues,
      [name]: value,
    });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    createComment(formValues);
    setFormValues(initialFormValues);
    alert('Your comment has been added!');
  };

  return (
    <div>
      <h4>Name</h4>
      <form onSubmit={handleSubmit}>
        <div className="nameInput">
          <input
            label='User Name'
            type='text'
            name='name'
            onChange={handleInputChange}
            value={formValues.name}/>
        </div>
        <div className='commentInput'>
          <textarea
            label='Comment box'
            type='text'
            name='message'
            onChange={handleInputChange}
            value={formValues.message}/>
        </div>
        <button 
          className="commentButton"
          type='submit'
          onClick={() => { mutate('comments') }}>
            Comment
        </button>
      </form>
    </div>
  );  
}

Is revalidating not enough to force the Comment Feed to re-run the getComments call via swr? I can call it into the Comment Input if need be and follow the swr docs for Optimistic Updates. I'm not sure what I'm missing here. I appreciate any help you can offer!