Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Fields can overlap when you are querying the same field with different arguments. In this video we will discuss the syntax for aliasing a field and show a query with the same field aliased twice.
Course repo: Use this GitHub repo to follow along with this video in the course
(Apollo's Launchpad has been deprecated, so your screen will look different)
New Terms:
- Fragment - Reusable sets of fields that can be included in multiple queries; saves time from needing to manually include the same fields over and over in many places
Further Reading:
GraphQL Fragments are the Best Match for UI Components by Samer Buna
Up until this point, when we want
to include a field in our response,
0:00
we specify each field individually.
0:05
Now this is fine for experimenting,
but when building an actual project,
0:08
there's a good chance we'll need to
grab the same fields in multiple places.
0:13
Fortunately GraphQL makes this possible
with a concept called fragments.
0:18
A fragment is simply a block of code
0:24
that specifies a group of fields that
you want to include in your response.
0:27
To see how this works let's jump back
in the Launchpad for an example.
0:32
For this example, we'll be using
the movie by ID in point again,
0:36
aliased under movieOne and movieTwo.
0:41
Just like in the last video,
we'll start with our query declaration.
0:44
Then we'll go ahead and
write the first call the movieById,
0:49
which will be aliased under movieOne.
0:53
For this one,
we'll use the movieId of movie_0,
0:58
then in our response we'll include the id,
1:04
title, tagline, and revenue fields.
1:09
Now let's go ahead and
repeat the same thing for movieTwo.
1:14
Again, we've got the alias of
movieTwo calling movieById.
1:18
The movieId we'll use for
this one is movie_1.
1:25
And we'll go ahead and
include those same fields again,
1:32
id, title, tagline and revenue.
1:37
Right now when we want to
include the same fields for
1:41
each movie, we have to manually type those
fields out inside of each end point call.
1:43
Now go ahead and run the query.
1:50
As expected it works fine,
we have both of our movies, but
1:55
it was a little repetitive
to type it all out.
1:58
You can probably see how this
could get tedious pretty quickly.
2:02
This is exactly where
fragments come in handy.
2:06
To define a new fragment we'll
start with the fragment key word.
2:09
This fragment we'll call movie details.
2:14
We then need to tell GraphQL which
type this fragment can be used on
2:20
using the on keyword
followed by the Movie type.
2:25
After that,
it's just like any other query.
2:31
Inside of the curly
brackets we'll go ahead and
2:33
copy paste the fields we
used from our query above.
2:37
Now let's modify those queries a bit.
2:52
Inside of the curly brackets,
go ahead and delete those fields.
2:55
Now, instead of typing them all out,
we can just include our new fragment.
3:04
To do this type in three dots
followed by the fragment name,
3:09
which in this case is movieDetails.
3:13
I did the same thing for movieTwo.
3:19
Now go ahead and run that query.
3:24
As you can see, it works like a charm.
3:27
Using fragments when we need to
retrieve the same information
3:30
can save us quite a bit of time and
quite a bit of typing.
3:33
You need to sign up for Treehouse in order to download course files.
Sign up