Наводим порядок в загрузке данных Angular с помощью резолверов

Всем привет! Сегодня хочу разобрать кейс, с которым сталкивается почти каждый Angular-разработчик на существующем проекте.

Часто в компонентах можно встретить такой код:

public user: User | null = null;
public posts: Post[] | null = null;
public stats: Stats | null = null;

constructor(private readonly apiService: ApiService) {}

public ngOnInit(): void {
    this.apiService.getUser().subscribe((user) => this.user = user);
    this.apiService.getPosts().subscribe((posts) => this.posts = posts);
    this.apiService.getStats().subscribe((stats) => this.stats = stats);
}

Все загрузки данных у нас происходят в ngOnInit, и вот в чем беда: данные загружаются с разной скоростью. В итоге пользователи видят, как на месте блоков с данными появляются скелетоны или лоадеры, и потом контент показывается частями. Это может привести к смещению макета. Даже если интерфейс вроде бы нормальный, появление всплывающего контента все равно портит общее впечатление. Как это исправить? Можно использовать резолверы в Angular. Это такой сервис, который загружает данные перед тем, как активировать маршрут. Это еще и позволяет кэшировать данные, чтобы при повторном переходе они не загружались заново. Мы также можем использовать события маршрутизатора, чтобы сделать общий индикатор загрузки.

Давайте начнем с написания резолвера. Сначала определим DTO, который опишет структуру наших данных:

export interface ApiResolverDto {
  user: User;
  posts: Post[];
  stats: Stats;
}

Теперь сам резолвер:

@Injectable({
  providedIn: 'root'
})
export class ApiResolver implements Resolve<ApiResolverDto> {
  constructor(private readonly apiService: ApiService) {}

  resolve(): Observable<ApiResolverDto> {
    return forkJoin({
      user: this.apiService.getUser(),
      posts: this.apiService.getPosts(),
      stats: this.apiService.getStats()
    });
  }
}

Я использовал forkJoin из RxJS, который ожидает завершения всех Observable и возвращает объект с результатами, ключи которого соответствуют ключам в переданном объекте.

Затем мы используем написанный нами резолвер в конфигурации маршрута:

{
  path: 'home',
  loadComponent: () => import('./home/home.component').then((m) => m.HomeComponent),
  resolve: {
    data: ApiResolver
  },
}

Теперь наш компонент будет выглядеть так:

export class MyPageComponent implements OnInit {
  public user: User;
  public posts: Post[];
  public stats: Stats;

  constructor(private readonly route: ActivatedRoute) {}

  public ngOnInit(): void {
    const data = this.route.snapshot.data['data'] as ApiResolverDto;
    this.user = data.user;
    this.posts = data.posts;
    this.stats = data.stats;
  }
}

Мы забираем загруженные нашим резолвером данные из route.snapshot.data. Это безопасно и не требует отписки, так как резолвер отрабатывает один раз при навигации на маршрут.

Глобальный индикатор загрузки

Показывать лоадер мы можем через флаг isLoading в главном компоненте приложения, подписавшись на события роутера. Важно не забыть отписаться, чтобы избежать утечек памяти.

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="isLoading">Загрузка</div>
    <router-outlet></router-outlet>
  `
})
export class AppComponent implements OnInit, OnDestroy {
  public isLoading = false;
  private routerEventsSub: Subscription;

  constructor(private readonly router: Router) {}

  public ngOnInit(): void {
    this.routerEventsSub = this.router.events.subscribe((event) => {
      if (event instanceof ResolveStart) {
        this.isLoading = true;
      }

      if (event instanceof ResolveEnd) {
        this.isLoading = false;
      }
    });
  }

  public ngOnDestroy(): void {
    this.routerEventsSub.unsubscribe();
  }
}

Кэширование и валидация

Резолвер - идеальное место для кэширования. Вот пример с использованием localStorage:

resolve(): Observable<ApiResolverDto> {
  const cacheKey = 'api-resolver-cache';
  const cachedData = localStorage.getItem(cacheKey);

  if (cachedData) {
    return of(JSON.parse(cachedData));
  }

  return forkJoin({
    user: this.apiService.getUser(),
    posts: this.apiService.getPosts(),
    stats: this.apiService.getStats()
  }).pipe(
    tap(data => {
      localStorage.setItem(cacheKey, JSON.stringify(data));
    })
  );
}

Для инвалидации кэша в нашем примере достаточно удалить ключ по которму мы храним кэш:

 localStorage.removeItem('api-resolver-cache')

Еще один плюс загрузки данных в резолверах это то, что здесь удобно проводить валидацию данных, например, с помощью Zod:

// Определяем схемы Zod для наших данных
const UserSchema = z.object({
  id: z.string(),
  name: z.string(),
});

const PostSchema = z.object({
  id: z.string(),
  title: z.string(),
  body: z.string(),
});

const StatsSchema = z.object({
  views: z.number(),
  likes: z.number(),
});


const ApiResolverDtoSchema = z.object({
  user: UserSchema,
  posts: z.array(PostSchema),
  stats: StatsSchema,
});

resolve(): Observable<ApiResolverDto> {
  return forkJoin({
    user: this.apiService.getUser(),
    posts: this.apiService.getPosts(),
    stats: this.apiService.getStats()
  }).pipe(
    map(data => {
      return ApiResolverDtoSchema.parse(data);
    }),
    catchError((error) => {
      console.error('Ошибка валидации данных Zod:', error);
      this.router.navigate(['/error']);
      return EMPTY;
    })
  );
}

Таким образом, используя резолвер, мы предзагружаем данные до активации маршрута, гарантируя, что весь необходимый контент будет готов к отображению. Это не только избавит наш UI от мигания, при подгрузке данных но и убирает CLS. Кроме того, мы получаем единую точку для загрузки, кэширования, валидации и трансформации данных.