Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to GraphQL

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Using Aliases to Rename Fields

3:37 with Isaac Lee Morris

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

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up