Apollo client:codegen how to generate typings for @client directive?

Question

When I run the following command:

apollo client:codegen --target=typescript --config=./apollo.config.js --outputFlat=./graphql.queries.ts

→ Error initializing Apollo GraphQL project "MySchema": Error: Error in "Loading schema for Merged schema": Error: Unknown directive "client".

This is due to one of my queries containing the @client directive:

query MyQuery {
    someStuff @client {
        value
    }
}

On https://github.com/apollographql/apollo-tooling/issues/366 I found out I could specify a --clientSchema attribute to the apollo codegen command for instance:

apollo codegen:generate generated \
   --queries=src/components/**/*.tsx \
   --target typescript \
   --schema src/generated/schema.json \ 
   --clientSchema src/state/schema.graphql

But I am using an apollo.config.js file and I do not find how to specify this clientSchema equivalent into the config file.

I see 2 possible errors:

either I am not using the @client directive properly
or there is a missing (removed or undocumented?) support for clientSchema in the apollo.config.js file

Any idea?

Flavien Volken Flavien Volken · Accepted Answer · 2019-07-07T19:26:28

Ok it seems that I would have to add the following line directly in one of the schema.graphql

directive @client on FIELD this will overload the AST definition to support the @client directive.

Then writing:

query MyQuery {
    someStuff @client {
        value
    }
}

Will neither raise an error anymore in my IDE nor throw errors while generating the corresponding queries.ts files.

For info: another thread mentioned adding the line above within the .graphqlconfig file like this:

{
  "name": "Schema name",
  "schemaPath": "./pathTo/schema.graphql",
  "extensions": {
    "endpoints": {
      "Default GraphQL Endpoint": {
        "url": "http://localhost:4466",
        "headers": {
          "user-agent": "JS GraphQL"
        },
        "introspect": false
      }
    },
    "extensions": {
      "customDirectives": [
        "directive @client on FIELD"
      ]
    }
  }
}

But adding it into the .graphqlconfig never worked for me, it would however be a solution to dig…

Apollo client:codegen how to generate typings for @client directive?

1 Answers