Angular apollo - пользовательский интерфейс не обновляется после выполнения мутации запроса - PullRequest
Новая
       6

Angular apollo - пользовательский интерфейс не обновляется после выполнения мутации запроса

0 голосов
/ 18 ноября 2018

Я работаю над угловым 6 приложением, используя угловой apollo. Проблема, с которой я сталкиваюсь, заключается в том, что пользовательский интерфейс не обновляется после удаления некоторых элементов и обновления локального кэша Apollo. Я получаю список встреч с сервера, и пользователь может удалить их. Когда они удаляются, я посылаю мутацию для удаления элемента, которая работает нормально, затем я хочу обновить локальный кэшированный запрос, чтобы он был удален из пользовательского интерфейса. Соответствующий код выглядит так:

Получение приложений с сервера: 

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 с новым отфильтрованным списком данных. Насколько я могу судить, это делает то, что должно быть, потому что, если я ухожу, а затем возвращаюсь к представлению без обновления страницы, это работает, и локальный кеш показывает, что встреча была удалена. Итак, я делаю что-то не так в своем угловом интерфейсе, который не обновляет его после обновления запроса? Спасибо за любую помощь!

...