Comments (8)
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 thepath
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.
Related Issues (20)
- Unwanted validationErrors for null value on nullable type HOT 1
- Validation of nullable input field or argument HOT 5
- What is the license of this package? HOT 1
- Module fails if you're using apollo-server-core and not apollo-server HOT 3
- Stack overflow when calling ValidateDirectiveVisitor.addValidationResolversToSchema() HOT 5
- usage with apollo-server-lambda HOT 5
- Usage with appolo-federation HOT 4
- unwanted `validationError` with nullable field when using @stringLength HOT 3
- validation adds `field: null` when field is not provided HOT 2
- Use with graphql-tools mocking lib HOT 3
- Validation Field Name not available HOT 2
- Stack Overflow on input that has itself as a field
- check if validation directives work at Apollo Gateway HOT 2
- type issue HOT 2
- Doesn't work with apollo server v3 HOT 8
- Make @hasPermissions not check permissions on input values when they are equal to the default value
- validationErrors in info argument? HOT 5
- Apollo 4 and GQL update
- More types and functions could also be exported by lib/index.js
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from apollo-validation-directives.