Problem with FastAPI patch request from Javascript

Question

I made a REST service on python using FastAPI and I need to call the API using Javascript.

This is my FastAPI server:

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 tried 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?

Answer 1

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);
      }
}

Answer 2

The Error code 422 will be thrown if the request payload does not match with the actual payload accepted by your API.

The Pydantic model you use, validates and accepts only the request payload that matches.

Example payload that can be used here:

1)

{
  "item_id":1, #integer
  "field_name": "some_name", #string
  "field_value": "some_value" #string
}

2. Any of the values can be "null". Because you have mentioned all the fields as optional:

{
  "item_id":null, #integer
  "field_name": "some_name", #string
  "field_value": null #string
}