Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic 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 Launchpad: Use this Launchpad to follow along with this video in the course
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
-
0:00
Up until this point, when we want to include a field in our response,
-
0:05
we specify each field individually.
-
0:08
Now this is fine for experimenting, but when building an actual project,
-
0:13
there's a good chance we'll need to grab the same fields in multiple places.
-
0:18
Fortunately GraphQL makes this possible with a concept called fragments.
-
0:24
A fragment is simply a block of code
-
0:27
that specifies a group of fields that you want to include in your response.
-
0:32
To see how this works let's jump back in the Launchpad for an example.
-
0:36
For this example, we'll be using the movie by ID in point again,
-
0:41
aliased under movieOne and movieTwo.
-
0:44
Just like in the last video, we'll start with our query declaration.
-
0:49
Then we'll go ahead and write the first call the movieById,
-
0:53
which will be aliased under movieOne.
-
0:58
For this one, we'll use the movieId of movie_0,
-
1:04
then in our response we'll include the id,
-
1:09
title, tagline, and revenue fields.
-
1:14
Now let's go ahead and repeat the same thing for movieTwo.
-
1:18
Again, we've got the alias of movieTwo calling movieById.
-
1:25
The movieId we'll use for this one is movie_1.
-
1:32
And we'll go ahead and include those same fields again,
-
1:37
id, title, tagline and revenue.
-
1:41
Right now when we want to include the same fields for
-
1:43
each movie, we have to manually type those fields out inside of each end point call.
-
1:50
Now go ahead and run the query.
-
1:55
As expected it works fine, we have both of our movies, but
-
1:58
it was a little repetitive to type it all out.
-
2:02
You can probably see how this could get tedious pretty quickly.
-
2:06
This is exactly where fragments come in handy.
-
2:09
To define a new fragment we'll start with the fragment key word.
-
2:14
This fragment we'll call movie details.
-
2:20
We then need to tell GraphQL which type this fragment can be used on
-
2:25
using the on keyword followed by the Movie type.
-
2:31
After that, it's just like any other query.
-
2:33
Inside of the curly brackets we'll go ahead and
-
2:37
copy paste the fields we used from our query above.
-
2:52
Now let's modify those queries a bit.
-
2:55
Inside of the curly brackets, go ahead and delete those fields.
-
3:04
Now, instead of typing them all out, we can just include our new fragment.
-
3:09
To do this type in three dots followed by the fragment name,
-
3:13
which in this case is movieDetails.
-
3:19
I did the same thing for movieTwo.
-
3:24
Now go ahead and run that query.
-
3:27
As you can see, it works like a charm.
-
3:30
Using fragments when we need to retrieve the same information
-
3:33
can save us quite a bit of time and quite a bit of typing.
You need to sign up for Treehouse in order to download course files.
Sign up