title: Angular apollo - UI doesn't update after doing a query mutation update
body: <p>I'm working on an angular 6 app, using angular apollo.  The issue I'm facing is that the UI does not update after deleting some items and updating the local apollo cache.  I'm fetching a list of appointments from the server, and the user can delete them.  When they delete I send a mutation to delete the item, which works fine, then I want to update the local cached query so it's removed from the UI.  The relevant code looks like:</p>
  
  <p>Getting the appts from the server:</p>
  
  <pre><code>this.appointments$ = this.getArtistByUserIdGQL.watch({userId: params.id}).valueChanges
    .pipe(
      map(results =&gt; results.data.user),
      tap(this.setUser.bind(this)),
      switchMap(user =&gt; {
        return this.artistAppointmentBookGQL.watch({artistId: user.artist._id, filter}).valueChanges
          .pipe(
            map(results =&gt; results.data.artist.appointmentBook)
          );
      }),
      catchError(err =&gt; throwError(err))
    );
  </code></pre>
  
  <p>Rendering the appointments in the UI:</p>
  
  <pre><code>  &lt;div class="row appt-book-records"
         *ngIf="(appointments$ | async) as appointments"&gt;
      &lt;div *ngIf="(filter$ | async) as filter" class="col"&gt;
        &lt;ul class="list-group"
            *ngIf="appointments.length"&gt;
          &lt;li *ngFor="let appt of appointments"
              class="appointment-book-item list-group-item list-group-item-action flex-column align-items-start"&gt;
              &lt;button (click)="deleteAppt(appt._id)"&gt;Click to delete&lt;/button&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>And finally the delete mutation:</p>
  
  <pre><code>  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();
      }
    }
  </code></pre>
  
  <p>And the actual update method:</p>
  
  <pre><code> updateCache(apptId, store, {data: {deleteAppointment}}) {
      if (deleteAppointment.success) {
        const vars = {artistId: this.user.artist._id, filter: this.filter},
          query = new StoreManager&lt;ArtistAppointmentBook.Query&gt;(store, this.artistAppointmentBookGQL.document, vars);
  
        query.data.artist.appointmentBook =
          query.data.artist.appointmentBook.filter(appointment =&gt; appointment._id !== apptId);
  
        query.write();
      }
    }
  </code></pre>
  
  <p>The StoreManager bits are just doing a readQuery and writeQuery with the new filtered list of data. As far as I can tell this is doing what it should be, because if I navigate away and then back to the view <em>without</em> refreshing the page, it works and the local cache shows that the appointment was deleted.  So, am I doing something wrong in my angular UI that is causing it not to update after I update the query?  Thanks for any help! </p>