[typescript-react-query] Does not use own types when combined with import-types and typescript-operations

[IanVS]

Describe the bug I would like to separate out my schema-types from operation-types+hooks, and I believe I've found the config which should accomplish it. However, when using import-types-preset, all of the types are referenced from the Types import, even if they're being exported from the same file.

To Reproduce Steps to reproduce the behavior:

https://codesandbox.io/s/graphql-code-generator-6909-lu5rm?file=/hooks.ts

Note typescript errors for Types.UserQuery, since UserQuery is defined in the same file, not ./types.

1. My GraphQL schema:

See reproduction

2. My GraphQL operations:

See reproduction

3. My codegen.yml config file:

generates:
  ./types.ts:
    plugins:
      - typescript
  ./hooks.ts:
    preset: import-types
    presetConfig:
      typesPath: ./types
    plugins:
      - typescript-operations
      - typescript-react-query

Expected behavior I expect that types being exported from hooks.ts are not attempted to be imported from types.ts.

Environment:

• OS: mac
• @graphql-codegen/...: latest, see reproduction
• NodeJS: 16

Additional context A similar issue which was recently fixed: https://github.com/dotansimha/graphql-code-generator/issues/6520

[Faithfinder]

Experiencing the same thing

[KamalAman]

I was very excited to find import-types until I ran thinik this issue. This seems like the most common use case, typescript-operations would be client specific and we want to share the generate Schema types across multiple clients. Please fix this :)

[AndrzejSala]

The same

[dotansimha]

I think not all plugins are supported by import-types. It mainly needs some adjustments to tell the plugins that they need to add imports / add namespace for the types used.

PRs are welcome!

[AndrzejSala]

In the title of this issue typescript-react-query was mentioned. It doesn't work for me for typescript-operations as well.

@dotansimha Where we can find a list of supported plugins by import-types preset?

From the technical point of view, what should be done is to check, whether the type definition is present in generated file or not. If not, it means that types come from imported file and there we need to add a types namespace (by default Types.).

[StampixSMO]

Voting for this as well. I need to split up my types in order to avoid circular dependencies and I cannot use import-types with react-query at the moment.

[AndrzejSala]

I'm looking at it. I'll prepare PR if I will have something useful.

[StampixSMO]

If anyone's interested, I have temporarily solved my issue in a hacky way. I run an automated post-codegen script that replaces Types.X with X if X's type is present in the file.

[AndrzejSala]

@StampixSMO Could share with us your solution? As my pr is not merged yet, I would be very interested in it.

[StampixSMO]

Sure, I added this file:

fix-types.js

const fs = require('fs');
const path = require('path');

const run = async () => {
  const file = path.join(__dirname, 'RELATIVE_PATH_TO_YOUR_GENERATED_FILE');
  let generatedContent = (await fs.promises.readFile(file)).toString();
  const reactQueryTypeMatches = Array.from(generatedContent.matchAll(/type (.+) =/g));
  for (const match of reactQueryTypeMatches) {
    const type = match[1];
    console.log(type);
    generatedContent = generatedContent.replace(new RegExp(`Types.${type}`, 'g'), type);
  }
  await fs.promises.writeFile(file, generatedContent);
};

run().catch((err) => {
  console.error(err);
  process.exit(1);
});

Then I run a hook in my codegen.yml file

hooks:
      afterOneFileWrite:
        - yarn graphql:codegen:fix

Then I added a graphql:codegen:fix script in my package.json that runs fix-types.js

[Poolshark]

Same issue here! Is there another option than hacking into the generation process?