Smaller graphql client bundles without babel/swc plugins

[glenjamin]

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

Currently the client-preset docs' 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.

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

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

[glenjamin]

After writing this I've realised it won't work as proposed if fragment masking is enabled.

Although I think fragment masking could be handled with a runtime helper that only needs a map of fragments, not the whole queries