Wie kann eine graphql-Mutation eine von Apollo Client beobachtete Abfrage automatisch aktualisieren?

Question

hat vor kurzem angefangen, mit graphQL und Apollo - apollo-client herumzuspielen.

Ich baute einen Web-Service über graphQL und es funktioniert gut. Das einzige Problem, mit dem ich konfrontiert bin, ist auf der Client-Seite des Projekts. Zum Beispiel (siehe Code unten), nach dem Ausführen von createVideo() die data Eigenschaft meiner Komponente, die eine beobachtbare ist, die die Abfrage nicht automatisch aktualisiert und apollo.query manuell auf den Callback aufrufen scheint nicht zu nehmen Jeder Effekt, da die Abfrage die zwischengespeicherten Ergebnisse zurückgibt, nicht die vom Server zurückgegebenen Ergebnisse.

Fehle ich etwas?

---

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

ich es herausgefunden. Apollo-Client standardmäßig zwischenspeichert unsere Abfragen und erneute Ausführung der gleichen Abfrage wird natürlich die Ergebnisse aus dem Cache nicht vom Server zurückgeben.

Natürlich, da ich eine Mutation gemacht habe, um einen neuen Datensatz zu erstellen, würde ich erwarten, dass der Server den Datensatz automatisch aktualisiert, was nicht der Fall war.

um dieses Problem zu lösen, ich mit der Idee kam meine Anfrage vom Erfolg Rückruf unserer createVideo Mutation wieder lief, aber dieses Mal hat ich eine spezielle Option hinzufügen genannt fetchPolicy, die folgenden Werte unterstützt:

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

endlich meine holen Abfrage sieht wie folgt aus:

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

Bonus-Tipp:

Eine weitere interessante Funktion über Apollo ist, dass Sie ein Pooling Intervall wie dies nur festlegen können, damit Ihre Daten immer synchron mit dem Server

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