text: 
  // Import the `useParams()` hook
  import { useParams } from 'react-router-dom';
  import { useQuery } from '@apollo/client';
  
  import CommentList from '../components/CommentList/CommentList';
  import CommentForm from '../components/CommentForm/CommentForm';
  
  import { QUERY_SINGLE_NOTE} from '../utils/queries';
  
  const SingleNote = () => {
    // Use `useParams()` to retrieve value of the route parameter `:profileId`
    const { noteId } = useParams();
  
    const { loading, data } = useQuery(QUERY_SINGLE_NOTE, {
      // pass URL parameter
      variables: { noteId: noteId },
    });
  
    const note = data?.note|| {};
  
    if (loading) {
      return <div>Loading...</div>;
    }
    return (
      <div className="my-3">
        <h3 className="card-header bg-dark text-pink-200 p-2 m-0">
          {note.noteAuthor} <br />
          <span style={{ fontSize: '1rem' }}>
            had this thought on {note.createdAt}
          </span>
        </h3>
        <div className="bg-light py-4">
          <blockquote
            className="p-4 font-bold text-pink-200"
            style={{
              fontSize: '1.5rem',
              fontStyle: 'italic',
              border: '2px dotted #1a1a1a',
              lineHeight: '1.5',
            }}
          >
            {note.noteText}
          </blockquote>
        </div>
  
        <div className="my-5">
          <CommentList comments={note.comments} />
        </div>
        <div className="m-3 p-4" style={{ border: '1px dotted #1a1a1a' }}>
          <CommentForm noteId={note._id} />
        </div>
      </div>
    );
  };
  
  export default SingleNote;