dotansimha / dotansimha/graphql-code-generator-community

Codegen generates unused types from the schema

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

Description

### Which packages are impacted by your issue?

_No response_

### Describe the bug

I'm using codegen with typescript-operations and typescript-react-apollo to generate types for a graphql query. Here is the config:

```ts
import { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
schema: {
'http://localhost:8080/api': {
headers: {
Authorization: 'Bearer XXX',
},
},
},
documents: ['./**/*.graphql'],
debug: true,
ignoreNoDocuments: true,
generates: {
'modules/gql/': {
plugins: ['typescript-operations', 'typescript-react-apollo'],
preset: 'near-operation-file',
presetConfig: {
baseTypesPath: 'types.ts',
importAllFragmentsFrom: 'types.ts',
},
config: {
useTypeImports: true,
avoidOptionals: true,
extractAllFieldsToTypes: true,
skipTypename: true,
mergeFragmentTypes: true,
withHooks: false,
flattenGeneratedTypes: true,
flattenGeneratedTypesIncludeFragments: true,
dedupeFragments: true,
},
},
},
};

export default config;
```

I have the following query in a file:

```ts
query FooterNavigation {
entries(section: "footerNavigation", hasDescendants: true) {
title
descendants {
__typename
title
... on footerNavigation_footerNavigation_Entry {
__typename
id
pageLink {
... on pageLink_external_BlockType {
id
openInNewTab
title
externalUrl
}
... on pageLink_internal_BlockType {
id
internalEntry {
title
url
}
}
... on pageLink_product_BlockType {
id
productEntry {
title
url
}
}
... on pageLink_commerce_BlockType {
id
productEntry {
title
url
}
}
}
}
}
}
}
```

The issue is that using the above config, I get following types for footernavigation_footerNavigation_Entry:
![Screenshot 2024-05-23 at 16 01 28](https://github.com/dotansimha/graphql-code-generator/assets/7857336/81673fb7-68c9-4cff-a207-ea5389906ac5)

Where `FooterNavigationQuery_entries_about_about_Entry_descendants` is an array of all possible types here from schema (which is huge), but in the query used for this component, I'm interested only in the last one from the screenshot: `FooterNavigationQuery_entries_about_about_Entry_descendants_footerNavigation_footerNavigation_Entry`

I don't understand why I'm getting unused types generated here, even if I've tried with related plugin options. In order to use this, I must type thin in a component by asking for __typename and again checking the type:

```ts
if (data.__typename !== 'footerNavigation_footerNavigation_Entry') {
return null;
}

return data.pageLink.map(item => {
if (item?.__typename === 'pageLink_commerce_BlockType')
return 'la';
if (item?.__typename === 'pageLink_external_BlockType')
return 'la'
if (item?.__typename === 'pageLink_internal_BlockType')
return 'la'
if (item?.__typename === 'pageLink_product_BlockType')
return 'la'
})
```
Which seems unnecessary since the query itself is querying just the footer-related fields. If I remove __typename in a query, I'll still get multiple types, just without that field. By using typename I can at least target the correct type, but it seems like unnecessary work. Thanks!

### Your Example Website or App

localhost

### Steps to Reproduce the Bug or Issue

/

### Expected behavior

I expect to get single type for the provided field in the query.

### Screenshots or Videos

_No response_

### Platform

- OS: macOS
- NodeJS: 20
- `graphql` v16.8.1
- `@graphql-codegen/*` 5.0.2

### Codegen Config File

/* eslint-disable import/no-extraneous-dependencies */
import { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
schema: {
'http://localhost:8080/api': {
headers: {
Authorization: 'Bearer xxx',
},
},
},
documents: ['./**/*.graphql'],
debug: true,
ignoreNoDocuments: true,
generates: {
'modules/gql/': {
plugins: ['typescript-operations', 'typescript-react-apollo'],
preset: 'near-operation-file',
presetConfig: {
baseTypesPath: 'types.ts',
importAllFragmentsFrom: 'types.ts',
},
config: {
useTypeImports: true,
avoidOptionals: true,
extractAllFieldsToTypes: true,
skipTypename: true,
mergeFragmentTypes: true,
withHooks: false,
flattenGeneratedTypes: true,
flattenGeneratedTypesIncludeFragments: true,
dedupeFragments: true,
},
},
},
};

export default config;

### Additional context

_No response_

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.