T
TanStack•4y ago
fascinating-indigo

useMutation POST request returning `(400) Bad Request`

I created and tested an API for multipart/form data POST request using ExpressJs and Postman(for testing). Everything works fine in postman but trying make the request on client-side(React) using useMutation is returning the `(400) Bad Request. Below is the code For API controller file 
exports.createBlogPost = async (req, res) => {
  const { title, subtitle, body, displayImage, tags} = req.body

  try {
    const result = await cloudinary.uploader.upload(req.file.path);
    const newPost = await BlogPost.create({
      title,
      subtitle,
      body,
      displayImage: {
        url: result.secure_url,
        public_id: result.public_id,
      },
      tags
    });
    res.status(201).json({
      status: "success",
      data: {
        post: newPost,
      },
    });
  } catch (error) {
    res.status(400).json({
      status: "fail",
      message: error,
    });
  }
};
exports.createBlogPost = async (req, res) => {
  const { title, subtitle, body, displayImage, tags} = req.body

  try {
    const result = await cloudinary.uploader.upload(req.file.path);
    const newPost = await BlogPost.create({
      title,
      subtitle,
      body,
      displayImage: {
        url: result.secure_url,
        public_id: result.public_id,
      },
      tags
    });
    res.status(201).json({
      status: "success",
      data: {
        post: newPost,
      },
    });
  } catch (error) {
    res.status(400).json({
      status: "fail",
      message: error,
    });
  }
};
Client-side(React) code 
// axios query
const postBlog = async data => {
  const res = await axios.post('http://127.0.0.1:4000/api/blogposts', data)
  return res.data
}
const NoteViewer = () => {
  const [editorState, setEditorState] = useState()

  // states for each input in the form
  const [title, setTitle] = useState('')
  const [subtitle, setSubtitle] = useState('')
  const [displayImage, setDisplayImage] = useState('')
  const [tags, setTags] = useState([])

  const handleImage = e => {
    const file = e.target.files[0]
    setFileToBase(file)
    console.log(displayImage)
  }

  const setFileToBase = file => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      setDisplayImage(reader.result)
    }
  }
  const { mutate, isLoading } = useMutation(postBlog)
  const handleMutation = e => {
    e.preventDefault()
    const bpost = {
      title,
      subtitle,
      body: editorState,
      displayImage,
      tags
    }
    mutate(bpost)
  }
// axios query
const postBlog = async data => {
  const res = await axios.post('http://127.0.0.1:4000/api/blogposts', data)
  return res.data
}
const NoteViewer = () => {
  const [editorState, setEditorState] = useState()

  // states for each input in the form
  const [title, setTitle] = useState('')
  const [subtitle, setSubtitle] = useState('')
  const [displayImage, setDisplayImage] = useState('')
  const [tags, setTags] = useState([])

  const handleImage = e => {
    const file = e.target.files[0]
    setFileToBase(file)
    console.log(displayImage)
  }

  const setFileToBase = file => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => {
      setDisplayImage(reader.result)
    }
  }
  const { mutate, isLoading } = useMutation(postBlog)
  const handleMutation = e => {
    e.preventDefault()
    const bpost = {
      title,
      subtitle,
      body: editorState,
      displayImage,
      tags
    }
    mutate(bpost)
  }
Help will be appreciated
7 Replies
manual-pink
manual-pink•4y ago
How do you know it's returning the 400? It doesn't look like you're using the data from the mutation for anything 
const {mutate} = useMutation(postBlog, {
  onSuccess(data) {
    // shouldn't be the 400 
    // if you're using axios / ky /something that automatically throw on non-200
  }
});
const {mutate} = useMutation(postBlog, {
  onSuccess(data) {
    // shouldn't be the 400 
    // if you're using axios / ky /something that automatically throw on non-200
  }
});
or 
mutate(bpost, {
  onSuccess(data) {
    // this would also work
  }
});
mutate(bpost, {
  onSuccess(data) {
    // this would also work
  }
});
fascinating-indigo
fascinating-indigoOP•4y ago
Thanks for your response. It returns the error whenever I click the submit button. This is my first time using useMutation and I followed the documentation and some tutorial. I assumed the data is already returned by the postBlog() and that the POST query will be invoked by mutate().
manual-pink
manual-pink•4y ago
Yeah, the response from postBlog would end up in the onSuccess callback as the first argument (unless the request has a non-200 then Axios will throw which will be caught by react-query and it'll instead call the onError callback). I still don't know what you mean by "it returns the error" though.
fascinating-indigo
fascinating-indigoOP•4y ago
This is the response I get whenever I click the submit button
No description
fascinating-indigo
fascinating-indigoOP•4y ago
I believe onSuccess() will only return something if the query is successful which it isn't.
manual-pink
manual-pink•4y ago
Doesn't look like the problem is related to react query, looks like your request is invalid. If you called that request without react query it looks like it would still fail with the same error
fascinating-indigo
fascinating-indigoOP•4y ago
Yes. But the request works on Postman.

Did you find this page helpful?