feat(@cubejs-client/ngx): async CubejsClient initialization (#2876)

examples/dynamic-angular-dashboard/src/app/app-routing.module.ts

@@ -5,7 +5,6 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { ExploreComponent } from './explore/explore.component';
 
 const routes: Routes = [
-  { path: '', redirectTo: 'explore', pathMatch: 'full' },
   { path: 'explore', component: ExploreComponent },
   { path: 'dashboard', component: DashboardComponent },
 ];

examples/dynamic-angular-dashboard/src/app/app.module.ts

@@ -1,5 +1,5 @@
-import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { APP_INITIALIZER, NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatGridListModule } from '@angular/material/grid-list';
@@ -18,7 +18,11 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { CubejsClientModule, QueryBuilderService } from '@cubejs-client/ngx';
+import {
+  CubejsClient,
+  CubejsConfig,
+  QueryBuilderService,
+} from '@cubejs-client/ngx';
 import { ChartsModule } from 'ng2-charts';
 import { HttpLink } from 'apollo-angular/http';
 import { APOLLO_OPTIONS } from 'apollo-angular';
@@ -32,28 +36,28 @@ import { OrderComponent } from './explore/order/order.component';
 import { PivotComponent } from './explore/pivot/pivot.component';
 import { SettingsDialogComponent } from './settings-dialog/settings-dialog.component';
 import {
-  FilterGroupComponent,
   FilterComponent,
+  FilterGroupComponent,
 } from './explore/filter-group/filter-group.component';
 import { AppRoutingModule } from './app-routing.module';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { AddToDashboardDialogComponent } from './explore/add-to-dashboard-dialog/add-to-dashboard-dialog.component';
 import { QueryRendererComponent } from './explore/query-renderer/query-renderer.component';
 import apolloClient from '../graphql/client';
+import { AuthService } from './auth.service';
 
-const cubejsOptions = {
-  token: 'environment.CUBEJS_API_TOKEN',
+export const cubejsConfig: CubejsConfig = {
+  token:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpYXQiOjE2MDY1OTA0NjEsImV4cCI6MTkyMjE2NjQ2MX0.DdY7GaiHsQWyTH_xkslHb17Cbc3yLFfMFwoEpx89JiA',
   options: {
-    apiUrl: 'http://localhost:4000/cubejs-api/v1',
+    apiUrl:
+      'https://aquamarine-galliform.aws-us-east-2.cubecloudapp.dev/cubejs-api/v1',
   },
 };
 
-export function cubejsClientFactory(http: HttpClient) {
-  return () =>
-    new Promise((resolve) => {
-      setTimeout(() => resolve({ token: '100500' }), 2000);
-    });
-}
+const cubejsClientFactory = (authService: AuthService) => {
+  return new CubejsClient(authService.config$);
+};
 
 @NgModule({
   declarations: [
@@ -74,7 +78,6 @@ export function cubejsClientFactory(http: HttpClient) {
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    CubejsClientModule.forRoot(cubejsOptions),
     MatButtonModule,
     MatSelectModule,
     MatGridListModule,
@@ -97,17 +100,17 @@ export function cubejsClientFactory(http: HttpClient) {
     GridsterModule,
   ],
   providers: [
+    AuthService,
     QueryBuilderService,
     {
       provide: APOLLO_OPTIONS,
       useFactory: () => apolloClient,
       deps: [HttpLink],
     },
     {
-      provide: APP_INITIALIZER,
+      provide: CubejsClient,
       useFactory: cubejsClientFactory,
-      deps: [HttpClient],
-      multi: true,
+      deps: [AuthService],
     },
   ],
   bootstrap: [AppComponent],

examples/dynamic-angular-dashboard/src/app/auth.service.ts

@@ -0,0 +1,33 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, from } from 'rxjs';
+import { CubejsConfig } from '@cubejs-client/ngx';
+
+import { cubejsConfig } from './app.module';
+
+@Injectable()
+export class AuthService {
+  public config$ = new BehaviorSubject<CubejsConfig | null>(null);
+
+  constructor() {
+    this.login().then(() => console.log('config ready'));
+  }
+
+  // Used as an example to show async CubejsClient initialization
+  public login(): any {
+    return new Promise<void>((resolve) =>
+      setTimeout(() => {
+        this.config$.next({
+          token: cubejsConfig.token,
+          options: {
+            apiUrl: cubejsConfig.options.apiUrl,
+          },
+        });
+        resolve();
+      }, 0)
+    );
+  }
+
+  public logout(): void {
+    this.config$.next(null);
+  }
+}

examples/dynamic-angular-dashboard/src/app/explore/explore.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 import { ResultSet } from '@cubejs-client/core';
@@ -49,19 +49,22 @@ export class ExploreComponent implements OnInit, OnDestroy {
   timeDimensionMembers: any[] = [];
 
   constructor(
-    public cubejsClient: CubejsClient,
+    @Inject(CubejsClient) public cubejsClient: CubejsClient,
     public queryBuilder: QueryBuilderService,
     public dialog: MatDialog,
     private route: ActivatedRoute
   ) {
-    queryBuilder.setCubejsClient(cubejsClient);
+    cubejsClient.ready$.subscribe(
+      (ready) => ready && queryBuilder.setCubejsClient(cubejsClient)
+    );
+
     this.chartTypeMap = this.chartTypeToIcon.reduce(
       (memo, { chartType, icon }) => ({ ...memo, [chartType]: icon }),
       {}
     );
   }
 
-  async ngOnInit() {
+  async ngOnInit(): Promise<void> {
     this.builderMeta = await this.queryBuilder.builderMeta;
     this.query = await this.queryBuilder.query;
 
@@ -84,7 +87,7 @@ export class ExploreComponent implements OnInit, OnDestroy {
     });
   }
 
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     this.queryBuilder.deserialize({
       query: {},
     });
@@ -104,7 +107,7 @@ export class ExploreComponent implements OnInit, OnDestroy {
     });
   }
 
-  openAddToDashboardDialog() {
+  openAddToDashboardDialog(): void {
     const dialogRef = this.dialog.open(AddToDashboardDialogComponent, {
       width: '500px',
       data: {

examples/dynamic-angular-dashboard/src/graphql/client.ts

@@ -7,12 +7,10 @@ import { makeExecutableSchema } from 'graphql-tools';
 const cache = new InMemoryCache();
 const defaultDashboardItems = [];
 
-const getDashboardItems = () =>
-  JSON.parse(window.localStorage.getItem('dashboardItems')) ||
+const getDashboardItems = () => JSON.parse(window.localStorage.getItem('dashboardItems')) ||
   defaultDashboardItems;
 
-const setDashboardItems = (items) =>
-  window.localStorage.setItem('dashboardItems', JSON.stringify(items));
+const setDashboardItems = (items) => window.localStorage.setItem('dashboardItems', JSON.stringify(items));
 
 const nextId = () => {
   const currentId =
@@ -69,7 +67,7 @@ const schema = makeExecutableSchema({
         item = { ...item, id: nextId(), layout: JSON.stringify({}) };
         dashboardItems.push(item);
         setDashboardItems(dashboardItems);
-        
+
         return toApolloItem(item);
       },
       updateDashboardItem: (_, { id, input: { ...item } }) => {
@@ -83,15 +81,15 @@ const schema = makeExecutableSchema({
         const index = dashboardItems.findIndex((i) => i.id.toString() === id);
         dashboardItems[index] = { ...dashboardItems[index], ...item };
         setDashboardItems(dashboardItems);
-        
+
         return toApolloItem(dashboardItems[index]);
       },
       deleteDashboardItem: (_, { id }) => {
         const dashboardItems = getDashboardItems();
         const index = dashboardItems.findIndex((i) => i.id.toString() === id);
         const [removedItem] = dashboardItems.splice(index, 1);
         setDashboardItems(dashboardItems);
-        
+
         return toApolloItem(removedItem);
       },
     },