Passing form data to API custom route with WordPress

Question

Getting the following 500 code response when making my API call: PUT https://my-site.com/wp/wp-json/contact/v1/send 500

In functions.php my WP custom route is defined thus:

function sendContactMail(WP_REST_Request $request) {
}

add_action('rest_api_init', function () {
  register_rest_route( 'contact/v1', 'send', array(
    'methods' => 'PUT',
    'callback' => 'sendContactMail'
  ));
});

Here's how I'm making my API call:

formData.append('contact_name', this.contactName)
formData.append('contact_email', this.contactEmail)
formData.append('contact_message', this.contactMessage)

this.$axios.$put('https://my-site.com/wp/wp-json/contact/v1/send', formData)
  .then((res) => {
    this.ApiResponse = res
  })
  .catch((err) => {
    this.$toast.error(err.response)
  })

Why am I getting a 500 error?

Answer 1

Update function like this

function sendContactMail(WP_REST_Request $request) {
}

add_action('rest_api_init', function () {
  register_rest_route( 'contact/v1', '/send', array(
    'methods' => 'PUT',
    'callback' => 'sendContactMail'
  ));
});

Update function like this

formData.append('contact_name', this.contactName)
formData.append('contact_email', this.contactEmail)
formData.append('contact_message', this.contactMessage)

this.$axios.$put('https://my-site.com/wp-json/contact/v1/send', formData)
  .then((res) => {
    this.ApiResponse = res
  })
  .catch((err) => {
    this.$toast.error(err.response)
  })

Answer 2

The problem is likely that the callback function is expecting a return value. At the end of your function sendContactMail(WP_REST_Request $request) { } you'll want to return a WP_REST_Response or WP_Error to send a response back.

I've set up a quick little example here: https://xhynk.com/content-mask/65451758-answer/

The "Click Me (Bad)" and "Click Me (Good)" buttons do exactly the same thing, except change the data being sent. The only difference in the sendContactMail() function is like follows:

function sendContactMail(WP_REST_Request $request) {
  if( $request->get_body() == 'return=true' ){
    return new WP_REST_Response(
      array(
        'status' => 200,
        'response' => 'Did the thing'
      );
    );
  }
}

The "true" condition only fires when the "Good" button is clicked, which is where the .done() block is handled, vs the "Bad" button triggering the .catch block.

So you should be able to solve your problem, by doing X, Y, Z with your data, and making sure you're returning a proper response

Also make sure that you're not running into a PHP error (like directly accessing the $request properties, since they're protected properties, and doing something like if( $request->body == 'something' ) will trigger a "PHP Fatal error: Cannot access protected property" and serve up a 500 error.

Answer 3

The Bug is in the making my API call JS script
so, remove the extra wp from the URL, and than the update URL will look like
https://my-site.com/wp-json/contact/v1/send

The updated script will look like the following

formData.append('contact_name', this.contactName)
formData.append('contact_email', this.contactEmail)
formData.append('contact_message', this.contactMessage)

this.$axios.$put('https://my-site.com/wp-json/contact/v1/send', formData)
 .then((res) => {
 this.ApiResponse = res
})
.catch((err) => {
 this.$toast.error(err.response)
});