Install ts-deep-extract-types

...to extract subtypes from generated GQL-result types

package-lock.json

@@ -14136,6 +14136,11 @@
       "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
       "dev": true
     },
+    "ts-deep-extract-types": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ts-deep-extract-types/-/ts-deep-extract-types-1.0.1.tgz",
+      "integrity": "sha512-/ouif62vAoltKeN9tSxMkMfiFwrXttL5UHkGDDvshH3ml06t9HhTsrtVJneGJhojBlKbWs8qzHYhL7oGWuluUg=="
+    },
     "ts-invariant": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz",

package.json

@@ -28,6 +28,7 @@
     "apollo-angular": "^2.0.4",
     "graphql": "^15.3.0",
     "rxjs": "~6.5.5",
+    "ts-deep-extract-types": "^1.0.1",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.3"
   },

src/app/graphqlOperations/bikes.graphql

@@ -1,6 +1,7 @@
-query CargoBikes {
+query GetCargoBikes{
   cargoBikes {
     id
+    group
     name
     events {
       date
@@ -12,5 +13,28 @@ query CargoBikes {
       bikeLength
       bikeWeight
     }
+    numberOfChildren
+    security {
+      frameNumber
+      adfcCoding
+      keyNumberAXAChain
+      keyNumberFrameLock
+      policeCoding
+    }
+    dimensionsAndLoad {
+      bikeHeight
+      bikeLength
+      bikeWeight
+      bikeWidth
+      boxHeight
+      boxLength
+      boxWidth
+      hasCoverBox
+      lockable
+      maxWeightBox
+      maxWeightLuggageRack
+      maxWeightTotal
+    }
+    
   }
 }

src/app/pages/bikes/bikes.component.ts

@@ -1,5 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { CargoBikesGQL, CargoBikesQuery, CargoBike } from '../../../generated/graphql';
+import { DeepExtractTypeSkipArrays } from 'ts-deep-extract-types';
+import { GetCargoBikesGQL, GetCargoBikesQuery } from '../../../generated/graphql';
+
+type CargoBikeResult = DeepExtractTypeSkipArrays<GetCargoBikesQuery, ["cargoBikes"]>;
 
 @Component({
   selector: 'app-bikes',
@@ -9,12 +12,12 @@ import { CargoBikesGQL, CargoBikesQuery, CargoBike } from '../../../generated/gr
 export class BikesComponent implements OnInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = ELEMENT_DATA;
-  bikes: CargoBikesQuery;
+  
+  bikes: CargoBikeResult[];
 
-  constructor(private bikesGQL: CargoBikesGQL) {
+  constructor(private bikesGQL: GetCargoBikesGQL) {
     this.bikesGQL.watch().valueChanges.subscribe((result) => {
-      console.log(result);
+      this.bikes = result.data.cargoBikes;
-      this.bikes = result.data;
     });
   }
 

src/generated/graphql.ts

@@ -657,14 +657,14 @@ export enum CacheControlScope {
 }
 
 
-export type CargoBikesQueryVariables = Exact<{ [key: string]: never; }>;
+export type GetCargoBikesQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type CargoBikesQuery = (
+export type GetCargoBikesQuery = (
   { __typename?: 'Query' }
   & { cargoBikes: Array<Maybe<(
     { __typename?: 'CargoBike' }
-    & Pick<CargoBike, 'id' | 'name'>
+    & Pick<CargoBike, 'id' | 'name' | 'numberOfChildren'>
     & { events?: Maybe<Array<Maybe<(
       { __typename?: 'BikeEvent' }
       & Pick<BikeEvent, 'date'>
@@ -673,13 +673,16 @@ export type CargoBikesQuery = (
       & Pick<InsuranceData, 'billing'>
     ), dimensionsAndLoad: (
       { __typename?: 'DimensionsAndLoad' }
-      & Pick<DimensionsAndLoad, 'bikeLength' | 'bikeWeight'>
+      & Pick<DimensionsAndLoad, 'bikeLength' | 'bikeWeight' | 'bikeHeight' | 'bikeWidth' | 'boxHeight' | 'boxLength' | 'boxWidth' | 'hasCoverBox' | 'lockable' | 'maxWeightBox' | 'maxWeightLuggageRack' | 'maxWeightTotal'>
+    ), security: (
+      { __typename?: 'Security' }
+      & Pick<Security, 'frameNumber'>
     ) }
   )>> }
 );
 
-export const CargoBikesDocument = gql`
+export const GetCargoBikesDocument = gql`
-    query CargoBikes {
+    query GetCargoBikes {
   cargoBikes {
     id
     name
@@ -692,6 +695,34 @@ export const CargoBikesDocument = gql`
     dimensionsAndLoad {
       bikeLength
       bikeWeight
+      bikeHeight
+      bikeWidth
+      boxHeight
+      boxLength
+      boxWidth
+      hasCoverBox
+      lockable
+      maxWeightBox
+      maxWeightLuggageRack
+      maxWeightTotal
+    }
+    numberOfChildren
+    security {
+      frameNumber
+    }
+    dimensionsAndLoad {
+      bikeHeight
+      bikeLength
+      bikeWeight
+      bikeWidth
+      boxHeight
+      boxLength
+      boxWidth
+      hasCoverBox
+      lockable
+      maxWeightBox
+      maxWeightLuggageRack
+      maxWeightTotal
     }
   }
 }
@@ -700,8 +731,8 @@ export const CargoBikesDocument = gql`
   @Injectable({
     providedIn: 'root'
   })
-  export class CargoBikesGQL extends Apollo.Query<CargoBikesQuery, CargoBikesQueryVariables> {
+  export class GetCargoBikesGQL extends Apollo.Query<GetCargoBikesQuery, GetCargoBikesQueryVariables> {
-    document = CargoBikesDocument;
+    document = GetCargoBikesDocument;
     
     constructor(apollo: Apollo.Apollo) {
       super(apollo);