dotansimha / dotansimha/graphql-code-generator
Add support for removing fragments in a payload
- Dominant language
- TypeScript
- Stars
- 11.3k
- Forks
- 1.4k
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 23
Description
### Is your feature request related to a problem? Please describe.
Currently I am working on a project where we've adhered to [fragment co-location](https://dev.to/ricardoromox/colocated-fragments-organizing-your-graphql-queries-in-react-24a6). It seems like this approach has been well adopted and recommended by the community, but now, after refactoring our codebase, we've encountered problems with our query complexity, due to the large payloads we send to our backend.
For example, take the example payload from below
```gql
query users {
users {
...userInfo
}
}
fragment userInfo on User {
...basicUserInfo
...moreUserInfo
}
fragment basicUserInfo on User {
id
name
}
fragment moreUserInfo on User {
# ... more fields here
discussions {
...discussions
}
}
fragment discussions on Discussions {
messages {
...discussionMessages
}
}
fragment discussionMessages on Messages {
# ... so on and so forth
}
```
Querying with our generated code includes all fragments the query requires, and exponentially grows the overall size of our query and the complexity, which leads to slower response times.
This is the codegen config we're using for reference.
```ts
import type { CodegenConfig } from "@graphql-codegen/cli";
const config: CodegenConfig = {
overwrite: true,
schema: process.env.SCHEMA_PATH || "http://localhost:4000/graphql",
documents: [
"src/**/*.gql",
],
generates: {
"src/gql/index.tsx": {
plugins: [
"typescript",
"typescript-operations",
"typescript-react-apollo",
],
},
"./graphql.schema.json": {
plugins: [
"introspection",
],
},
},
};
export default config;
```
### Describe the solution you'd like
I'm wondering if there's a feature or plugin we could use to reduce the overall size of our query by stripping away the fragments in the generation process.
ie. the payload from above would get transformed into this (which at a large scale would exponentially reduce our payload size).
```gql
query users {
users {
id
name
discussions {
messages {
# ... so on and so forth
}
}
}
}
```
### Describe alternatives you've considered
I'm aware that there are a few options to accomplish something similar with types with configuration options like `flattenGeneratedTypes` but I cannot seem to find the equivalent for the actual payload.
I've also looked at [relay-operation-optimizer](https://the-guild.dev/graphql/codegen/plugins/typescript/relay-operation-optimizer) which seems to describe what I want to do, but the documentation quite frankly is too vague, and doesn't seem to work at all anymore (I saw in another issue that this was removed in favor of implementing its functionality directly in the codegen module itself).
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.