Query Arguments and Variables

# CHAPTER 8

Query Arguments and Variables #

1. Introduction #

2. Learning Objectives #

• Understand how to pass arguments to fields in a query.

• Identify the problems with string concatenation (hardcoding) in queries.

• Define and use GraphQL Variables in your operations.

• Combine variables with Operation Names to create reusable queries.

3. Beginner-Friendly Explanation #

But how does the machine know what settings you want if you are using an app? You use Variables. Instead of building a new button for every possible combination, you build one generic button (the Query), and when you press it, you send a separate slip of paper (the Variables) that says "Size: Large, Milk: Yes." The machine reads the slip and makes exactly what you want.

4. Real-World Examples #

• Search Bar: A user types "Laptop" into a search bar. The frontend sends a single, reusable SearchProducts query to the server, passing "Laptop" as a Variable.

• Pagination: When a user clicks "Page 2" on a list of articles, the frontend sends a query passing the variables limit: 10 and offset: 10.

5. Detailed Code Examples #

The Wrong Way (Hardcoded / String Concatenation): *Do not do this in your JavaScript! It is prone to errors and injection attacks.*

// BAD PRACTICE
const id = getSelectedUserId();
const query = `query { getUser(id: "${id}") { name } }`;

The Right Way (Using Variables): First, we write the query with variable definitions. Variables in GraphQL always start with a dollar sign ($).

# 1. Define the Operation Name and the Variables it accepts
query GetUserById($userId: ID!) {
  
  # 2. Pass the variable into the field argument
  getUser(id: $userId) {
    name
    email
  }
}

Then, from the client (JavaScript/PHP), we send a JSON payload containing BOTH the query and a separate variables object.

{
  "query": "query GetUserById($userId: ID!) { getUser(id: $userId) { name } }",
  "variables": {
    "userId": "42"
  }
}

6. Query Examples (Pagination) #

query GetProducts($limit: Int, $category: String) {
  products(limit: $limit, category: $category) {
    name
    price
  }
}

Variables Payload:

{
  "limit": 5,
  "category": "ELECTRONICS"
}

7. Mutation Examples #

mutation RegisterUser($name: String!, $email: String!, $pass: String!) {
  createUser(name: $name, email: $email, password: $pass) {
    id
    success
  }
}

8. Schema Examples (Input Types) #

Schema SDL:

input UserInput {
  name: String!
  email: String!
  age: Int
}

type Mutation {
  createUser(input: UserInput!): User
}

The Query with Input Variable:

mutation CreateNewUser($userData: UserInput!) {
  createUser(input: $userData) {
    id
  }
}

9. Best Practices #

• Never Concatenate Strings: Always use GraphQL variables to pass dynamic data. It allows the server to cache the query structure and protects against injection vulnerabilities.

• Match the Types Exactly: If your schema says an argument is an Int!, your variable definition must also be $myVar: Int!. If they don't match, GraphQL will throw a validation error before executing the query.

• Use Default Variables: You can assign default values to variables directly in the query. Example: query GetPosts($limit: Int = 10) { ... }

10. Common Mistakes #

• Forgetting the $ symbol: Variables must be prefixed with $ in the query string, but *not* in the JSON variables payload sent from the client.

• Type Mismatch: A common error is defining a variable as a String when the schema requires an ID.

11. Mini Exercises #

1. 1. Look at this query: query Search($term: String!) { ... }. Is the $term variable required or optional?

1. 2. Write the JSON variables payload to pass the word "Shoes" into the $term variable.

12. Coding Challenges #

13. MCQs with Answers #

14. Interview Questions #

• Q: Explain how a client application sends dynamic data to a GraphQL server using variables.

• Q: What is an input type in GraphQL and when would you use it instead of standard arguments?

• Q: How does GraphQL handle type validation for variables?

15. FAQs #

Q: Do I need an Operation Name to use variables? A: Yes. In order to define the variable types (e.g., ($id: ID!)), you must provide an Operation Name or at least the query or mutation keyword.

16. Summary #

17. Next Chapter Recommendation #