Graphql-code-generator: Better support for GraphQL directives

[dotansimha]

Continue the discussion from here: https://github.com/dotansimha/graphql-code-generator/pull/561

The idea is to have better support for directives such as @skip, @include, and other custom directives that become common such as @client.

[JuHwon]

i am also having an issue because i am using AWS AppSync, i got a directive @aws_subscribe in my schema. the cli returns: error: Directive aws_subscribe: Couldn't find type aws_subscribe in any of the schemas.

a nice way to handle custom/popular directives would be awesome.

[douglasward]

Yes, this would be great... I am getting this error for the @connection directive at the moment.

[JuHwon]

@douglasward I created my custom project configuration with my own templates. I also looked into the provided templates for some inspiration for my custom ones.
This worked out super well, and I am super happy since the flexibility I have now is enormous.
You can easily extend your schema with the custom project configuration.

The following code is my schema.js in my project config folder.

const fs = require('fs')
const path = require('path')
const makeExecutableSchema = require('graphql-tools').makeExecutableSchema

function loadGraphQL(file) {
  const filePath = path.join(__dirname, file)
  return fs.readFileSync(filePath, 'utf8')
}

const schema = loadGraphQL('../../schema.graphql')
const awsEnhancements = loadGraphQL('./aws-enhancements.graphql')

exports.schema = makeExecutableSchema({
  typeDefs: [awsEnhancements, schema],
})

[douglasward]

@JuHwon great, that sounds like just what i need, thanks.

Is aws-enhancements.graphql the file where you extend the schema to allow directives? If so, do you have one for the @connection directive, or could you point me in the right direction as to how I could extend the schema to support that directive?

[JuHwon]

Yes, my aws-enhancements.graphql contains my aws specific schema enhancements so the codegen knows about e.g. the @aws_subscribe directive. I basically followed this documentation and also checked out the already provided templates.

Since I am using this codegen for my typescript backend only I do not need the @connection directive or any other query types. (I am planning to also introduce this codegen in the frontend in the future. Though for now, I am only generating the model types for my TS backend.) My aws-enhancements.graphql is very minimal for now:

directive @aws_subscribe(mutations: [String!]!) on FIELD_DEFINITION

The way I came to this solution was by checking out the mongodb template directives.
This way the codegen knows about the directive and it's valid. I bet you can do the same with your @connection directive.

When providing a custom schema in your codegen project config I think you don't even need to write your custom templates too. Though if you want to, I also found the types available in the handlebars templates: https://github.com/dotansimha/graphql-code-generator/blob/master/packages/graphql-codegen-core/src/types.ts With these typedefs and the already provided template source code it was very easy to create my custom templates the way I need it in my project.

So imo the graphql-code-generator does not require a better support for 3rd party directives since actually, it's already easy to integrate them. Maybe the documentation about it should be improved. So users, who actually need custom schema enhancements get an easy manual to do so.

[dotansimha]

You can now specify client-schema easily, and add custom schema pieces for each output. (since 0.14)

[dotansimha]

Update on this issue. Since changes in 0.14, we no longer validate your GraphQL directives during the documents validation. So you no longer need to provide the clientSchema file with the directives declaration.

[mikebm]

I am still receiving this error when using a custom loader.
My customer loader exports a function that returns a GraphQLSchema object.

    ❯ Generate ./src/server/graphql/__generated__/schema-types.d.ts
      ✔ Load GraphQL schemas
      ✔ Load GraphQL documents
      ✖ Generate
        → Unknown directive "internal".

Version 0.15.2

[dotansimha]

@mikebm can you please share your codegen.yml file?

[mikebm]

@mikebm can you please share your codegen.yml file?

overwrite: true
schema:
    schema.graphql:
        loader: /full_path_to_loader/loader.js
generates:
    ./src/server/graphql/__generated__/schema-types.d.ts:
        plugins:
            - typescript-common
            - typescript-server

Another bug with this format is the loader does not work with relative paths. I must give it a full path to the loader.

[dotansimha]

@mikebm it looks like your custom schema loader has an issue, because it thrown an error while building the schema. The Unknown directive "internal". error comes directly from graphql.
Can you please try the latest version of the codegen and see if it still happens?
Also, does it happen with the default loader?

[mikebm]

@mikebm it looks like your custom schema loader has an issue, because it thrown an error while building the schema. The Unknown directive "internal". error comes directly from graphql.
Can you please try the latest version of the codegen and see if it still happens?
Also, does it happen with the default loader?

Sorry it took so long to respond. Yes, this is still an issue.
codegen.yml:

schema:
  schema.graphql:
    loader: ./src/loader.js

./src is in the same folder as codegen.yml.

Changing the path from ./src to the full path works.
ex: /users/myuser/repo/src/loader.js

Failed to load schema from schema.graphql using loader "./src/loader.js":

        Cannot find module './src/loader.js'
        Error: Cannot find module './src/loader.js'

[dotansimha]

@mikebm I created an issue for it: https://github.com/dotansimha/graphql-code-generator/issues/1571
And fixed it in: https://github.com/dotansimha/graphql-code-generator/commit/f349d8669346b899eb5b894d4be5436621dc63fa

[Flos]

My solution right now is to remove the "@aws*" directives with the cli using "sed".

cat schema.graphql | sed -e 's/@aws.*{/{/' | sed -e 's/@aws.*//' > src/codegen/schema.graphql

I placed that command in the API update script and I don't have to worry about unknown directives anymore.