[GraphQL] Reuse Query Fields with GraphQL Fragments

Posted 2021-02-02 answer1215

A GraphQL fragment encapsulates a collection of fields that can be included in queries. In this video, we‘ll look at how to create fragments on types to reduce the amount of typing that needs to occur as queries become more complex. We‘ll use the GitHub API to test.

 

We have:

# Type queries into this side of the screen, and you will 
# see intelligent typeaheads aware of the current GraphQL type schema, 
# live syntax, and validation errors highlighted within the text.

# We‘ll get you started with a simple query showing your username!
query { 
  organization(login: "moonhighway") {
    email,
    url,
    repository(name: "learning-graphql") {
      url,
      description
    }
  },
  repository(owner:"facebook" name:"graphql"){
    url,
    description,
    name,
    languages(first:1){
      nodes {
        name
      }
    }
  }
}

 

To resue ‘url‘, ‘description‘ for Repository, we can create fragment:

fragment CommonFields on Repository {
  url,
  description
}

 

Therefore, we can reuse it:

# Type queries into this side of the screen, and you will 
# see intelligent typeaheads aware of the current GraphQL type schema, 
# live syntax, and validation errors highlighted within the text.

# We‘ll get you started with a simple query showing your username!
query { 
  organization(login: "moonhighway") {
    email,
    url,
    repository(name: "learning-graphql") {
      ...CommonFields
    }
  },
  repository(owner:"facebook" name:"graphql"){
    ...CommonFields
    name,
    languages(first:1){
      nodes {
        name
      }
    }
  }
}

fragment CommonFields on Repository {
  url,
  description
}