A GraphQL fragment is a shared piece of query logic.
There are two principal uses for fragments in Apollo:
- Sharing fields between multiple queries, mutations or subscriptions.
- Breaking your queries up to allow you to co-locate field access with the places they are used.
The most straightforward use of fragments is to reuse parts of queries (or mutations or subscriptions) in various parts of your application. For instance, in GitHunt on the comments page, we want to fetch the same fields after posting a comment as we originally query. This way we can be sure that we render consistent comment objects as the data changes.
To do so, we can simply share a fragment describing the fields we need for a comment:
We put the fragment on
CommentsPage.fragments.comment by convention, and use the familiar
gql helper to create it.
When it’s time to embed the fragment in a query, we simply use the
...Name syntax in our GraphQL, and embed the fragment inside our query GraphQL document:
You can see the full source code to the
CommentsPage in GitHunt here.
A key advantage of GraphQL is the tree-like nature of the response data, which in many cases mirrors your rendered component hierarchy. This, combined with GraphQL’s support for fragments, allows you to split your queries up in such a way that the various fields fetched by the queries are located right alongside the code that uses the field.
Although this technique doesn’t always make sense (for instance it’s not always the case that the GraphQL schema is driven by the UI requirements), when it does, it’s possible to use some patterns in Apollo client to take full advantage of it.
In GitHunt, we show an example of this on the
FeedPage, which constructs the follow view hierarchy:
FeedPage conducts a query to fetch a list of
Entrys, and each of the subcomponents requires different subfields of each
graphql-anywhere package gives us tools to easily construct a single query that provides all the fields that each subcomponent needs, and allows to easily pass the exact field that a component needs to it.
To create the fragments, we again use the
gql helper and attach to subfields of
ComponentClass.fragment, for example:
One nice tool that the
graphql-anywhere package gives us is a
PropType checker that we can use to ensure that we do indeed receive those fields in the component’s
If our fragments include sub-fragments then we can pass them into the
Filtering With Fragments
We can also use the
graphql-anywhere package to filter the exact fields from the
entry before passing them to the subcomponent. So when we render a
VoteButtons, we can simply do:
filter() function will grab exactly the fields from the
entry that the fragment defines.
Importing fragments when using Webpack
.graphql files with graphql-tag/loader, we can include fragments using
import statements. For example:
Will make the contents of
someFragment.graphql available to the current file. See the Webpack Fragments section for additional details.