How can set custom error message for directives ? about apollo-validation-directives HOT 8 CLOSED

you should never map the server errors directly to the user interface. Please use the extensions block to get an enum-like and map to the UI. Also, don't assume the error is related to some field, instead check the path.

Example: run the yarn example:value-validation with the following query:

{ throwingIntRangeExample(arg: 101) { arg }  }

And check the result (shortened for brevity):

{
  "errors": [
    {
      "message": "More than 10", // <--- this is more internal, to developers
      "locations": [ // <--- so as this one
        {
          "line": 1,
          "column": 3
        }
      ],
      "path": [
        "throwingIntRangeExample"  // <--- use this and 'path' below to map to the actual UI element
      ],
      "extensions": {
        "code": "GRAPHQL_VALIDATION_FAILED",  // <--- use this to map to the UI error message
        "validation": {
          "path": [
            "arg" // <--- use this in addition to the other path to map to the UI element
          ]
        },
        "exception": {
          "validationDirectiveShouldThrow": true,
          "stacktrace": [ /* ... */]
        }
      }
    }
  ],
  "data": {
    "throwingIntRangeExample": null
  }
}

What maybe we could do to help UI to present better results is to use a specific code to each directive, so this one would be GRAPHQL_VALIDATION_FAILED_OVER_LIMIT.

from apollo-validation-directives.

maybe this specific bit could be in the extension block, under validation, in addition to the path element.

from apollo-validation-directives.

maybe this specific bit could be in the extension block, under validation, in addition to the path element.

this is my problem : "More than 10" , I want to translate into languages other than English !
if you provide something like :
@stringLength(min: 5, max: 10,messageMin:"msg for min",messageMax:"the other msg for max",defaultMessage:"for both")

from apollo-validation-directives.

Ty, I did this for making custom error as u said :

const formatError = (error) => {
    let { message, extensions: { code, validation },path } = error
    let errObj = {
        message,
        path,
        code,
        ViladationPath: validation.path,
        
    }

and its show me :

{
  "errors": [
    {
      "message": "String Length is Less than 10",
      "path": [
        "SomeQuery"
      ],
      "code": "GRAPHQL_VALIDATION_FAILED",
      "ViladationPath": [
        "input",
        "SomeInput"
      ]
    }
  ],
  "data": {
    "SomeQuery": null
  }
}

but how translate the message string ?
And why we need the locations ?

from apollo-validation-directives.

you will need to handle i18n in your own project, but it would be based on code, not message. You can ignore message in your user interface (it's meant to developers).

from apollo-validation-directives.

@Ali-CFD-Alex I'll reopen it so we can provide more information, in addition to code, also show the failed directive and its arguments. With that you can more easily map to your UI.

As for locations, it's also meant to developers. Will help UI (ie: GraphQL Playground) to point exactly where the query failed).

from apollo-validation-directives.

and more explicitly, in your system you'd do something like:

const validationErrorFormatting = {
   range: (fieldName, actualValue, args) => {
     if (args.min !== undefined && actualValue < args.min) {
        return yourI18NArgs.translate("%s is below minimum value %s", fieldName, args.min);
     } else if (args.max !== undefined && actualValue > args.max) {
        return yourI18NArgs.translate("%s is above maximum value %s", fieldName, args.max);
    }
 },
 listLength: ...
 pattern: ...
};


// in your error handling:
   if (_.isEqual(error.path, ["someQueryOrMutation", "path", "here"])) {
      const { extensions = {} } = error;
      const fieldName = 'your UI field'; // this is something you'd have to map manually
      const actualValue = ...; // you also need to get the field value
      if (extensions.code === 'GRAPHQL_VALIDATION_FAILED') {
         const { validation } = extensions;
         const { directive, args } = validation; // these are currently missing, we should add to help UI
         const message = validationErrorFormatting[directive](fieldName, actualValue, args); // call your i18n stuff
         presentErrorMessage(message); // your code

from apollo-validation-directives.

I hope it's clear now, let's close it. Reopen if there are any remaining questions

from apollo-validation-directives.