Tuesday, October 5, 2021

GraphQL - Use @skip and @include on fragments

GraphQL has multiple built-in directives like @deprecated, @include, @skip and some others like @stream and @defer that are not part of the official spec (yet).

With the @include directive you can conditionally include fields based on a specified argument:

The @skip directive does exactly the opposite and excludes fields based on a specified argument:

But applying these directives for every field that should be included or excluded feels like a lot of repetition:

Here is a trick for you, the @skip and @include directives can be used on fields, fragment spreads, and inline fragments. This can help us to make our GraphQL queries more readable.

Here is the example rewritten using an inline fragment:

And here is the same example with the fragment spread into the query: