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,
      }
    },
  );

Daniel Rearden · Accepted Answer · 2020-09-02 12:00:10Z

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.

answered Sep 2, 2020 at 12:00

Daniel Rearden

85.3k14 gold badges205 silver badges193 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sudoDeznit Over a year ago

I was not using codegen to create hooks, So was not adding documents property to codegen.yml. Your answer solved the issue and created types that I needed .. Thankyou.

Collectives™ on Stack Overflow

Getting types generated similar to apollo codegen from graphql-codegen

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related