Vue-apollo: Displaying validation errors

[sadhakbj]

I am using Laravel as my backend framework and using Lighthouse PHP as a client for Graphql.

I am submitting a form and wish to get the validation errors and display the errors accordingly.
I am unsure how to achieve it.

My code looks like below:

 handleSubmit() {
      const values = this.user;
      this.$apollo
        .mutate({
          mutation: gql`
            mutation($name: String, $email: String, $password: String) {
              createUser(name: $name, email: $email, password: $password) {
                id
                name
                email
              }
            }
          `,
          variables: values
        })
        .then(response => {
          console.log(response.errors);
          this.$router.push("/users");
        })
        .catch(error => {
          console.log(typeof error); // returns object
          console.log(error);
        });
    }

In case of error my console returns:

app.js:7745 Error: GraphQL error: Validation failed for the field [createUser].
    at new ApolloError (app.js:3488)
    at Object.next (app.js:2383)
    at notifySubscription (app.js:65900)
    at onNotify (app.js:65935)
    at SubscriptionObserver.next (app.js:65989)
    at app.js:4135

My network tab shows following response from the server:

{  
   "errors":[  
      {  
         "message":"Validation failed for the field [createUser].",
         "extensions":{  
            "validation":{  
               "email":[  
                  "The email has already been taken."
               ]
            },
            "category":"validation"
         },
         "locations":[  
            {  
               "line":2,
               "column":3
            }
         ],
         "path":[  
            "createUser"
         ],
         "trace":[  
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/nuwave\/lighthouse\/src\/Execution\/ErrorBuffer.php",
               "line":74,
               "call":"Nuwave\\Lighthouse\\Execution\\ErrorBuffer::Nuwave\\Lighthouse\\Execution\\{closure}('Validation failed for the field [createUser].', instance of Nuwave\\Lighthouse\\Execution\\ErrorBuffer)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/nuwave\/lighthouse\/src\/Execution\/ErrorBuffer.php",
               "line":111,
               "call":"Nuwave\\Lighthouse\\Execution\\ErrorBuffer::resolveException('Validation failed for the field [createUser].', instance of Nuwave\\Lighthouse\\Execution\\ErrorBuffer)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/nuwave\/lighthouse\/src\/Schema\/Factories\/FieldFactory.php",
               "line":526,
               "call":"Nuwave\\Lighthouse\\Execution\\ErrorBuffer::flush('Validation failed for the field [createUser].')"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/nuwave\/lighthouse\/src\/Schema\/Factories\/FieldFactory.php",
               "line":512,
               "call":"Nuwave\\Lighthouse\\Schema\\Factories\\FieldFactory::flushErrorBufferIfHasErrors()"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/nuwave\/lighthouse\/src\/Schema\/Factories\/FieldFactory.php",
               "line":226,
               "call":"Nuwave\\Lighthouse\\Schema\\Factories\\FieldFactory::validateArgumentsBeforeValidationDirectives(null, array(3), instance of Nuwave\\Lighthouse\\Schema\\Context, instance of GraphQL\\Type\\Definition\\ResolveInfo)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/webonyx\/graphql-php\/src\/Executor\/ReferenceExecutor.php",
               "line":613,
               "call":"Nuwave\\Lighthouse\\Schema\\Factories\\FieldFactory::Nuwave\\Lighthouse\\Schema\\Factories\\{closure}(null, array(3), instance of Nuwave\\Lighthouse\\Schema\\Context, instance of GraphQL\\Type\\Definition\\ResolveInfo)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/webonyx\/graphql-php\/src\/Executor\/ReferenceExecutor.php",
               "line":543,
               "call":"GraphQL\\Executor\\ReferenceExecutor::resolveOrError(instance of GraphQL\\Type\\Definition\\FieldDefinition, instance of GraphQL\\Language\\AST\\FieldNode, instance of Closure, null, instance of Nuwave\\Lighthouse\\Schema\\Context, instance of GraphQL\\Type\\Definition\\ResolveInfo)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/webonyx\/graphql-php\/src\/Executor\/ReferenceExecutor.php",
               "line":469,
               "call":"GraphQL\\Executor\\ReferenceExecutor::resolveField(GraphQLType: Mutation, null, instance of ArrayObject(1), array(1))"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/webonyx\/graphql-php\/src\/Executor\/ReferenceExecutor.php",
               "line":894,
               "call":"GraphQL\\Executor\\ReferenceExecutor::GraphQL\\Executor\\{closure}(array(0), 'createUser')"
            },
            {  
               "call":"GraphQL\\Executor\\ReferenceExecutor::GraphQL\\Executor\\{closure}(array(0), 'createUser')"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/webonyx\/graphql-php\/src\/Executor\/ReferenceExecutor.php",
               "line":896,
               "function":"array_reduce(array(1), instance of Closure, array(0))"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/webonyx\/graphql-php\/src\/Executor\/ReferenceExecutor.php",
               "line":483,
               "call":"GraphQL\\Executor\\ReferenceExecutor::promiseReduce(array(1), instance of Closure, array(0))"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/webonyx\/graphql-php\/src\/Executor\/ReferenceExecutor.php",
               "line":253,
               "call":"GraphQL\\Executor\\ReferenceExecutor::executeFieldsSerially(GraphQLType: Mutation, null, array(0), instance of ArrayObject(1))"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/webonyx\/graphql-php\/src\/Executor\/ReferenceExecutor.php",
               "line":207,
               "call":"GraphQL\\Executor\\ReferenceExecutor::executeOperation(instance of GraphQL\\Language\\AST\\OperationDefinitionNode, null)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/webonyx\/graphql-php\/src\/Executor\/Executor.php",
               "line":155,
               "call":"GraphQL\\Executor\\ReferenceExecutor::doExecute()"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/webonyx\/graphql-php\/src\/GraphQL.php",
               "line":158,
               "call":"GraphQL\\Executor\\Executor::promiseToExecute(instance of GraphQL\\Executor\\Promise\\Adapter\\SyncPromiseAdapter, instance of GraphQL\\Type\\Schema, instance of GraphQL\\Language\\AST\\DocumentNode, null, instance of Nuwave\\Lighthouse\\Schema\\Context, array(3), null, null)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/webonyx\/graphql-php\/src\/GraphQL.php",
               "line":90,
               "call":"GraphQL\\GraphQL::promiseToExecute(instance of GraphQL\\Executor\\Promise\\Adapter\\SyncPromiseAdapter, instance of GraphQL\\Type\\Schema, 'mutation ($name: String, $email: String, $password: String) {\n  createUser(name: $name, email: $email, password: $password) {\n    id\n    name\n    email\n    __typename\n  }\n}', null, instance of Nuwave\\Lighthouse\\Schema\\Context, array(3), null, null, array(29))"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/nuwave\/lighthouse\/src\/GraphQL.php",
               "line":166,
               "call":"GraphQL\\GraphQL::executeQuery(instance of GraphQL\\Type\\Schema, 'mutation ($name: String, $email: String, $password: String) {\n  createUser(name: $name, email: $email, password: $password) {\n    id\n    name\n    email\n    __typename\n  }\n}', null, instance of Nuwave\\Lighthouse\\Schema\\Context, array(3), null, null, array(29))"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/nuwave\/lighthouse\/src\/Support\/Http\/Controllers\/GraphQLController.php",
               "line":95,
               "call":"Nuwave\\Lighthouse\\GraphQL::executeQuery('mutation ($name: String, $email: String, $password: String) {\n  createUser(name: $name, email: $email, password: $password) {\n    id\n    name\n    email\n    __typename\n  }\n}', instance of Nuwave\\Lighthouse\\Schema\\Context, array(3))"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/nuwave\/lighthouse\/src\/Support\/Http\/Controllers\/GraphQLController.php",
               "line":77,
               "call":"Nuwave\\Lighthouse\\Support\\Http\\Controllers\\GraphQLController::execute(instance of Illuminate\\Http\\Request, instance of Nuwave\\Lighthouse\\Schema\\Context)"
            },
            {  
               "call":"Nuwave\\Lighthouse\\Support\\Http\\Controllers\\GraphQLController::query(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/Controller.php",
               "line":54,
               "function":"call_user_func_array(array(2), array(1))"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/ControllerDispatcher.php",
               "line":45,
               "call":"Illuminate\\Routing\\Controller::callAction('query', array(1))"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/Route.php",
               "line":219,
               "call":"Illuminate\\Routing\\ControllerDispatcher::dispatch(instance of Illuminate\\Routing\\Route, instance of Nuwave\\Lighthouse\\Support\\Http\\Controllers\\GraphQLController, 'query')"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/Route.php",
               "line":176,
               "call":"Illuminate\\Routing\\Route::runController()"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/Router.php",
               "line":682,
               "call":"Illuminate\\Routing\\Route::run()"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/Pipeline.php",
               "line":30,
               "call":"Illuminate\\Routing\\Router::Illuminate\\Routing\\{closure}(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Pipeline\/Pipeline.php",
               "line":104,
               "call":"Illuminate\\Routing\\Pipeline::Illuminate\\Routing\\{closure}(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/Router.php",
               "line":684,
               "call":"Illuminate\\Pipeline\\Pipeline::then(instance of Closure)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/Router.php",
               "line":659,
               "call":"Illuminate\\Routing\\Router::runRouteWithinStack(instance of Illuminate\\Routing\\Route, instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/Router.php",
               "line":625,
               "call":"Illuminate\\Routing\\Router::runRoute(instance of Illuminate\\Http\\Request, instance of Illuminate\\Routing\\Route)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/Router.php",
               "line":614,
               "call":"Illuminate\\Routing\\Router::dispatchToRoute(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Foundation\/Http\/Kernel.php",
               "line":176,
               "call":"Illuminate\\Routing\\Router::dispatch(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/Pipeline.php",
               "line":30,
               "call":"Illuminate\\Foundation\\Http\\Kernel::Illuminate\\Foundation\\Http\\{closure}(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/fideloper\/proxy\/src\/TrustProxies.php",
               "line":57,
               "call":"Illuminate\\Routing\\Pipeline::Illuminate\\Routing\\{closure}(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Pipeline\/Pipeline.php",
               "line":151,
               "call":"Fideloper\\Proxy\\TrustProxies::handle(instance of Illuminate\\Http\\Request, instance of Closure)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/Pipeline.php",
               "line":53,
               "call":"Illuminate\\Pipeline\\Pipeline::Illuminate\\Pipeline\\{closure}(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Foundation\/Http\/Middleware\/TransformsRequest.php",
               "line":31,
               "call":"Illuminate\\Routing\\Pipeline::Illuminate\\Routing\\{closure}(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Pipeline\/Pipeline.php",
               "line":151,
               "call":"Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest::handle(instance of Illuminate\\Http\\Request, instance of Closure)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/Pipeline.php",
               "line":53,
               "call":"Illuminate\\Pipeline\\Pipeline::Illuminate\\Pipeline\\{closure}(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Foundation\/Http\/Middleware\/TransformsRequest.php",
               "line":31,
               "call":"Illuminate\\Routing\\Pipeline::Illuminate\\Routing\\{closure}(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Pipeline\/Pipeline.php",
               "line":151,
               "call":"Illuminate\\Foundation\\Http\\Middleware\\TransformsRequest::handle(instance of Illuminate\\Http\\Request, instance of Closure)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/Pipeline.php",
               "line":53,
               "call":"Illuminate\\Pipeline\\Pipeline::Illuminate\\Pipeline\\{closure}(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Foundation\/Http\/Middleware\/ValidatePostSize.php",
               "line":27,
               "call":"Illuminate\\Routing\\Pipeline::Illuminate\\Routing\\{closure}(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Pipeline\/Pipeline.php",
               "line":151,
               "call":"Illuminate\\Foundation\\Http\\Middleware\\ValidatePostSize::handle(instance of Illuminate\\Http\\Request, instance of Closure)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/Pipeline.php",
               "line":53,
               "call":"Illuminate\\Pipeline\\Pipeline::Illuminate\\Pipeline\\{closure}(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Foundation\/Http\/Middleware\/CheckForMaintenanceMode.php",
               "line":62,
               "call":"Illuminate\\Routing\\Pipeline::Illuminate\\Routing\\{closure}(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Pipeline\/Pipeline.php",
               "line":151,
               "call":"Illuminate\\Foundation\\Http\\Middleware\\CheckForMaintenanceMode::handle(instance of Illuminate\\Http\\Request, instance of Closure)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Routing\/Pipeline.php",
               "line":53,
               "call":"Illuminate\\Pipeline\\Pipeline::Illuminate\\Pipeline\\{closure}(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Pipeline\/Pipeline.php",
               "line":104,
               "call":"Illuminate\\Routing\\Pipeline::Illuminate\\Routing\\{closure}(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Foundation\/Http\/Kernel.php",
               "line":151,
               "call":"Illuminate\\Pipeline\\Pipeline::then(instance of Closure)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/vendor\/laravel\/framework\/src\/Illuminate\/Foundation\/Http\/Kernel.php",
               "line":116,
               "call":"Illuminate\\Foundation\\Http\\Kernel::sendRequestThroughRouter(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/public\/index.php",
               "line":55,
               "call":"Illuminate\\Foundation\\Http\\Kernel::handle(instance of Illuminate\\Http\\Request)"
            },
            {  
               "file":"\/home\/bijaya\/.config\/composer\/vendor\/cpriego\/valet-linux\/server.php",
               "line":204,
               "function":"require('\/home\/bijaya\/Projects\/Learn\/laravel-graphql-vue\/public\/index.php')"
            }
         ]
      }
   ],
   "data":{  
      "createUser":null
   }
}

Is there any way that I can display the validation errors / errors ?

[itapingu]

How did you resolved this?
i'm still getting back the printed out message and i'm unable to intercept the data returned via the server.

[sadhakbj]

Here is my solution:

handleSubmit() {
      const values = this.user;
      this.$apollo
        .mutate({
          mutation: gql`
            mutation($name: String, $email: String, $password: String) {
              createUser(name: $name, email: $email, password: $password) {
                id
                name
                email
              }
            }
          `,
          variables: values
        })
        .then(response => {
          this.$router.push("/users");
        })
        .catch(error => {
          let { graphQLErrors } = error;
          if (graphQLErrors[0].extensions.category === "validation") {
            this.validationErrors = graphQLErrors[0].extensions.validation;
          }
        });
    }

[itapingu]

Thanks, i discovered too later on while trying that even if a console.log is returned you still have access to the error.graphQLErrors object where you can extract the data you need.