Question

我正在使用angular apollo开发一个angular 6应用程序。我面临的问题是，删除某些项目并更新本地阿波罗缓存后，UI不会更新。我正在从服务器中获取约会列表，用户可以删除它们。当他们删除时，我发送了一个变种来删除该项目，但效果很好，然后我想更新本地缓存的查询，以便将其从UI中删除。相关代码如下：

从服务器获取应用程序：

this.appointments$ = this.getArtistByUserIdGQL.watch({userId: params.id}).valueChanges
  .pipe(
    map(results => results.data.user),
    tap(this.setUser.bind(this)),
    switchMap(user => {
      return this.artistAppointmentBookGQL.watch({artistId: user.artist._id, filter}).valueChanges
        .pipe(
          map(results => results.data.artist.appointmentBook)
        );
    }),
    catchError(err => throwError(err))
  );

在用户界面中呈现约会：

  <div class="row appt-book-records"
       *ngIf="(appointments$ | async) as appointments">
    <div *ngIf="(filter$ | async) as filter" class="col">
      <ul class="list-group"
          *ngIf="appointments.length">
        <li *ngFor="let appt of appointments"
            class="appointment-book-item list-group-item list-group-item-action flex-column align-items-start">
            <button (click)="deleteAppt(appt._id)">Click to delete</button>
        </li>
      </ul>
    </div>
  </div>

最后是删除突变：

  deleteAppt(apptId: string) {
    if (confirm('Are you sure you want to delete this appointment?  This can not be undone.')) {
      this.deleteAppointmentGQL.mutate({id: apptId}, {
        update: this.updateCache.bind(this, apptId)
      }).subscribe();
    }
  }

以及实际的更新方法：

 updateCache(apptId, store, {data: {deleteAppointment}}) {
    if (deleteAppointment.success) {
      const vars = {artistId: this.user.artist._id, filter: this.filter},
        query = new StoreManager<ArtistAppointmentBook.Query>(store, this.artistAppointmentBookGQL.document, vars);

      query.data.artist.appointmentBook =
        query.data.artist.appointmentBook.filter(appointment => appointment._id !== apptId);

      query.write();
    }
  }

StoreManager位仅使用新的过滤后的数据列表进行readQuery和writeQuery。据我所知，这是应该做的，因为如果我先离开浏览然后返回视图而无需刷新页面，则它可以正常工作，并且本地缓存显示约会已删除。因此，我在角度UI中是否做错了什么，导致我在更新查询后无法更新？谢谢你的帮助！

角阿波罗-执行查询突变更新后UI不更新

0 个答案: