dotansimha / dotansimha/graphql-code-generator

Smaller graphql client bundles without babel/swc plugins

Open
#9,780 1 comment 5 reactions 0 assignees View on GitHub
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 the client-preset docs' [reducing bundle size](https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size) advice offers three approaches:
- use the babel plugin
- use the (experimental) swc plugin
- use the `string` document mode

I'm currently looking at adopting Rspack for our builds, and we use @apollo/client for queries, so none of these options are viable.

### Describe the solution you'd like

I think an alternative option would be to:
- keep the typescript overloads for matching queries to TypedDocumentNodes
- but allow the generated `graphql` function to parse documents at runtime

Currently the latter is not configurable, and the graphql function always expects to be able to look up queries in a map.
```ts
export function graphql(source: string) {
return (documents as any)[source] ?? {};
}
```

However, an alternative implementation which would still work and produce much smaller bundles could be
```ts
import { gql } from "@apollo/client";
export function graphql(source: string) {
return gql(source);
}
```

This does move the parsing work to the client, but at least parsing is done on-demand per-query rather than doing them all up-front.

Have I overlooked something which would mean this is a bad idea? I'd be happy to contribute an implementation if it's something you'd be open to.

### Describe alternatives you've considered

_No response_

### Is your feature request related to a problem? Please describe.

_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.