Quel est le problème avec cet abonnement? Je reçois des mises à jour mais la vue n'est pas actualisée

Question

J'essaye de rafraîchir un compteur avec un abonnement fait avec ApolloGraphql. Il travaille presque depuis que je peux voir dans le dev-outil, les données suivantes provenant du serveur sur l'événement:

{ 
    "type": "subscription_data", 
    "id": 0, 
    "payload": { 
    "data": { 
     "dealVoteAdded": { 
     "voteCount": 16, 
     "__typename": "VoteType" 
     } 
    } 
    } 
} 

Avant cet événement, le compteur était 15. Il devrait aller à 16 puisque c'est la nouvelle valeur que je reçois mais rien ne change. La vue n'est jamais actualisée. Pourquoi?

Voici mon code:

ParentComponent

export class DealVoteComponent implements OnInit, OnDestroy { 

    public voteCount$; 
    private voteCounterSub$; 

    @Input() deal: Deal; 

    constructor(private dealService: DealService) { } 

    ngOnInit() { 
    /** 
    * Get update of dealVoteCount 
    */ 
    this.voteCount$ = this.dealService.getDealVote({ 
     externalId: this.deal.externalId 
    }) 
     .map(({data}) => { 
     console.log("voteCount$ data", data); 
     return data.getDealVote.voteCount; 
     }) 

    /** 
    * Subscription of dealVoteCount 
    */ 
    this.voteCounterSub$ = this.dealService.dealVoteAdded({ 
     externalId: this.deal.externalId 
    }).subscribe({ 
     next: (data:any) => { 
     this.voteCount$.updateQuery(prev => { 
      const newCount = { 
      getDealVote: { 
       voteCount: data.dealVoteAdded.voteCount 
      } 
      }; 
      return newCount; 
     }); 
     }, 
     error(err: any): void { 
     console.error('err', err); 
     } 
    }) 
    } 

    ngOnDestroy() { 
    this.voteCounterSub$.unsubscribe(); 
    } 
} 

Voir

<dealtd-deal-vote-counter 
    [voteCount]="voteCount$ | async"> 
</dealtd-deal-vote-counter> 

service

@Injectable() 
export class DealService { 

    constructor(private apollo: Apollo) { } 

    getDealVote(params) { 
    const params = { 
     query: getDealVote, 
     variables: variables 
    }; 
    return this.apollo.watchQuery<any>(params); 
    } 

    dealVoteAdded(data) { 
    const params = { 
     query: dealVoteAdded, 
     variables: data 
    }; 
    return getClient().subscribe(params); 
    } 
} 

schémas

import gql from "graphql-tag"; 

export const VoteCountFragment = { 
    entry: gql` 
    fragment vote on VoteType { 
     voteCount 
     __typename 
    } 
    ` 
}; 

export const dealVoteAdded = gql` 
    subscription dealVoteAdded($externalId: String!) { 
    dealVoteAdded(externalId: $externalId) { 
     ...vote 
    } 
    } 
    ${VoteCountFragment.entry} 
`; 

export const getDealVote = gql` 
    query getDealVote($externalId: String!) { 
    getDealVote(externalId: $externalId) { 
     ...vote 
    } 
    } 
    ${VoteCountFragment.entry} 
`; 

Answer 1

j'utiliser un BehaviorSubject observable dans le service dans ces cas

import {BehaviorSubject} from 'rxjs/BehaviorSubject'; 

let bSubject = new BehaviorSubject(null); 

    getDealVote(params) { 
    const params = { 
     query: getDealVote, 
     variables: variables 
    }; 
     bSubject.next(new value); 
    } 

dans le composant parent

this.voteCount$ = this.dealService.bSubject 

Answer 2

utilisation apollo.subsribe au lieu de getClient().subscribe. apollo.subsribe warps apollo client subsribe avec une zone angulaire.