Ion-list not refreshed after adding an item in Ionic


#1

The problem is that, after adding an item to the array (name = senders) ,it will not show that an item has been added until I refresh the page.

Page.html

  <ion-list>
    <div *ngFor="let sender of selectedCar.senders">
      <ion-item *ngIf="sender.email !== user?.email" color="white-love" class="user">
        <div *ngIf="sender.firstname?.length>0" class="firstname">{{ sender.firstname }}</div>
        <div [class.email-nofirstname]="!sender.firstname?.length>0" class="email">{{ sender.email }}</div>
        <ion-icon (click)="deleteUser(sender.email)" name="close" item-end></ion-icon>
      </ion-item>
    </div>
    <button ion-item color="white-love" (click)="addUser(email)" class="add-user">
    </button>
  </ion-list>

page.ts(add)

  addUser(email: string, carId: string) {
    return this.graphql.apollo.mutate({
      mutation: addUser,
      variables: {
        email,
        carId,
      },
      update: (store, data) => {
        const box = store.readQuery({ query: getAdminCars })
        box['myCarssSettings'][carId] = data.addUser
        store.writeQuery({ query: getAdmiCars, data: car });
      },
    })
  }

const getAdminCars = gql`
{
  myCarsSettings {
    _id
    name
    senders {
      firstname
      email
    }
  }
}
`