diff --git a/js/src/types/errors.model.ts b/js/src/types/errors.model.ts new file mode 100644 index 000000000..1f8dcf7ea --- /dev/null +++ b/js/src/types/errors.model.ts @@ -0,0 +1,16 @@ +import { Operation, NextLink } from "@apollo/client/core"; +import { NetworkError } from "@apollo/client/errors"; +import { ExecutionResult, GraphQLError } from "graphql"; + +export declare class AbsintheGraphQLError extends GraphQLError { + field?: string; +} +export declare type AbsintheGraphQLErrors = ReadonlyArray; + +export interface ErrorResponse { + graphQLErrors?: AbsintheGraphQLErrors; + networkError?: NetworkError; + response?: ExecutionResult; + operation: Operation; + forward: NextLink; +} diff --git a/js/src/views/Group/Create.vue b/js/src/views/Group/Create.vue index 6ecfa1959..6be2b3ab7 100644 --- a/js/src/views/Group/Create.vue +++ b/js/src/views/Group/Create.vue @@ -60,7 +60,12 @@ /> - + @@ -102,7 +107,7 @@ import { convertToUsername } from "../../utils/username"; import PictureUpload from "../../components/PictureUpload.vue"; import { CONFIG } from "@/graphql/config"; import { IConfig } from "@/types/config.model"; -import { ErrorResponse } from "@apollo/client/link/error"; +import { ErrorResponse } from "@/types/errors.model"; import { ServerParseError } from "@apollo/client/link/http"; import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core"; @@ -135,6 +140,8 @@ export default class CreateGroup extends mixins(IdentityEditionMixin) { errors: string[] = []; + fieldErrors: Record = {}; + usernameWithDomain = usernameWithDomain; async createGroup(): Promise { @@ -244,11 +251,17 @@ export default class CreateGroup extends mixins(IdentityEditionMixin) { ); } } - this.errors.push( - ...(err.graphQLErrors || []).map( - ({ message }: { message: string }) => message - ) - ); + err.graphQLErrors?.forEach((error) => { + if (error.field) { + if (Array.isArray(error.message)) { + this.fieldErrors[error.field] = error.message[0]; + } else { + this.fieldErrors[error.field] = error.message; + } + } else { + this.errors.push(error.message); + } + }); } }