Сервис для индикатора выполнения в Vue

Question

В Angular У меня обычно есть специальный класс, который отвечает за индикатор выполнения. Я могу перехватывать все HTTP-запросы и запросы маршрутизации, как это, и это даже работает для запросов GraphQL:

служба загрузки-индикатора

import { Injectable } from '@angular/core';
import { Router, NavigationStart, NavigationCancel, NavigationEnd, NavigationError } from '@angular/router';
import { Subject, BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoadingIndicatorService {

  loading: BehaviorSubject<boolean> = new BehaviorSubject(false);

  constructor(private router: Router) {
    this.router.events.subscribe((event) => {

      switch (true) {
        case event instanceof NavigationStart: {
          this.show();
          break;
        }
        case event instanceof NavigationEnd:
        case event instanceof NavigationCancel:
        case event instanceof NavigationError: {

          this.hide();
          break;
        }


        default:
          break;
      }

    });
  }

  show() {
    this.loading.next(true);
  }

  hide() {
    this.loading.next(false);
  }
}

служба загрузки-перехватчика

import { Injectable } from '@angular/core';
import { LoadingIndicatorService } from './loading-indicator.service';
import {
  HttpErrorResponse,
  HttpResponse,
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class LoadingInterceptorService implements HttpInterceptor {

  constructor(private loadingService: LoadingIndicatorService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    this.loadingService.show();

    return next.handle(req)
      .pipe(
        finalize(() => this.loadingService.hide())
      );

  }
}

Можно ли перехватывать запросы HTTP GraphQL в Vue глобально, как в Angular, поэтому одно место и один класс отвечают за эту функциональность? Потому что сейчас мне нужно проверять loading для каждого запроса в каждом компоненте и там в каждом компоненте контролировать индикатор выполнения.

Вот как я пытался сделать это сейчас, но, видимо, это не сработало. Я думал, что $apollo - это глобальная переменная, которая контролирует все запросы от всех компонентов

индикатор выполнения. vue

<template>
  <div class="progress-bar-component" v-if="$apollo.loading">
    <div class="bar">{{this.$apollo.loading}}</div>
  </div>
</template>

<script>
export default {
  apollo: {}
};
</script>

<style>
.bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* height: 5px; */
  color: white;
  background-color: brown;
}
</style>

Заранее спасибо!

Answer 1

При настройке экземпляра VueApollo вы можете передать хук watchLoading, который просматривает все запросы:

const apolloProvider = new VueApollo({
  watchLoading (isLoading, countModifier) {
    loading += countModifier
    console.log('Global loading', loading, countModifier)
  },
  //...
})

Свойство задокументировано в Smart Query options :

watchLoading(isLoading, countModifier) - это ловушка, вызываемая при изменении состояния загрузки запроса. Параметр countModifier равен либо 1 при загрузке запроса, либо -1, когда запрос больше не загружается.