How to use both near-operation-file-preset and import-types-preset with typescript and react

[millievn]

I want to generate typing declear once in single file and other files just import its type from it when i start working with react,typescript and graphql

Although near-operation-file-preset generates a file per each operation file,every file repeats typing declear. And import-types-preset helps import types from file but it can not generate files like near-operation-file-preset .
One more thing is that near-operation-file-preset contains both types and components ,while splited to single file may be better i think.

What I want may look like this:

graphql
|--test1.graphql  // query and mutations
|--test1.generated.tsx  // components and hooks without types
|--test2.graphql  
|--test2.generated.tsx
|--types.ts   // types

But I find it's hard to work with both.

overwrite: true
schema: './schema.graphql'
documents: 'src/**/*.graphql'
generates:
  src/graphql/types.tsx:
    - typescript
  src/graphql/:
    preset:
      # near-operation-file
      import-types
    presetConfig:
      # extension: .generated.tsx
      # baseTypesPath: types.ts
      typesPath: types.ts
    plugins:
      - time:
        format: DD.MM.YY
        message: 'The file generated in: '
      - typescript
      - typescript-operations
      - typescript-react-apollo
    config:
      withHOC: true
      withHooks: true
      skipTypename: true

Does anyone can help me ?
Thanks a lot!

[dotansimha]

This use case is not supported yet. PRs are welcome!

[millievn]

This use case is not supported yet. PRs are welcome!

sad to hear that especially a rookie like me.
thanks a lot anyway.

[karl-run]

I was exploring this as well, it turns out if you have the typescript plugin it generates a lot of unnecessary duplicates. I just removed the typescript plugin as it's not needed, and it removed over 5k lines of duplicated types, instead importing them from the shared types file, without having to use the import-types preset.

[dotansimha]

@karl-run yeah because typescript generates the base types. It should be generated once into a single file. Then, each operation file should point to that file in order to load the base types from it, and choose the fields that it needs from it.

[EmirBoyaci]

@karl-run yeah because typescript generates the base types. It should be generated once into a single file. Then, each operation file should point to that file in order to load the base types from it, and choose the fields that it needs from it.

Hi, how can I do that? I was exploring this but couldn't find an example to be honest.

1- I want a single file for all typescript declarations (types.ts)
2- If needed I can have operations file (operations.ts)
3- Then, I want to generate 3-4 files with typescript-react-apollo plugin based on my "documents" field in codegen config (like: user.tsx for user operations, file.tsx for file operations, etc..)

Is it possible? If yes, how? Could you please help. In my current setup I have "typescript" plugin in my all generated files, when I run codegen I see that I have a lot of duplicates. Also, when I am trying to import some type my IDE is asking where to import that type. This is not feasible and I need to remove that code duplication.

Thanks,
Emir

[NilsNathorst]

Bump.

I would love to know if there has been any updates on this topic?