Best way to bundle queries for client #1252
-
|
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 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 Did I miss any key differences here? Is there a generally preferred choice, or is it mainly depends on the project itself? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 2 replies
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Coming from google: is it possible to remove entirely queries from bundle, if we are using persisted queries? |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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: |
Beta Was this translation helpful? Give feedback.
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.