title: Implementing 'Namespace-Typed' Resolvers in NestJS + GraphQL
body: <p>I stumbled across an <a href="https://graphql-rules.com/rules/mutation-namespaces" rel="nofollow noreferrer">interesting pattern</a> for implementing GraphQL Mutations under their own &quot;namespace&quot;, to help keep the Global Namespace neat and tidy. A regular implementation with Apollo would look something like this.</p>
  <pre><code>const typeDefs = gql`
  type Mutation {
      article: ArticleMutations
    }
  
    type ArticleMutations {
      like: Boolean
      unlike: Boolean
    }
  `;
  
  const resolvers = {
    Mutation: {
      article: () =&gt; ({}), // ✨✨✨ magic! which allows to proceed call of sub-methods
    }
    ArticleMutations: {
      like: () =&gt; { /* resolver code */ },
      unlike: () =&gt; { /* resolver code */ },
    },
  };
  </code></pre>
  <p>I decided to try and implement this pattern in a GraphQL API I am building with NestJS, however I seem to be hitting a stumbling block. I have created a <code>TestResolver</code> class, which contains a simple query, along with a namespaced-mutation that should return my nested resolvers.</p>
  <pre><code>@ObjectType()
  export class TestMutations {
    constructor(private readonly _testService: TestService) {}
  
    @Field(() =&gt; String)
    test: string;
  
    @ResolveField(() =&gt; Unit, {})
    async create(@Args('input') input: CreateTestInput): Promise&lt;Test&gt; {
      try {
        return await this._testService.create(input);
      } catch (err) {
        this._logger.error(err);
        throw new HttpException('An error occurred when creating the Test', HttpStatus.INTERNAL_SERVER_ERROR);
      }
    }
  }
  
  @Resolver(() =&gt; Test)
  export class TestResolver {
    constructor(private readonly _testService: UnitService) {}
  
    @Query(() =&gt; Test, { name: 'test', nullable: true })
    async getTest(@Args('id') id: Id): Promise&lt;Test&gt; {
      try {
        return await this._testService.get(id);
      } catch (err) {
        this._logger.error(err);
        throw new HttpException('An error occurred when fetching the Test', HttpStatus.INTERNAL_SERVER_ERROR);
      }
    }
  
    @Mutation(() =&gt; TestMutations)
    test(): TestMutations {
      return new TestMutations(this._testService);
    }
  }
  </code></pre>
  <p>Through some trial and error I managed to get NestJs to successfully build the above code, however I cannot get the nested <code>FieldResolver</code>s to show up.</p>
  <p><a href="https://i.stack.imgur.com/qPWIK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qPWIK.png" alt="enter image description here" /></a></p>
  <p>The plain Apollo implementation of this pattern <em>does</em> seem like it uses some &quot;magic&quot; code to achieve it, so it's definitely possible that the structure of NestJS will not allow me to do something like this. Does anyone have any ideas?</p>