How to read incoming request data in loader or action (request.formData() vs await request.json())

[cliffordfajardo]

How do I read incoming request data in a loader or action?
When should I use request.formData() vs await request.json()?

[cliffordfajardo]

A few times while developing Remix Apps I've mistakenly used request.json() in my action in an attempt to grab the submitted data only to realize that I should be using request.formData because the incoming request was actually a form submission (you'll see 'Content-Type' : 'application/x-www-form-urlencoded' in the coming request).

This happened to me today, when I was using an 3rd party library in my Remix app, which was sending its POST data via a form submission ('Content-Type' : 'application/x-www-form-urlencoded') but I had mistakenly assumed it was coming in as application/json.

Below is the error outputted when I attempted to use await request.json() on the incoming request, which was wasn't detailed or helpful (hence the creation of this "show & tell post" you are reading:

failed, reason: Unexpected token g in JSON at position 0

Reading formData

To read data that was submitted via form (where the request's Content-Type header is 'Content-Type' : 'application/x-www-form-urlencoded') , you need to use request.formData

const action = ({request}) => {
  const formData = await request.formData()

Reading JSON Data

To read JSON data that was submitted via a non-form (where the request's Content-Type header is 'Content-Type' : 'application/json') , you need to the following method request.json:

// web browser
fetch('url.com', {method: 'POST | DELETE | PUT', body:{..}} )

const action = ({request}) => {  //typiically you might would encounter request.json() in an action that is resource route more often than not
  const json = await request.json()

[kiliman]

Great write up. Will definitely help the next person when they come across this issue.

[sergiodxa]

Note that loader functions don't have a request body so request.formData() should fail there. Only action function can have a request body.

[cliffordfajardo]

Note that loader functions don't have a request body so request.formData() should fail there

Good catch - just updated the example 👌

[KrishnaPG]

Exactly what I was looking for. Thanks for sharing.