Recherche de site Web

typescript - Angular, GraphQL et Apollo - Envoyer des données de formulaire avec une souscription GraphQL


Je travaille sur une application Angular avec GraphQL et Apollo qui affiche des données de mon API GraphQL locale.

De plus, je travaille sur un formulaire qui permet aux utilisateurs de publier de nouvelles données sur l'API, mais je ne suis pas sûr d'utiliser la bonne approche ici.

Actuellement, je reçois cette erreur :

ERROR TypeError: Converting circular structure to JSON

Maintenant, laissez-moi vous montrer le code pertinent.

form.component.html

Ceci est le formulaire HTML qui accède à la fonction onSubmit.

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

form.component.ts

Ici, j'utilise this.apollo.mutate pour souscrire de nouvelles données à l'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;
  }

Tout conseil dans la bonne direction serait grandement apprécié, merci !