Graphql-code-generator: typescript-operations: Unknown directive 'client'

[dizel3d]

@graphql-codegen/typescript-operations with flattenGeneratedTypes: true fails with an error:

    - Unknown directive 'client'.

      /sandbox/document.graphql:5:30
      4 | mutation MyMutation ($file: Blob!) {
      5 |     uploadImage(file: $file) @client
        |                              ^
      6 | }

To Reproduce
Steps to reproduce the behavior:

https://codesandbox.io/s/graphql-codegen-issue-template-5wg2v
Run yarn codegen

Document

mutation MyMutation ($file: Blob!) {
    uploadImage(file: $file) @client
}

Schema

scalar Blob

type Mutation {
    uploadImage(file: Blob!): String!
}

type Query {
    getImage: String!
}

Config

schema: schema.graphql
documents: document.graphql
generates:
  types.ts:
    plugins:
      - typescript
      - typescript-operations
    config:
      flattenGeneratedTypes: true

[dotansimha]

Hi @dizel3d !
You need to tell the codegen that you have this directive, and include it in your codegen schema, otherwise it will throw this error.

When using flattenGeneratedTypes, we use Relay compiler to optimize the selection set, and it must have those defined. Can you please try the following?

Do the following:

schema:
  - schema.graphql
  - client-schema.graphql

And in client-schema.graphql, put:

directive @client on FIELD

[dizel3d]

@dotansimha thank you! It works!

[iwakoscott]

I've followed the steps above but am still getting an issue. I am trying to extend type Mutation and extend type Query with my own custom mutations and queries that are used on the client side however, I keep running into an issue where -

GraphQLError: GraphQLDocumentError: Cannot query field "set
AuthId" on type "mutation_root".

but in my client-schema.graphql I've added -

extend type Mutation {
  setAuthId(userId: String): String!
}

any ideas what I am doing wrong? It looks like an issue with extending the root Mutation and Query types because I was able to extend a custom User type just fine. TIA

Update:
I was able to fix this by extending mutation_root and query_root instead of Mutation and Query -

extend type mutation_root {
  setAuthId(userId: String): String!
}

this is because I am using Hasura. They name their root Queries and Mutations as query_root and mutation_root

[ardatan]

@iwakoscott Could you create a new issue with a reproduction repo or CodeSandbox?

[iwakoscott]

@ardatan so, the reason why this is happening in my case I realized, is that I am using Hasura for my data. Hasura names their root Queries and Mutations like so -