Apollo Angular GraphQL Code Generation. Generate Queries and Mutations from single schema.graphqls file

Question

I'm currently trying to get the Apollo Angular Code Generation (see: https://the-guild.dev/graphql/codegen/docs/guides/angular) to create types, queries and mutations from a single schema.graphqls file. I'm using the same schema file as in the guide

type Author {
  id: Int!
  firstName: String!
  lastName: String!
  posts(findTitle: String): [Post]
}
 
type Post {
  id: Int!
  title: String!
  author: Author
}
 
type Query {
  posts: [Post]
}

Again, as in the guide I'm adding the necessary dependencies to my project

npm install graphql
npm install -D typescript
npm install -D @graphql-codegen/cli
npm install -D @graphql-codegen/typescript
npm install -D @graphql-codegen/typescript-operations
npm install -D @graphql-codegen/typescript-apollo-angular

and I'm using the following codegen.ts file:

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  schema: './schema.graphqls',
  generates: {
    './src/app/graphql/generated.ts': {
      plugins: [
        'typescript',
        'typescript-operations',
        'typescript-apollo-angular',
      ],
    },
  },
};
export default config;

After running the command npm run generate, I get a success notification and the specified file ./src/app/graphql/generated.ts is generated. However in this file I only get the type definitions. The GQL files, such as PostsGQL as used in the final example in the Apollo Angular Code Generation guide are missing. Is there something I'm missing? Why aren't the GQL files also generated? The query appears in the schema.graphqls file, but is not in the final generated.ts file. Do we need to specify mutations and queries separately? If so, why?

I've created a Stackblitz with my example here: https://stackblitz.com/edit/node-mvtcqm. In the directory codegen-example is my example Angular project with the Apollo GraphQL Code Generation and the GraphQL schema file.

Answer 1

There are 2 sides to GraphQL:

1. Schema: The definition of your GraphQL server interface.
2. Operation: The definition of your GraphQL client query or mutation request.

You have the schema defined, but no operations. Say you want PostsGQL generated:

1. Define your operation in a .graphql file. In this case, let's do:

   # file: ./src/app/graphql/operations.graphql
   
   query Posts {
     posts {
       id,
       title,
       author {
         id
         firstName
       }
     }
   }
   

2. Set the documents property in your codegen config:

   // file: ./codegen.ts
   
   import type { CodegenConfig } from '@graphql-codegen/cli';
   
   const config: CodegenConfig = {
     schema: './schema.graphqls',
     generates: {
       './src/app/graphql/generated.ts': {
         documents: './src/app/graphql/operations.graphql', // <-- Bingo!!!
         plugins: [
           'typescript',
           'typescript-operations',
           'typescript-apollo-angular',
         ],
       },
     },
   };
   export default config;
   

3. Run npm run generate and check our generated .ts file:

   // file: ./src/app/graphql/generated.ts
   
   // ...
   
   @Injectable({
     providedIn: 'root'
   })
   export class PostsGQL extends Apollo.Query<PostsQuery, PostsQueryVariables> {
     document = PostsDocument;
   
     constructor(apollo: Apollo.Apollo) {
       super(apollo);
     }
   }
   

See forked example here: https://stackblitz.com/edit/node-k4pecg