dotansimha / dotansimha/graphql-code-generator-community

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

Open
#107 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
137
Forks
195
Avg merge
6h 20m
Merged PRs (30d)
16

Description

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:
```js
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.
```yaml
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!

Contributor guide

No contributing guide indexed for this repository

Research direction

The issue names the near-operation-file and import-types presets and shows a GraphQL Code Generator YAML configuration, but no repository files or tests. Start by reading the documentation and preset entry points for both presets, then check whether the requested separate types.ts and per-operation generated files are supported together. Done means a documented configuration or a clearly documented limitation.

Written by the indexing model from the issue text.

Assessment

Tech stack
graphql, react, typescript
Domain
tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.