[FIXED] Problem with FastAPI patch request from javascript

Issue

I made a REST service on python using fast api and I need to call these api using js. This is my python api:

class FieldUpdate(BaseModel):
item_id: Optional[int] = None
field_name: Optional[str] = None
field_value: Optional[str] = None

@router.patch("/update/item", response_model=FieldUpdate)
def update_item(body: FieldUpdate):
    item_id = body.item_id
    field_name = body.field_name
    field_value = body.field_value
    ctx_sle = get my current contenxt
    status = execute method after contenxt initialization (it has nothing to do with running the API)
    return status

And in my js script i try this request using fetch

class FieldUpdate {
  constructor(item_id, field_name, field_value) {
    this.item_id = item_id;
    this.field_name = field_name;
    this.field_value = field_value;
  }

}
async function update_field_from_cell(field) {


const url = "http://127.0.0.1:8080/scriptlab/update/item";
  try {
    await fetch(url, {
      method: "PATCH",
      headers: {'Content-Type': 'application/json', 'Accept': 'application/json'},
      body: field
    })
      .then(function(response) {
        console.log(response.status);
        console.log(response.text());
      });
  } catch (error) {
    console.log(error);
  }

}

But every time I run this request, it returns the 422 Unprocessable Entity error. Do you have any tips to solve this problem?

Solution

As pointed out earlier, the 422 Unprocessable Entity error is thrown when the payload that is received does not match the expected one. Your script sends a JS object, but, instead, should send a JSON String, as shown in the code below. Also, make sure to use the correct url in your request (as I noticed that the one you are using does not match any endpoint in your API). Please remember to change the body attribute to body: json_data as well.

async function update_field_from_cell(field) {
    var obj = {"item_id": field.item_id, "field_name": field.field_name, "field_value": field.field_value};
    json_data = JSON.stringify(obj);
    const url = "http://127.0.0.1:8000/update/item";
      try {
        await fetch(url, {
          method: "PATCH",
          headers: {'Content-Type': 'application/json', 'Accept': 'application/json'},
          body: json_data
        })
          .then(function(response) {
            console.log(response.status);
            console.log(response.text());
          });
      } catch (error) {
        console.log(error);
      }
}

Answered By - Chris