I am working on an Angular app with GraphQL & Apollo that displays data from my local GraphQL API.
Additionally, I am working on a form that lets users post new data to the API but I'm not sure if I'm using the correct approach here.
Currently I am getting this error:
ERROR TypeError: Converting circular structure to JSON
Now, let me show you the relevant code.
form.component.html
This is the HTML-form which accesses the onSubmit-Function.
<button type="submit" (click)="onSubmit()" [disabled]="!personForm.valid" id="buttonSubmit" mat-raised-button color="accent"class="floated">Send</button>
form.component.ts
Here I use this.apollo.mutate to subscribe new data to the API
onSubmit(formDirective)
{
let surname = this.personForm.get('surname');
let name = this.personForm.get('name');
let email = this.personForm.get('email');
let status = this.personForm.get('status');
let activity = this.personForm.get('activity');
this.apollo.mutate<CreateUserMutationResponse>({
mutation: CREATE_USER_MUTATION,
variables: {
surname: surname,
name: name,
email: email,
status: status,
activity: activity
}
}).subscribe((response) => {
});
console.log('submitted');
}
types.ts
export type User = {
surname: string;
name: string;
email: string;
status: string;
activity: string;
}
export type Query = {
users: User[];
}
export const CREATE_USER_MUTATION = gql`
mutation CreateUserMutation($surname: String!, $name: String!, $email: String!, $status: String!, $activity: String!) {
createUser(surname: $surname, name: $name, email: $email, status: $status, activity: $activity) {
surname
name
email
status
activity
}
}
`;
export interface CreateUserMutationResponse {
createUser: User;
}
Any pointers in the right direction would be much appreciated, thank you!