title: Adding a field resolver for a second api call with type-graphql and the RESTDataSource
body: <p>We want the query below to resolve the <code>truck</code> fields based on the <code>truckId</code> returned:</p>
  <p><a href="https://i.stack.imgur.com/gMwLu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gMwLu.png" alt="enter image description here" /></a></p>
  <h2>Entities</h2>
  <pre class="lang-js prettyprint-override"><code>// RosterEntity.ts
  import { Truck } from '@sap-truck-roster/entity/Truck'
  import { Field, ID, ObjectType } from 'type-graphql'
  
  @ObjectType()
  export class Roster {
    @Field(() =&gt; Truck, { nullable: true })
    truck: Truck
    
    @Field(() =&gt; ID)
    readonly truckId: string
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// TruckEntity.ts
  import { Field, ID, ObjectType } from 'type-graphql'
  
  @ObjectType()
  export class Truck {
    @Field(() =&gt; ID)
    readonly id: string
  
    @Field()
    readonly description: string
  }
  </code></pre>
  <h2>Resolvers</h2>
  <pre class="lang-js prettyprint-override"><code>// TruckResolver.ts
  import { Resolver, Arg, Query, Ctx, Field, ObjectType, createUnionType,} from 'type-graphql'
  import { Truck } from '@sap-truck-roster/entity/Truck'
  import { plainToClass } from 'class-transformer'
  import { Context } from '@shared/typings'
  import { ApiError } from '@shared/graphql'
  
  @ObjectType()
  class TruckArray {
    @Field(() =&gt; [Truck], { nullable: true })
    data?: [Truck]
  }
  
  const TruckQueryResultUnion = createUnionType({
    name: 'TruckQueryResult',
    // types: () =&gt; [[Truck], ApiError] as const,
    // an array is not supported by the Graphql spec in unions
    types: () =&gt; [TruckArray, ApiError] as const,
  })
  
  @Resolver(() =&gt; Truck)
  export class TruckResolver {
    @Query(() =&gt; TruckQueryResultUnion)
    async truck(
      @Ctx() ctx: Context,
      @Arg('id', { nullable: true }) id?: string,
      @Arg('country', { nullable: true }) country?: string
    ): Promise&lt;typeof TruckQueryResultUnion&gt; {
        const response = await ctx.dataSources.sapTruckRosterAPI.getTruck({ id, country })
  
        return plainToClass(TruckArray, { data: response.data, })
    }
  }
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>// RosterResolver.ts
  import { Resolver, Arg, Query, Ctx, Field, ObjectType, createUnionType,} from 'type-graphql'
  import { Roster } from '@sap-truck-roster/entity/Roster'
  import { plainToClass } from 'class-transformer'
  import { Context } from '@shared/typings'
  import { ApiError } from '@shared/graphql'
  import { Truck } from '@sap-truck-roster/entity/Truck'
  
  @ObjectType()
  class RosterArray {
    @Field(() =&gt; [Roster], { nullable: true })
    data?: [Roster]
  }
  
  const RosterQueryResultUnion = createUnionType({
    name: 'RosterQueryResult',
    // types: () =&gt; [[Roster], ApiError] as const,
    // an array is not supported by the Graphql spec in unions
    types: () =&gt; [RosterArray, ApiError] as const,
  })
  
  @Resolver(() =&gt; Roster)
  export class RosterResolver {
    @Query(() =&gt; RosterQueryResultUnion)
    async roster(
      @Ctx() ctx: Context,
      @Arg('date', () =&gt; String) date: string,
      @Arg('truckId', { nullable: true }) truckId?: string,
      @Arg('driverId', { nullable: true }) driverId?: string
    ): Promise&lt;typeof RosterQueryResultUnion&gt; {
        const response = await ctx.dataSources.sapTruckRosterAPI.getRoster({ date, driverId, truckId })
  
        // @FieldResolver(() =&gt; Truck)
        // truck(@Root() truck: Truck) {
        //   return await ctx.dataSources.sapTruckRosterAPI.getTruck({
        //     id: response.truckId
        //   })
        // }
        
       return plainToClass(RosterArray, { data: response.data })
    }
  }
  </code></pre>
  <p>As you can see in the <code>RosterResolver.ts</code> we tried to use the <code>response.truckId</code> to query the other endpoint on the API but this fails. What is the correct way to populate the <code>truck</code> field with data?</p>
  <p>This returns in the console the correct data but does not match it with the <code>roster</code> as we get <code>null</code> values for all <code>truck</code> properties:</p>
  <pre class="lang-js prettyprint-override"><code>  // RosterResolver.ts
  
    @FieldResolver(() =&gt; Truck, { nullable: true })
    async truck(@Root() roster: Roster, @Ctx() ctx: Context) {
      console.log('roster.truckId: ', roster.truckId)
  
      const response = await ctx.dataSources.sapTruckRosterAPI.getTruck({
        id: roster.truckId,
      })
  
      console.log('response: ', response);
      
      return response
    }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/taCXZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/taCXZ.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/fZJDL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fZJDL.png" alt="enter image description here" /></a></p>