Best way to bundle queries for client

[dios-david]

I was thinking what is the best way to bundle GraphQL queries for the client assets.

As the urql client can handle both strings and document nodes, bundling queries as strings would result in smaller bundles but more work on client as urql then needs to parse the query string to add the __typename fields for each selection sets. Btw is this step needed when not using Graphcache?

Another way is to pre-compile the queries to document nodes in build time and bundle queries as document nodes. This would probably increase the bundle size but reduce the work needed on the client. We can reduce the bundle size a bit by aliasing graphql/language/parser to an empty module, as the parser won't be needed on the client anymore.
Apollo only supports this approach btw.

Did I miss any key differences here? Is there a generally preferred choice, or is it mainly depends on the project itself?

[kitten]

I'd suggest to just measure what precompilation does on your end. Typically the GraphQL parser is fast enough that the timing of parsing isn't too significant.

If you're already using GraphQL Code Generator or similar tools then setting up precompilation is really simple too.

Aliasing is a good shout to remove the parser from the bundle output once you do have precompilation.

[Warxcell]

Coming from google: is it possible to remove entirely queries from bundle, if we are using persisted queries?
Queries takes huge chunk of whole code that is being transferred to the client - basically 25% of whole JS transferred.

[kitten]

Yes, for example see: https://gql-tada.0no.co/guides/persisted-documents

Persisted documents also have a host of other benefits. However, one of its major drawbacks are that it does not work with normalised caching with Graphcache.

Also to point this out though, with client-driven schemas that have been purpose-built for your UI 25% sounds unrealistic.
I'd also suggest to look at bundle sizes after gzipping.
If you use raw GraphQL syntax then those compress quite well.

[Warxcell]

It sounds cool, but is it possible to combine it with automatic persisted queries?

Send only query ID, if server returns 404 - then import async/lazily document - and send it to the server, along with the ID?

Something like:

query: {
   id: 'hash',
   document: () => import('@/graphql/api/query_name'')

}