@graphql-tools/relay-operation-optimizer is a package for bringing the benefits of Relay Compiler to GraphQL tools. This package is used in
flattenGeneratedTypes feature of GraphQL Code Generator.
Current List of Features
- Optimize Queries TL;DR: reduce query size
- Inline Fragments
- Flatten Transform
- Skip Redundant Node Transform
yarn add -D -E @graphql-tools/relay-operation-optimizer
Taken from the blog post Optimizing your Apollo Operations with GraphQL Code Generator and the Relay Compiler.
Let’s take a look at the following Fragment:
How would you reuse this fragment with different values for the
Previously there have been two ways:
1. Write a new fragment with different parameters
Well, just creating a new document for our avatar won’t really solve the reusability issue.
2. Use variables and rely on the query to have those defined
Actually, you can already use variables inside fragments. We just need to ensure that the query that uses the fragment also has those variables in the variable definition.
However, we now rely on having those parameters provided in each query that uses that fragment.
This does not really make the fragment reusable. Imagine having a profile query of a with a friend list. The profile picture should be bigger than the ones of the friends.
It is basically impossible to use a different width and height for the second usage of the fragment in that query.
Furthermore, when using different fragments you have to be really careful with your variable names, because of variable name clashes.
Given those limitations, it is pretty obvious that this “solution” does not scale well.
Relay simply uses custom GraphQL directives to address this issue.
Defining Fragment Variables with
Providing Fragment Variables with
Pretty powerful, right?
Unfortunately, you cannot simply use those fragments with your existing GraphQL Server.
@arguments are some custom directives that need to be understood by the server in order to process them.
However, instead of implementing those directives on the serverside Relay went another route. The
relay-compiler removes those directives at build time. That means after our query has been processed it looks something like the following:
Pretty neat. This allows the query the be accepted by every GraphQL server (that, of course, provides the correct schema), without relying on those custom directives.
relay-compiler is awesome!
It comes with a lot more transforms. Some of those are specific to the
relay-runtime (which as the name says is executed in the browser of the user like react-apollo), but others are definitely also beneficial to non-relay users.
Besides the so-called
RelayApplyFragmentArgumentTransform there is a bunch of more useful stuff.
FlattenTransform can improve our query even more:
Of course, you can also read more about those in the Official Relay Documentation.
Especially on big queries, that utilize many fragments, those transforms can drastically reduce the query payload size, resulting in faster response times. For developers that cannot use persisted queries (because they do not own the server), this is a must-have!