How does a graphql mutation automatically update a query viewed by Apollo Client?

Question

recently started playing with the schedule and Apollo - apollo-client.

I built a web service on top of the graph and it works just fine. The only problem I encountered is the client side of the project. For example (see the code below), after running createVideo (), the property of datamy component, which is observable, that watches the request, is not updated automatically, and calling apollo.query manually on the callback does not look to get any effect, because the request returns cached results, not the ones indicated on the server.

Did I miss something?

---

app.component.ts
  import {Component, OnInit} from '@angular/core';
  import {Apollo, ApolloQueryObservable} from 'apollo-angular';
  import 'rxjs/Rx';
  import gql from 'graphql-tag';

  // http://dev.apollodata.com/angular2/mutations.html
  const NewVideoQuery = gql`
    mutation AddVideoQuery($title: String!,$duration: Int!, $watched: Boolean!){
      createVideo(video: { title: $title, duration: $duration, watched: $watched } ){
        id,
        title
      }
    }
  `;
  const VideoQuery = gql`
      {
          videos {
              id,
              title
          }
      }
  `;
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    data: ApolloQueryObservable<any>;
    video: any = {};

    constructor(private apollo: Apollo) {
    }

    ngOnInit() {
      this.data = this.apollo.watchQuery({query: VideoQuery});
    }

    createVideo() {
      /**
       * This will send a mutate query to the server.
       */
      // @todo After running the mutate, the watch query doesn't refresh
      this.apollo.mutate({
        mutation: NewVideoQuery,
        variables: {
          'title': this.video.title || 'Some Video' + Math.floor(Math.random() * 10),
          'duration': 123213,
          'watched': true
        }
      }).subscribe((afterMutation) => {
        console.log(afterMutation);
        // This fires but query doesn't hit the server since it coming from cache.

        // @todo Not even by re-running it here
        this.apollo.query({query: VideoQuery})
          .subscribe((data) => {
            console.log(data);
          });
      }, (err) => alert(err));
    }
  }

---

//app.component.html

  <div *ngFor="let x of data | async | select: 'videos'">
   <div><b>{{x.id}}</b>{{x.title}}</div>
  </div>

  <label>
    Title
    <input type="text" [(ngModel)]="video.title">
  </label>

  <button (click)="createVideo()">{{title}}</button>

Answer 1

. Apollo-client , , .

, , , , .

, createVideo, fetchPolicy, :

'cache-first' | 'cache-and-network' | 'network-only' | 'cache-only' | 'standby'

, :

this.apollo.query({query: VideoQuery, fetchPolicy: 'network-only'})
.subscribe(()=>{ console.log('refresh done, our watchQuery will update') })

:

Apollo , ,

this.data = this.apollo.watchQuery({query: VideoQuery, pollInterval: 10000});

Answer 2

fetchPolicy: "cache-and-network", , , , , . Apollo Fetch → https://medium.com/@galen.corey/understanding-apollo-fetch-policies-705b5ad71980