Adding new field Serverless Multi-user Blogging Platform with Next.js, Tailwind, & AWS CLI

Viewed 48

Any help is greatly appreciated have I missed a step?

Currently have successfully deployed a full-stack serverless nextJs application to AWS Amplify and I have made a change in regards to adding a new field on creating a new blog

After adding the category field seeing Uncaught (in promise) error unable to see the posts but able to see the blog post in the listPosts array error image

schema.graphql change is as shown

  title: String!
  content: String!
  category: String!
  username: String

Have run amplify push --y

Reference Youtube - Hands on Workshop - Building a Serverless Multi-user Blogging Platform with Next.js, Tailwind, & AWS

import { withAuthenticator } from '@aws-amplify/ui-react'
import { useState, useRef } from 'react' // new
import { API, Storage } from 'aws-amplify'
import { v4 as uuid } from 'uuid'
import { useRouter } from 'next/router'
import SimpleMDE from "react-simplemde-editor"
import "easymde/dist/easymde.min.css"
import { createPost } from '../graphql/mutations'

const initialState = { title: '', content: '', category: '' }

function CreatePost() {
  const [post, setPost] = useState(initialState)
  const hiddenFileInput = useRef(null);
  const { title, content, category } = post
  const router = useRouter()
  function onChange(e) {
    setPost(() => ({ 
      ...post, [e.target.name]: e.target.value }))
  }
  async function createNewPost() {
    if (!title || !content || !category) return
    const id = uuid() 
    post.id = id
    await API.graphql({
      query: createPost,
      variables: { input: post },
      authMode: "AMAZON_COGNITO_USER_POOLS"
    })
    router.push(`/posts/${id}`)
  }
  return (
    <div>
      <h1 className="text-3xl font-semibold tracking-wide mt-6">Create new post</h1>
      <input
        onChange={onChange}
        name="title"
        placeholder="Title"
        value={post.title}
        className="border-b pb-2 text-lg my-4 focus:outline-none w-full font-light text-gray-500 placeholder-gray-500 y-2"
      /> 
      <input
        onChange={onChange}
        name="category"
        placeholder="Category"
        value={post.category}
        className="border-b pb-2 text-lg my-4 focus:outline-none w-full font-light text-gray-500 placeholder-gray-500 y-2"
      /> 
      <SimpleMDE value={post.content}
      onChange={value => setPost({ 
                        ...post, content: value })} />
      <button
        type="button"
        className="mb-4 bg-blue-600 text-white font-semibold px-8 py-2 rounded-lg"
        onClick={createNewPost}
      >Save Article</button>
    </div>
  )
}

export default withAuthenticator(CreatePost)
1 Answers
Related