List types in GraphQL - Step-by-Step Execution

Concept Flow - List types

Define List Type

↓

Use square brackets [

↓

Specify element type inside brackets

↓

Apply list type in schema

↓

Query returns array of elements

↓

Access elements by index or iterate

List types in GraphQL are defined by wrapping a type in square brackets to represent an array of that type.

Execution Sample

GraphQL

type Query {
  books: [String]
}

query {
  books
}

Defines a query returning a list of strings, then queries that list.

Execution Table

Step	Action	Type/Value	Result/Output
1	Define 'books' field type	[String]	Field 'books' expects a list of strings
2	Write query to fetch 'books'	query { books }	Request list of strings
3	Server resolves 'books'	["Book A", "Book B", "Book C"]	Returns array of strings
4	Client receives response	{ "books": ["Book A", "Book B", "Book C"] }	Data is a list of strings
5	Access first element	books[0]	"Book A" - Access element by index
6	Iterate over list	for each book in books	"Book A", "Book B", "Book C" - Process each element
7	End	-	Query complete, list data handled

💡 Query completes after returning the list of strings.

Variable Tracker

Variable	Start	After 3	After 4	After 5	Final
books	undefined	["Book A", "Book B", "Book C"]	["Book A", "Book B", "Book C"]	"Book A"	["Book A", "Book B", "Book C"]

Key Moments - 3 Insights

Why do we use square brackets [] in GraphQL type definitions?

Square brackets indicate a list type, meaning the field returns multiple items of the specified type, as shown in execution_table step 1.

Is the list returned by a GraphQL query always ordered?

Yes, the list preserves order, so accessing by index like books[0] returns the first element, as seen in step 5.

Can the list contain null values or be empty?

Yes, lists can be empty or contain nulls unless specified otherwise with non-null modifiers, but this example shows a full list in step 3.

Visual Quiz - 3 Questions

Look at the execution_table, what type is the 'books' field defined as in step 1?

A [Int]

B String

C [String]

D Int

💡 Hint

Check the 'Type/Value' column in step 1 of the execution_table.

At which step does the client receive the list of books?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look for when the response data is shown in the execution_table.

If the 'books' list was empty, which step's output would change?

A Step 3

B Step 5

C Step 6

D Step 4

💡 Hint

Step 3 shows the server's resolved list value.

Concept Snapshot

List types in GraphQL use square brackets [] around a type.
They represent arrays of that type.
Example: [String] means a list of strings.
Queries return lists as arrays.
Access elements by index or iterate.
Lists preserve order and can be empty.

Full Transcript

In GraphQL, list types are defined by wrapping a type in square brackets, like [String], to indicate a list of that type. When a query requests a field with a list type, the server returns an array of those elements. The client receives this list and can access elements by index or iterate over them. Lists preserve the order of elements and can be empty or contain nulls unless specified otherwise. This visual trace showed defining a list type, querying it, receiving the list, and accessing elements step-by-step.

Practice

1. What does a list type in GraphQL represent?
[Int] means a list of what?

easy

A. A string value

B. A single integer

C. A collection of integers

D. A boolean value

Solution

1. Step 1: Understand list notation in GraphQL

   Square brackets [] indicate a list type that holds multiple values of the same type.

2. Step 2: Interpret [Int]

   This means a list containing zero or more integers.

3. Final Answer:

   A collection of integers -> Option C

4. Quick Check:

   List type = multiple values [OK]

Hint: Square brackets mean list of that type [OK]

Common Mistakes:

• Thinking it holds a single value
• Confusing list with string or boolean
• Ignoring the brackets meaning

2. Which of the following is the correct syntax to define a list of strings in GraphQL?

easy

A. string[]

B. [String]

C. (String[])

D. {String}

Solution

1. Step 1: Recall GraphQL list syntax

   GraphQL uses square brackets [] around a type to define a list.

2. Step 2: Identify correct option

   [String] is the correct way to define a list of strings in GraphQL.

3. Final Answer:

   [String] -> Option B

4. Quick Check:

   List syntax = brackets around type [OK]

Hint: Use square brackets around type for lists [OK]

Common Mistakes:

• Using language-specific syntax like string[]
• Using parentheses or curly braces instead of brackets
• Missing brackets entirely

3. Given this GraphQL schema snippet:

type Query {
  favoriteNumbers: [Int]
}

What is a valid response for favoriteNumbers?

medium

A. {1, 2, 3}

B. 42

C. "[1, 2, 3]"

D. [1, 2, 3]

Solution

1. Step 1: Understand the field type

   favoriteNumbers is a list of integers, so the response must be a list (array) of numbers.

2. Step 2: Check each option

   [1, 2, 3] is a list of integers. 42 is a single integer, not a list. "[1, 2, 3]" is a string, not a list. {1, 2, 3} uses curly braces which is invalid syntax.

3. Final Answer:

   [1, 2, 3] -> Option D

4. Quick Check:

   List field returns list value [OK]

Hint: List fields return arrays, not single values [OK]

Common Mistakes:

• Returning a single value instead of a list
• Returning a string instead of a list
• Using wrong brackets for lists

4. Identify the error in this GraphQL list type declaration:

type User {
  tags: [String
}

medium

A. Missing closing bracket "]" for the list type

B. List types cannot hold strings

C. Square brackets should be replaced with parentheses

D. Field name cannot be "tags"

Solution

1. Step 1: Check list type syntax

   List types require both opening and closing square brackets around the type.

2. Step 2: Locate syntax error

   The closing bracket "]" is missing after String, causing a syntax error.

3. Final Answer:

   Missing closing bracket "]" for the list type -> Option A

4. Quick Check:

   List syntax needs matching brackets [OK]

Hint: Always close brackets in list types [OK]

Common Mistakes:

• Forgetting the closing bracket
• Using wrong brackets like parentheses
• Thinking list can't hold strings

5. You want to define a GraphQL field that can return null or a list of non-null integers, but the list itself can be empty. Which type declaration is correct?

hard

A. [Int!]

B. [Int]!

C. [Int!]!

D. Int!

Solution

1. Step 1: Understand non-null and list syntax

   Int! means non-null integer, [Int!] means list of non-null integers, list itself can be null or empty.

2. Step 2: Analyze options

   [Int!]: List of non-null integers, list nullable (can be empty).[Int]!: Non-null list of nullable integers.[Int!]!: Non-null list of non-null integers (list cannot be null).Int!: Single non-null integer, not a list.

3. Final Answer:

   [Int!] -> Option A

4. Quick Check:

   Non-null items inside nullable list = [Int!] [OK]

Hint: Non-null items inside list use [Type!] [OK]

Common Mistakes:

• Making list itself non-null when it should be nullable
• Confusing non-null item vs non-null list
• Using single type instead of list