How to add/edit advanced custom fields on custom post type's WordPress REST API?

Question

I have a custom post type called "notes" and also activated an Advanced Custom Field on that post type called "page_link". I want to add/edit the value of page_link using the REST API but I could not do it. I am only able edit native fields like title and the content. In my console, after success, noteLink is there but is equals to "null".

I have html like this:

<div class="mb-3">
  <label for="formInput1" class="form-label">Title</label>
  <input id="formInput1" class="new-note-title form-control" placeholder="Title">
</div>
<div class="mb-3">
  <label for="formTextarea1" class="form-label">Content</label>
  <textarea id="formTextarea1" name="" class="new-note-body form-control" placeholder="Content"></textarea>
</div>
<div class="mb-3">
  <label for="formInput2" class="form-label">Link</label>
  <input id="formInput2" class="new-note-link form-control" placeholder="Link">
</div>

javascript:

createNote(e) {

    var ourNewPost = {
        'title': $(".new-note-title").val(),
        'noteLink': $(".new-note-link").val(),
        'content': $(".new-note-body").val(),
        'status': 'publish'
    }

  $.ajax({
    beforeSend: xhr => {
      xhr.setRequestHeader("X-WP-Nonce", myData.nonce)
    },
    url: myData.root_url + "/wp-json/wp/v2/note/",
    type: "POST",
    data: ourNewPost,

    success: response => {
        //location.reload()
        console.log("Congrats")
        console.log(response)
    },
    error: response => {
      console.log("Sorry")
      console.log(response)
    }
  })
}

register post type like this:

function custom_post_types() {

    register_post_type('note', array(
      'capability_type' => 'note',
      'map_meta_cap' => true,
      'show_in_rest' => true,
      'supports' => array('title', 'editor', 'advanced-custom-fields'),
      'public' => false,
      'show_ui' => true,
      'labels' => array(
        'name' => 'Notes',
        'add_new_item' => 'Add New Note',
        'edit_item' => 'Edit Note',
        'all_items' => 'All Notes',
        'singular_name' => 'Note'
      ),
      'menu_icon' => 'dashicons-welcome-write-blog'
    ));
  }

register_rest_field on my functions.php like this:

function custom_rest(){

register_rest_field('note', 'noteLink', array(
  'get_callback' => function(){return get_field('page_link');}
));

}

add_action("rest_api_init", 'custom_rest');

Answer 1

I think the only thing missing here is an update_callback in the call to register_rest_field.

    register_rest_field( 'note', 'noteLink', array(
        'get_callback' => function(){ return get_field('page_link'); },
        'update_callback' => function( $value, $post ){
            update_field('field_619dacfd37924', $value, $post->ID );
        }
    ));

An important part of that according to ACF docs is using the field key to update the value when there is no value yet set.

The field’s key should be used when saving a new value to a post (when no value exists). This helps ACF create the correct ‘reference’ between the value and the field’s settings.

The field’s key can be found while editing the field group though you may need turn on the option to show "Field Keys" within "Screen Options" if you haven't done so already. Then look for the "Key" column in the table of the fields. Here's what I see.

On a separate note, when registering the post type, the supports property can be cleaned up to just:

      'supports' => array('title', 'editor'),

Having 'advanced-custom-fields' in there doesn't do anything.