QUESTION: Variables are not properly generated for a query, what am i missing

[woss]

Query Document

query RenditionByCid($cid: String!) {
  rendition: renditionByCid(cid: $cid) {
    cid
    height
    imageStoragePath
    isMaster
    width
    updatedAt
    media {
      copyrightOwners {
        identifier
        name
      }
    }
  }
}

Codegen file:

overwrite: true
schema:
  - '../../data/schema.graphql'
documents:
  - '../macula/src/**/*.graphql'
generates:
  graphqlSdk.ts:
    plugins:
      - add: '/* DO NOT EDIT! This file is auto-generated by graphql-code-generator - see `codegens/server.yml` */'
      - typescript
      - typescript-resolvers
      - typescript-graphql-request
    config:
      useIndexSignature: true
      rawRequest: true

And the getSdk which has an issue:

// more code above

const defaultWrapper: SdkFunctionWrapper = sdkFunction => sdkFunction();
export function getSdk(client: GraphQLClient, withWrapper: SdkFunctionWrapper = defaultWrapper) {
  return {
    RenditionByCid(variables: RenditionByCidQueryVariables): Promise<{ data?: RenditionByCidQuery | undefined; extensions?: any; headers: Headers; status: number; errors?: GraphQLError[] | undefined; }> {
        return withWrapper(() => client.rawRequest<RenditionByCidQuery>(print(RenditionByCidDocument), variables));
    }
  };
}

This code will produce an error and failing to compile. The errors are:

• Cannot find name 'RenditionByCidQueryVariables'.ts(2304)
• Cannot find name 'RenditionByCidQuery'.ts(2304)
• Cannot find name 'RenditionByCidQuery'.ts(2304)

the schema.graphql is generated by Postgraphile server, and it is ok, since i am having another condegen config for the react based app.

Any idea what is going on? What am i missing Thanks

[calirvine]

This is old, so probably not needed anymore, but I found this issue when trying to figure out what was going on with this problem myself.

If you run into this issue after following the example on the codegen site, you need to add typescript-operations to your plugins array (and the matching dev dependency @graphql-codegen/typescript-operations to your project).