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.

eezing · Accepted Answer · 2023-01-21 20:06:04Z

6

+100

There are 2 sides to GraphQL:

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

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

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
    }
  }
}

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;

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

edited Jan 21, 2023 at 20:06

answered Jan 21, 2023 at 20:02

eezing

1744 bronze badges

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

2 Comments

IdealOutage Over a year ago

Thank you, this really helped to clear it up for me!

Nabeeh_Sawaf Over a year ago

thanks but another related question, I want to generate all the mutations and queries that the schema defines, is there a way to do that without having to write the queries/mutations on my own?

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related