Graphql-code-generator: Angular error with codegen and @client directive

[alexbjorlig]

Describe the bug
I can't generate code for a query, that looks for a client field.

To Reproduce

1. My GraphQL schema (client):

extend type Query {
    visibilityFilter: String
  }

1. My GraphQL operations:

query visibilityFilterQuery {
    visibilityFilter @client
}

1. My codegen.yml config file:

schema: http://localhost:1337/graphql
documents: ./src/**/*.graphql
generates:
  ./src/app/eddy/generated/graphql.ts:
    plugins:
      - typescript
      - typescript-operations
      - typescript-apollo-angular
config:
  ngModule: ../eddy.module#EddyModule

Expected behavior
When I run: graphql-codegen, I expect a service generated for visibilityFilterQuery. But I get the following error:

./src/app/eddy/generated/graphql.ts
    AggregateError: 
        GraphQLDocumentError: Cannot query field "visibilityFilter" on ty
pe "Query".

Environment:

• OS:
• @graphql-codegen/typescript-apollo-angular 1.0.6:
• NodeJS: v10.12.0

Additional context
The codegen works for all "normal" server side queries, AND "inline" client queries.

[dotansimha]

@dauledk
It looks like you didn't include your client-side schema as part of the codegen schema.
You should have a client-side schema file, for example client-schema.graphql with the following content:

directive @client on FIELD

extend type Query {
    visibilityFilter: String
}

Then, provide it to your codegen configuration:

schema: http://localhost:1337/graphql
documents: ./src/**/*.graphql
generates:
  ./src/app/eddy/generated/graphql.ts:
   schema: client-schema.graphql
    plugins:
      - typescript
      - typescript-operations
      - typescript-apollo-angular
config:
  ngModule: ../eddy.module#EddyModule

This way, the codegen will merge both schemas, and the documents will get validated against the merged schema.

[alexbjorlig]

@dotansimha thanks for the reply. Makes sense that I have to provide the schma to graphql-code-generator. But if I convert my client schema from client-schema.ts to client-schema.graphql, how do I provide the schema in the Apollo angular client?

It currently looks something like this:

import { typeDefs } from './client-schema';

export function createApollo(
    httpLink: HttpLink,
    utilities: UtilitiesService
  ) {
  return {
    typeDefs,
    link: concatAllLinks(httpLink, utilities),
    cache: createCache(),
    resolvers: resolvers
  };
}

[dotansimha]

@dauledk You can use .ts file, just make sure to export the schema as default export, and add require: ts-node/register to your codegen config file

[alexbjorlig]

@dotansimha I could not find anything about require: ts-node/register in the codegen documentation? Is this a module I need to install, and where should it be places in the codegen.yml file?

And thanks for you help - our team is currently implementing Apollo. The help from the Apollo community has been awesome so far!

[dotansimha]

@dauledk https://graphql-code-generator.com/docs/getting-started/require-field