2

I have two components (siblings). I have also defined a service which is responsible for interacting with my api. However, after I make changes in one component, I expect the changes to reflect in my other component as well. However, for some reason, this doesn't seem to be happening. I am trying to figure out whether I am missing something. I am trying to call the onCommit() function in model.component.ts which pushes data through a graphql mutation. The graphql subscription is getting called on the client due to the data change, however the dashboard.component.ts is not reflecting that. Upon refreshing the dashboard view I can, however, see the changes.

Am I doing something wrong?

model-service.service.ts

  import { Injectable } from '@angular/core';
  // import { DEMO_MODELS } from './mock-models';

  import { urlsObject } from '../../config/urls';
  import { Observable } from 'rxjs/Rx';
  // import {asObservable} from "./asObservable";
  import { Subject } from 'rxjs/Subject';
  import { BehaviorSubject } from 'rxjs/BehaviorSubject';
  import { Http, Response, Headers, RequestOptions } from '@angular/http';
  import 'rxjs/add/operator/toPromise';

  import gql from 'graphql-tag';
  import { Apollo } from 'apollo-angular';

  import {
    ModelClass
  } from './models/model-class';

  import {
    userModelsQuery,
    userModelsQueryResponse,
    createNewModelMutation
  } from './queries/userModels';

  @Injectable()
  export class ModelService {
    private _models: BehaviorSubject<ModelClass[]>;

    constructor(private apollo: Apollo) {
      this.loadInitialData();
      this.monitorData();
      this._models = <BehaviorSubject<ModelClass[]>>new BehaviorSubject([]);
    }

    get models() {
      return this._models.asObservable();
    }

    monitorData() {
      this.apollo.subscribe({
        query: gql`
          subscription {
            getModelChanges{
              _id
              name
              type
              train_status
              deploy_status
              data_path
              description
              created_at
              updated_at
            }
          }
        `
      }).subscribe((data) => {
        this._models.next(data.getModelChanges);
      })
    }

    loadInitialData() {
      this.apollo.watchQuery<userModelsQueryResponse>({
        query: userModelsQuery
      }).subscribe(({data}) => {
        this._models.next(data["getUserModels"]);
      });
    }

    createNewModel(temp: any){
      this.apollo.mutate({
        mutation: createNewModelMutation,
        variables: {
          model: temp
        }
      }).subscribe(({data}) => {
        console.log('Mutation Response: ' + JSON.stringify(data));
        // this.getModels();
        this.loadInitialData();
      });
    }
  }

dashboard.component.ts

  ngOnInit() {
  this.apollo.watchQuery<initStatusQueryResponse>({
    query: initStatusQuery
  }).subscribe(({data}) => {
    this.coldStart = data["getInitStatus"].cold_start;
  });

  this.models = this.modelservice.models;

  this.apollo.subscribe({
    query: gql`
      subscription {
        getModelChanges{
          _id
          name
          type
          train_status
          deploy_status
          data_path
          description
          created_at
          updated_at
        }
      }
    `
  }).subscribe((data) => {
    console.log("DASHBOARD UPDATE");
    console.log("CREATED: " + JSON.stringify(data.getModelChanges));

    this.models = this.modelservice.models;
  });

models.component.ts

  onCommit(b: boolean): void {
    this.wizardCommitBool = b;
    if (this.wizardCommitBool == true){
    console.log("SUBMITTING: " + JSON.stringify(this.temp_new_ml_model));
    this.modelservice.createNewModel(this.temp_new_ml_model);
    }
  }

  constructor(
    private router: Router,
    private modelservice: ModelService,
    private route: ActivatedRoute,
    private location: Location,
    private initService: InitService,
    private reversePipe: ReversePipe,
    private apollo: Apollo
  ) {}

  ngOnInit() {
    this.models = this.modelservice.models;
  }
cyberbeast
  • 678
  • 1
  • 12
  • 30

0 Answers0