How can a graphql mutation automatically refresh a query being watched by Apollo Client?

Question

recently started playing around with graphQL and Apollo - apollo-client.

I built a web service on top of graphQL and it's working just fine. The only issue I'm facing is on the client side of the project. For example (please refer to code below), after running createVideo() the data property of my component which is an observable which is watching the query doesn't refresh automatically and calling apollo.query manually on the callback doesn't seem to take any effect because the query returns the cached results, not the ones from the server.

Am I missing 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's 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

I figured it out. Apollo-client by default caches our queries and re-runing the same query will of course return the results from cache not from the server.

Naturally, because I did a mutation to create a new record I would expect the server to refresh the dataset automatically which was not the case.

To solve this issue I came up with the idea of re-running my query from the success callback of our createVideo mutation but this time I add a special option called fetchPolicy which supports the following values:

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

Finally my fetch query looks like this:

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

Bonus tip:

Another intersting feature about Apollo is that you can set a pooling interval just like this so your data is always in sync with the server

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