Getting types generated similar to apollo codegen from graphql-codegen

Question

I am new to apollo and graphql. I tried using both apollo-codegen and graphql-codegen and I want all the types generated in one single file like in graphql-codegen , but in apollo it creates multiple files.

The issue I am having while using graphql-codegen is the type generated is not the format that I get data.

While using apollo client useQuery the data I get from backend is in format of

data: {
  queryName : {... actualDataObject }

}

SO the output for a sample query by apollo -codegen is : -

export interface Login_logIn {
  __typename: "UserPayload";
  email: string;
  firstname: string;
  lastname: string;
}

export interface Login {
  logIn: Login_logIn;  // logIn is the queryname here
}

But using graphql-codegent the output I get is : -

export type UserPayload = {
  __typename?: 'UserPayload';
  _id: Scalars['ID'];
  email: Scalars['String'];
  firstname: Scalars['String'];
  lastname: Scalars['String'];
};

Is it possible to get graphql-codegen out put similar to apollo codegen i.e in format of: -

export type UserPayload {
  logIn : {                     //logIn is the queryname
    __typename?: 'UserPayload';
    _id: Scalars['ID'];
    email: Scalars['String'];
    firstname: Scalars['String'];
    lastname: Scalars['String'];
 }
}

So that it becomes easy to use in useQuery or useMutation hook ? By using graphql-codegen

 const [doLogin, {loading, error, data}] = useMutation<UserPayload, UserInputVariables>(
    LOGIN,
    {
      variables: {
        ...variables,
      }
    },
  );

Answer 1

You need to add the typescript-operations plugin to your codegen.yml:

generates:
  types.ts:
    plugins:
      - typescript
      - typescript-operations

and make sure you've set the documents property to point to where your queries are located.

This will generate two additional types per operation -- one for the query response and one for the variables -- both of which can then be passed to your hook.

export type LoginMutationVariables = Exact<{ ... }>;


export type LoginMutation = (
  { __typename?: 'Mutation' }
  & { logIn: ... }
);

You can see additional details about the plugin here. If you're using Apollo, you might consider having codegen just generate the hooks for you instead.