GraphQL Aliases

# CHAPTER 13

GraphQL Aliases #

1. Introduction #

2. Learning Objectives #

• Understand why naming conflicts occur in GraphQL queries.

• Define what an Alias is and how it solves naming collisions.

• Apply the syntax for aliasing fields and objects in a query.

• Use aliases to execute multiple similar queries in a single request.

3. Beginner-Friendly Explanation #

In GraphQL, if you ask the server for user(id: 1) and user(id: 2) in the same query, the server gets confused because the JSON response can only have one key called "user". An Alias is you putting a sticky note on the cup. You tell GraphQL: "Fetch user 1, but call it adminUser. Fetch user 2, but call it guestUser." This allows the server to hand you back perfectly labeled data.

4. Real-World Examples #

• Comparing Products: An E-commerce site wants to compare two laptops side-by-side. The frontend sends one query fetching product(id: 1) and product(id: 2). It aliases them as laptopA and laptopB so the frontend UI knows exactly where to place the data.

• Dashboard Metrics: A dashboard needs to show "Active Users" and "Suspended Users". It calls the users(status: ACTIVE) and users(status: SUSPENDED) queries simultaneously, aliasing them appropriately.

5. Detailed Code Examples #

The Problem (This will throw an error!):

query {
  # Error: Field "user" conflicts because it's used twice!
  user(id: "1") { name }
  user(id: "2") { name }
}

The Solution (Using Aliases): To use an alias, you put the custom name you want, followed by a colon (:), before the actual field name.

query CompareUsers {
  # Alias : Actual Field
  adminUser: user(id: "1") {
    name
    email
  }
  
  guestUser: user(id: "2") {
    name
    email
  }
}

6. The JSON Response #

{
  "data": {
    "adminUser": {
      "name": "Jane Doe",
      "email": "jane@example.com"
    },
    "guestUser": {
      "name": "John Smith",
      "email": "john@example.com"
    }
  }
}

7. Aliasing Scalar Fields #

query {
  product(id: "99") {
    # The frontend expects 'title', but the DB uses 'productName'
    title: productName
    price
    # Formatting a URL
    thumbnail: imageUrl(size: "SMALL")
    largeImage: imageUrl(size: "LARGE")
  }
}

8. Aliasing in Mutations #

mutation CreateTwoUsers {
  firstCreation: createUser(name: "Alice") { id }
  secondCreation: createUser(name: "Bob") { id }
}

9. Best Practices #

• Use for formatting: Use aliases to map backend schema names to the exact variable names your frontend framework (like React or Vue) expects. It saves you from writing transformation functions in JavaScript.

• Combine with Fragments: You can use aliases alongside fragments.

10. Common Mistakes #

• Putting the colon in the wrong place: The syntax is always YourCustomName : SchemaFieldName. Beginners often swap them by accident.

• Overusing Aliases: If you don't have a naming collision, you usually don't need an alias. Overusing them can make the query confusing for other developers who are comparing it to the official Schema documentation.

11. Mini Exercises #

1. 1. Look at this query: avatar: profilePicture(size: "sm"). What will the key be named in the resulting JSON response?

1. 2. If you want to fetch totalCount but want the JSON to return it as visitors, how would you write the alias?

12. Coding Challenges #

13. MCQs with Answers #

14. Interview Questions #

• Q: If a frontend application needs to display statistics for "This Week" and "Last Week" using the same getStats(timeframe) field, how would you construct the GraphQL request?

• Q: How does an alias affect the backend resolver? Does the PHP code know about the alias?

15. FAQs #

Q: Can I use variables inside aliased fields? A: Absolutely. userOne: user(id: $firstId) works perfectly.

16. Summary #

17. Next Chapter Recommendation #