Describe the issue:
- We have been using the computed field plugin and working on custom plugins that automate setting the values of a field based on other fields.
- Iāve noticed that after a value is set in the form, in some cases there appears to be some kind of server-side validation that fails. The browser console shows the error
POST https://site-api.datocms.com/items/validate 422 (Unprocessable Content)
- This causes the form to continue to show a persistent validation message on the field (even though it is valid) until another field is changes. Then it seems to go away.
Iāve been ignoring this issue because it does go away, but we are getting ready to use Dato in production and this could be confusing to our users. One plugin we have is looking up in our custom Author model the author associated with the datocms userās email address.
When I first load the form it seems to not cause the error (maybe because the author field goes from not being set to being set to a value). If I hit the x next to the value, the field becomes empty again so our plugin again retrieves and sets the Author. This is kind of an edge case, but Iāve seen it for other fields as well. In the screenshot below, you can see that the field is populated, but it still says it is required.
Is there something we should be doing to avoid this problem?
More Details:
The error points to this code served by dato
b.apply(this, T).then(function(U) {
P.end_time_ms = r.now(),
P.status_code = U.status,
P.response_content_type = U.headers.get("Content-Type");
var z = null;
c.autoInstrument.networkResponseHeaders && (z = c.fetchHeaders(U.headers, c.autoInstrument.networkResponseHeaders));
var X = null;
return c.autoInstrument.networkResponseBody && typeof U.text == "function" && (X = U.clone().text()),
(z || X) && (P.response = {},
X && (typeof X.then == "function" ? X.then(function(R) {
R && c.isJsonContentType(P.response_content_type) ? P.response.body = c.scrubJson(R) : P.response.body = R
}) : P.response.body = X),
z && (P.response.headers = z)),
c.errorOnHttpStatus(P),
U
})
The network request that returns the error send this data as the body:
{"data":{"type":"item","attributes":{"call_out_text":null,"content":[],"curation_level":"editorial","custom_seo_settings":null,"expiration_datetime":null,"landing_url":null,"offer_type":null,"sidebar_zone":null,"url":"null","last_verified_datetime":null,"offer_title":null,"rank":null,"related":null,"secondary_call_out":null,"title":"","vendor":null,"author":null,"brief_headline":"null: null","image":null,"monetized_url":null,"rank_override":null,"shipping_text":null,"coupons":[],"hotness":null,"price":-1,"tags":null,"shipping_price":-1,"system_facets":null,"comparison_price":-1,"external_associations":[],"legacy_id":null,"product_categories":null,"product_brand":null,"most_recent_sort_calculated_score":null,"featured_sort_calculated_score":null},"relationships":{"item_type":{"data":{"type":"item_type","id":"2031528"}}}}}
The response from the endpoint (with the 422 error):
{
"data": [
{
"id": "171810",
"type": "api_error",
"attributes": {
"code": "INVALID_FIELD",
"details": {
"field": "author",
"field_id": "10489107",
"field_label": "Author",
"field_type": "link",
"code": "VALIDATION_REQUIRED",
"options": {}
}
}
},
{
"id": "b9a908",
"type": "api_error",
"attributes": {
"code": "INVALID_FIELD",
"details": {
"field": "call_out_text",
"field_id": "10413077",
"field_label": "Call Out",
"field_type": "string",
"code": "VALIDATION_REQUIRED",
"options": {}
}
}
},
{
"id": "e26cfa",
"type": "api_error",
"attributes": {
"code": "INVALID_FIELD",
"details": {
"field": "landing_url",
"field_id": "10428557",
"field_label": "Landing URL",
"field_type": "string",
"code": "VALIDATION_REQUIRED",
"options": {}
}
}
},
{
"id": "35cb0c",
"type": "api_error",
"attributes": {
"code": "INVALID_FIELD",
"details": {
"field": "offer_title",
"field_id": "10429782",
"field_label": "Offer Title",
"field_type": "string",
"code": "VALIDATION_REQUIRED",
"options": {}
}
}
},
{
"id": "b82bf9",
"type": "api_error",
"attributes": {
"code": "INVALID_FIELD",
"details": {
"field": "url",
"field_id": "10428571",
"field_label": "URL",
"field_type": "string",
"code": "VALIDATION_FORMAT",
"options": {
"predefined_pattern": "url"
}
}
}
}
]
}
(Optional) Can you provide a link to the item, model, or project in question?
(Optional) Do you have any sample code you can provide?
- I was wanting to get some quick feedback if this issue is known or if there is a known fix before going through the work of trying to create a simple reproducible example. I know that we have seen this issue early on when using the Computed Fields plugin, but have experienced it in our own private plugins as well that set form values.
- It is worth noting that both the Computed Fields plugin and our private one is setting the field value as suggested in the plugin docs with
ctx.setFieldValue(key, value);
. So, when we set the author in the example shown, it would bectx.setFieldValue('author', '<dato-record-id-for-author>')