Generate resolver return types of the same shape as the client graphql query/mutation

[trompx]

Hello,

TL;DR: I would like to generate the resolver return types that match the queries and mutations I execute client side but don't know if this is possible?

---

I started using graphql-code-generator but am having an issue with my return response types when trying to return non full model, but only partial.

User model:

@ObjectType({ implements: BaseEntity })
export class User extends BaseEntity {
  @Field({ nullable: true })
  name?: string;

  @Field({ nullable: true })
  job?: Job;
}

Job model:

@ObjectType({ implements: BaseEntity })
export class Job extends BaseEntity {
  @Field()
  name: string;

  @Field()
  category: string;
}

Client side I execute a query that should return:

fragment User on User {
  id
  name
  job {
    name
  }
}

query GetUsers {
  getUsers {
    ...User
  }
}

In my resolver I do a raw query that return exactly the data returned by the graphql query.

  @Query(() => [User], { nullable: true })
  getUsers(): Promise<User[]> {
    // Sql query that returns all users with only their id, name and job name.
    return users =  ...
  }

The problem is as I return User[] from the promise, it excepts a full User entity, thus throwing the error: Cannot return null for non-nullable field Job.category.
It tried to return UserFragment[] instead generated via typescript-resolver, but I get the following error 'UserFragment' only refers to a type, but is being used as a value here.. Besides in most of my queries, I return multiple fragments + partial data from other models and I'd like to just auto generate the type for the whole query.

I don't know if I am missing something but it doesn't seem that codegen generated types directly for the whole GetUsers query, something like GetUsersResponseType, am I right? So do I have to always create partial object types so that I can use it in my resolvers?

Thanks in advance for the help.

[dotansimha]

You can use mappers configuration and use any kind of type/class that you wish. see: https://the-guild.dev/blog/better-type-safety-for-resolvers-with-graphql-codegen

[trompx]

Thanks for the useful resource @dotansimha.
After reading the article, I'm not sure if it supports my usecase.

As explained before, let's say I have:

# ./src/graphql/user/fragments/ApiUser.graphql
fragment ApiUser on User {
  id
  name
  job {
    name
  }
}

# ./src/graphql/role/fragments/ApiRole.graphql
fragment ApiRole on Role {
  id
  name
}

# ./src/graphql/user/queries/apiUsers.graphql
query ApiUsers {
  apiUsers {
    ...ApiUser
    ...ApiRole
  }
}

codegen.yml:

schema: http://localhost:4000/graphql
documents:
  - ./src/**/*.graphql
overwrite: true
generates:
  ../server/src/types/resolversTypes.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-resolvers"
    config:
      mappers:
        ApiUsers: ./src/graphql/user/queries/apiUsers#ApiUsers
        # Would also like to do:
        # ApiUser: ./src/graphql/user/fragments/ApiUser#ApiUser

Running codegen, the only thing it adds is import { ApiUsers } from './src/graphql/user/queries/apiUsers'; to the generated resolversTypes but with the error 'ApiUsers' is declared but its value is never read..

I'd like to get the type directly from my .graphql (queries, mutations and fragments) files without redeclaring the types, and use it like:

  import ApiUsers from ../server/src/types/resolversTypes.ts:
  @Query(() => ApiUsers, { nullable: true })
  apiUsers(): Promise<ApiUsers> {
    // Sql query that returns all users with only their id, name and job name + their roles (id + name)
    return users =  ...
  }

Is tihis supported or I have to create a new file to declare a response type of the exact same shape as what my graphql queries/mutations/fragments return to use it in my codegen.yml as a mapper?

[dotansimha]

mappers works based on your schema, it has nothing to do with your operations. You should use ApiUser and not ApiUsers.
I'm not sure that I understand the actual use-case here, since the schema should provide a complete set of features, and selection sets are just, well, selections that you wish to have. I don't understand the need to have the schema defined by the operations (it should be the other way around), since operations may vary, and that shouldn't affect the schema.

If you wish to affect your resolvers execution, based on selection sets, you need to use info (the 4th arg of resolvers) and use that information to tell which fields are asked for on each level and change your runtime/return value accordingly.
In most implementations, the root-resolver returns the base type or ID, and then the type resolver is the one in charge of extracting the complete data.
So in your case, getUsers should return minimal information about the user, and the User.X resolvers should resolve to the complete information. The getUsers resolver shouldn't resolve into the complete set of all fields of User.

Now, if you want to have partials, check defaultMapper config flag - you can use it to make all resolvers return values as Partials, allowing you to return only parts of the object in each resolver.

[trompx]

As you mentioned the info as 4th arg of resolvers, I think we may not be talking about the same resolvers. It was maybe not clear and sorry for that but I am using type-graphql and was talking about those resolvers.

I am trying to type the @Query decorator with what I exactly return from that method. From what you said, I get that I shouldn't get the type from the client graphql query (which makes sense), but I am trying to not repeat myself.

To give a better example, server side in my API I declare a user.response.ts like:

import { User } from "./user.entity";
import { ObjectType, Field } from "type-graphql";
import { FieldError } from "../shared/fields/FieldError";

@ObjectType()
export class UserResponse {
  @Field(() => User, { nullable: true })
  user?: User;

  @Field(() => [FieldError], { nullable: true })
  errors?: FieldError[];
}

That I use to type my mutation in user.resolver.ts:

import { Mutation, Arg } from "type-graphql";
import { UserResponse } from "./user.response";

  @Mutation(() => UserAuthResponse)
  async register(
    @Arg("data", () => RegisterInput) data: RegisterInput
  ): Promise<UserAuthResponse> {
    return await this.service.register(data);
  }

Then on client side, I have the following mutation : register.graphql

mutation Register($data: RegisterInput!) {
  register(data: $data) {
    user {
      ...User
    }
    errors {
      field
      message
    }
  }
}

And User.graphql:

fragment User on User {
  id
  name
  job {
    name
  }
}

Here I am repeating myself, as I have to write both a response server side which is of the same shape as my mutation/query client side.
I was wondering if I could auto generate either the register.graphql mutation based on what I declared in the user.reponse.ts or either way so I don't need to create the response file (but as you mentionned it should not be done this way).