add option to set name of the template literal tag to `amplify codegen`

[ygkn]

Is your feature request related to a problem? Please describe.

I wrote the GraphQL code because the generated queries, mutations, and subscriptions have the limitation that the depth cannot be changed one by one.

To generate the variables and response types for that code, I added src/**/*.ts andsrc/**/*.tsx to the includes in .graphqlconfig.yml.

...
    schemaPath: amplify/backend/api/<API_NAME>/build/schema.graphql
    includes:
      - src/**/*.ts
      - src/**/*.tsx
    excludes:
      - ./amplify/**
    extensions:
...

And I run graphql codegen, I get the following error:

$ amplify codegen                 
✔ Generated GraphQL operations successfully and saved at src/graphql
✖ Could not parse graphql operations in src/components/ButtonLink.tsx
  Failed on : appearance-none inline-block px-10 py-3 rounded-full text-center whitespace-no-wrap

This is because template string literals that are not GraphQL code are recognized as GraphQL code.

Describe the solution you'd like To avoid this, I need the tagName option to set a tag or magic comment to distinguish between template string literals in GraphQL code and others.

This option exists as a tagName argument in thegenerate function of graphql-types-generator, but has been forced to '' by amplify-codegen.

I need this option in a config file such as .graphqlconfig.yml.

Please let me know if there is any other way I can type variables and responses in my GraphQL code.

[ygkn]

I found how to generate type of queries, mutations, and subscriptions I wrote in https://github.com/aws-amplify/amplify-cli/issues/2420#issuecomment-537844610 .

You can add this query in src/graphl directory of your project in a separate file - say custom-queries.ts and then run amplify codegen again to regenerate the API.service.ts having the queries present in your custom-queries.ts file.

But I think this should be mentioned in the documentation.

[ManAnRuck]

for me it's important to define custom template literal tag. this should be possible to place queries near my components and not in one place.

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels for those types of questions.