Búsqueda de sitios web

typescript - Angular, GraphQL y Apollo - Enviar datos de formulario con suscripción GraphQL


Estoy trabajando en una aplicación Angular con GraphQL y Apollo que muestra datos de mi API GraphQL local.

Además, estoy trabajando en un formulario que permite a los usuarios publicar nuevos datos en la API, pero no estoy seguro de si estoy usando el enfoque correcto aquí.

Actualmente estoy recibiendo este error:

ERROR TypeError: Converting circular structure to JSON

Ahora, déjame mostrarte el código relevante.

formulario.componente.html

Este es el formulario HTML que accede a la función onSubmit.

 <button type="submit" (click)="onSubmit()" [disabled]="!personForm.valid" id="buttonSubmit" mat-raised-button color="accent"class="floated">Send</button>

form.component.ts

Aquí utilizo this.apollo.mutate para suscribir nuevos datos a la 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;
  }

¡Cualquier indicación en la dirección correcta sería muy apreciada, gracias!