• Some Arbitrary Number of lesser-known GraphQL Features
• Original author: david.js
• The Nuggets translation Project
• Permanent link to this article: github.com/xitu/gold-m…
• Translator: hansonfang
• Proofreader: Rachelcdev, LHD951220

Little-known GraphQL feature

New Web technologies appear every time you turn your head. Seems like just yesterday, GrapQL was one of them. But in fact, GraphQL has been around for almost five years. Can not help but make people sigh the passage of time.

While GraphQL is a relatively old thing, it’s still a novelty to most software engineers. If you’re one of the many software engineers out there, try the water — run, it’s a trap. I’m kidding. GraphQL is actually great, I hope you’re not scared off.

The following list is just the features of the GraphQL client, so that you can use it on any GraphQL sender without any special changes to the server. (Maybe NEXT time I’ll write about the lesser-known GraphQL server features.)

Without further ado, here are some of the lesser-known GraphQL features that I’ve listed below, and they’re pretty neat.

For the example API in this article, I used the SpaceX GraphQL API.

1. Field alias

Aliases allow you to rename a field in a query. Here is a sample query that changes the field CEO to bossMan:

query CEO {
  company {
    bossMan: ceo
  }
}
Copy the code

The parse returns the following data:

{
  "data": {
    "company": {
      "bossMan": "Elon Musk"}}}Copy the code

That’s a little example, but let’s go to something more useful.

Aliases can also be used to retrieve data sets with different names in the same GraphQL field. For example, I want to get two rockets and rename them according to their ids:

query Ships {
  falcon1: rocket(id: "falcon1") {
    id
    active
    height {
      meters
    }
  }
  falconheavy: rocket(id: "falconheavy") {
    id
    active
    height {
      meters
    }
  }
}
Copy the code

The parse returns the following data:

{
  "data": {
    "falcon1": {
      "id": "falcon1"."active": false."height": {
        "meters": 22.25}},"falconheavy": {
      "id": "falconheavy"."active": true."height": {
        "meters": 70}}}}Copy the code

Segments of 2.

The fragment can reuse a common statement that is used multiple times in a query or change. As demonstrated below, you can reconstruct the previous example to get ship information.

fragment shipDetails on Rocket {
  id
  active
  height {
    meters
  }
}

query Ships {
  falcon1: rocket(id: "falcon1") {
    ...shipDetails
  }
  falconheavy: rocket(id: "falconheavy") {
    ...shipDetails
  }
}
Copy the code

Note that in the fragment, you need to use on [Type] to specify which fields are available on the fragment. This will be very useful for auto-complete, and it is important to catch errors when using fragments to prevent type mismatches.

3. Default variables

When a query is written in an application, variables are usually passed to the query to change the query at run time. Just like function default parameters in JavaScript, GraphQL can take advantage of default values.

Let’s query a rocket and set the default rocket information to “falconheavy”. It’s awesome. 🚀

query Ship($rocketId: ID! = "falconheavy") {
  rocket(id: $rocketId)  {
    id
    active
    height {
      meters
    }
  }
}
Copy the code

Extra: snippets with variables

Yes! Variables can even be used in fragments. This seems a little strange to me because the use of a variable seems to go beyond what it defines, but it does work.

fragment ship on Query {
  rocket(id: $rocketId)  {
    id
    active
    height {
      meters
    }
  }
}
query Ship($rocketId: ID = "falconheavy") {
  ...ship
}
Copy the code

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.