typescript - Angular, GraphQL dan Apollo - Hantar Data Borang Dengan Langganan GraphQL


Saya sedang membangunkan aplikasi Angular dengan GraphQL & Apollo yang memaparkan data dari API GraphQL tempatan saya.

Selain itu, saya sedang bekerja pada satu borang yang membolehkan pengguna menghantar data baru ke API tetapi saya tidak pasti sama ada saya menggunakan pendekatan yang betul di sini.

Pada masa ini saya mendapat ralat ini:

ERROR TypeError: Converting circular structure to JSON

Sekarang, biar saya tunjukkan kepada anda kod yang berkaitan.

form.component.html

Ini adalah borang HTML yang mengakses Fungsi onSubmit.

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

form.component.ts

Di sini saya menggunakan this.apollo.mutate untuk melanggan data baru ke 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;
  }

Sebarang petunjuk ke arah yang betul akan sangat dihargai, terima kasih!