Gateway composition in GraphQL - Step-by-Step Execution

Concept Flow - Gateway composition

Client sends query

↓

Gateway receives query

↓

Gateway splits query into subqueries

↓

Send subqueries to respective services

↓

Services process subqueries

↓

Services return partial results

↓

Gateway merges partial results

↓

Gateway returns combined result to client

The gateway receives a client query, splits it into parts for different services, collects their responses, merges them, and sends back a single combined result.

Execution Sample

GraphQL

query {
  user(id: "1") {
    name
    posts {
      title
    }
  }
}

A client requests a user’s name and their posts’ titles; the gateway splits this to user and post services and combines the results.

Execution Table

Step	Action	Query/Response	Service	Result
1	Receive full query	{ user(id: "1") { name posts { title } } }	Gateway	Full query received
2	Split query	{ user(id: "1") { name } }	Gateway	User subquery created
3	Split query	{ posts(userId: "1") { title } }	Gateway	Post subquery created
4	Send subquery	{ user(id: "1") { name } }	User Service	Request sent
5	Send subquery	{ posts(userId: "1") { title } }	Post Service	Request sent
6	Receive response	{ name: "Alice" }	User Service	User data received
7	Receive response	{ posts: [{ title: "Hello World" }, { title: "GraphQL Rocks" }] }	Post Service	Post data received
8	Merge responses	{ user: { name: "Alice", posts: [{ title: "Hello World" }, { title: "GraphQL Rocks" }] } }	Gateway	Combined result created
9	Return combined result	{ user: { name: "Alice", posts: [{ title: "Hello World" }, { title: "GraphQL Rocks" }] } }	Gateway	Result sent to client
10	End			Query completed

💡 All subqueries processed and merged; final combined result returned to client.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 6	After Step 7	Final
fullQuery	null	{ user(id: "1") { name posts { title } } }	{ user(id: "1") { name posts { title } } }	{ user(id: "1") { name posts { title } } }	{ user(id: "1") { name posts { title } } }	null
userSubquery	null	{ user(id: "1") { name } }	{ user(id: "1") { name } }	{ name: "Alice" }	{ name: "Alice" }	{ name: "Alice" }
postSubquery	null	null	{ posts(userId: "1") { title } }	null	{ posts: [{ title: "Hello World" }, { title: "GraphQL Rocks" }] }	{ posts: [{ title: "Hello World" }, { title: "GraphQL Rocks" }] }
combinedResult	null	null	null	null	null	{ user: { name: "Alice", posts: [{ title: "Hello World" }, { title: "GraphQL Rocks" }] } }

Key Moments - 3 Insights

Why does the gateway split the query into subqueries?

Because each service owns part of the data, the gateway splits the query so each service can handle its part independently, as shown in steps 2 and 3 of the execution_table.

How does the gateway combine results from different services?

After receiving partial results from services (steps 6 and 7), the gateway merges them into one combined response (step 8), so the client gets a single unified answer.

What happens if one service is slow or fails?

The gateway waits for all services to respond before merging. If a service is slow or fails, the gateway may delay or return an error. This is why step 9 only happens after all responses are received.

Visual Quiz - 3 Questions

Look at the execution_table, what query does the gateway send to the Post Service?

A { user(id: "1") { name posts { title } } }

B { posts(userId: "1") { title } }

C { user(id: "1") { name } }

D { posts { title } }

💡 Hint

Check step 3 and 5 in the execution_table where the post subquery is created and sent.

At which step does the gateway merge the partial results?

A Step 6

B Step 7

C Step 8

D Step 9

💡 Hint

Look for the step labeled 'Merge responses' in the execution_table.

If the user service returned no name, how would the combined result change?

A The combined result would have user name as null or missing

B The combined result would not include posts

C The gateway would skip merging

D The gateway would send an error to the client immediately

💡 Hint

Refer to variable_tracker's combinedResult and how partial results affect it.

Concept Snapshot

Gateway Composition in GraphQL:
- Gateway receives full client query
- Splits query into subqueries per service
- Sends subqueries to respective services
- Receives partial results
- Merges results into one response
- Returns combined data to client

Full Transcript

Gateway composition in GraphQL works by the gateway receiving a full client query. It then splits this query into smaller subqueries, each targeting a specific service responsible for part of the data. The gateway sends these subqueries to the respective services. Each service processes its subquery and returns partial results. The gateway waits for all responses, merges them into a single combined result, and sends this unified response back to the client. This process allows multiple services to work together seamlessly to fulfill a single client request.

Practice

1. What is the main purpose of gateway composition in GraphQL?

easy

A. To combine multiple GraphQL services into a single API endpoint

B. To create multiple endpoints for each service

C. To replace GraphQL with REST APIs

D. To disable client requests

Solution

1. Step 1: Understand gateway composition

   Gateway composition merges several GraphQL services into one unified API.

2. Step 2: Identify the main benefit

   This allows clients to send requests to a single endpoint instead of multiple services.

3. Final Answer:

   To combine multiple GraphQL services into a single API endpoint -> Option A

4. Quick Check:

   Gateway composition = single API endpoint [OK]

Hint: Gateway composition means one API endpoint for many services [OK]

Common Mistakes:

• Thinking it creates multiple endpoints
• Confusing with REST APIs
• Believing it disables client requests

2. Which of the following is the correct way to initialize ApolloGateway with two services named 'users' and 'products'?

easy

A. ApolloGateway({ services: ['users', 'products'] })

B. new ApolloGateway(services: ['users', 'products'])

C. new ApolloGateway({ services: [{ name: 'users', url: 'http://users' }, { name: 'products', url: 'http://products' }] })

D. new ApolloGateway({ endpoints: ['users', 'products'] })

Solution

1. Step 1: Recall ApolloGateway initialization syntax

   ApolloGateway expects an object with a 'services' array containing objects with 'name' and 'url'.

2. Step 2: Match the correct syntax

   new ApolloGateway({ services: [{ name: 'users', url: 'http://users' }, { name: 'products', url: 'http://products' }] }) correctly uses new ApolloGateway with services array of objects including name and url.

3. Final Answer:

   new ApolloGateway({ services: [{ name: 'users', url: 'http://users' }, { name: 'products', url: 'http://products' }] }) -> Option C

4. Quick Check:

   ApolloGateway needs services array with name and url [OK]

Hint: Use services array with name and url objects in ApolloGateway [OK]

Common Mistakes:

• Passing services as simple string array
• Using 'endpoints' instead of 'services'
• Omitting 'new' keyword

3. Given this ApolloGateway setup:

const gateway = new ApolloGateway({
  services: [
    { name: 'users', url: 'http://localhost:4001/graphql' },
    { name: 'products', url: 'http://localhost:4002/graphql' }
  ],
  __exposeQueryPlanExperimental: false
});

What will be the result if a client queries for a product's name and its owner's username?

medium

A. The gateway throws an error because __exposeQueryPlanExperimental is false

B. The gateway returns data only from 'products' service ignoring 'users'

C. The gateway returns empty data because services are unreachable

D. The gateway fetches data from both 'products' and 'users' services and returns combined result

Solution

1. Step 1: Understand gateway data fetching

   The gateway composes schemas and fetches data from all relevant services for the query.

2. Step 2: Analyze the query involving product and user data

   Since the query asks for product and owner username, gateway calls both 'products' and 'users' services.

3. Final Answer:

   The gateway fetches data from both 'products' and 'users' services and returns combined result -> Option D

4. Quick Check:

   Gateway combines data from multiple services [OK]

Hint: Gateway merges data from all services needed by query [OK]

Common Mistakes:

• Assuming gateway fetches from only one service
• Confusing __exposeQueryPlanExperimental with data fetching
• Assuming error without service failure

4. You wrote this ApolloGateway code but get an error:

const gateway = new ApolloGateway({
  services: [
    { name: 'users', url: 'http://localhost:4001/graphql' },
    { name: 'products' }
  ]
});

What is the likely cause of the error?

medium

A. Missing 'url' property for the 'products' service

B. Using 'services' instead of 'endpoints'

C. ApolloGateway requires only one service

D. The 'name' property should be 'serviceName'

Solution

1. Step 1: Check service definitions

   Each service object must have both 'name' and 'url' properties.

2. Step 2: Identify missing property

   The 'products' service lacks the 'url' property, causing the error.

3. Final Answer:

   Missing 'url' property for the 'products' service -> Option A

4. Quick Check:

   Each service needs name and url [OK]

Hint: Always include 'url' for each service in ApolloGateway [OK]

Common Mistakes:

• Confusing 'services' with 'endpoints'
• Thinking ApolloGateway supports single service only
• Using wrong property names

5. You want to disable subscriptions in your ApolloGateway setup while composing three services. Which is the correct way to do this?

hard

A. Set subscriptions: false inside each service definition in ApolloGateway

B. Pass { subscriptions: false } in ApolloServer constructor, not in ApolloGateway

C. Add subscriptions: false in ApolloGateway constructor options

D. Disable subscriptions by removing the 'subscriptions' field from the schema

Solution

1. Step 1: Understand where to disable subscriptions

   Subscriptions are disabled in ApolloServer, not ApolloGateway.

2. Step 2: Apply correct configuration

   Pass { subscriptions: false } as an option to ApolloServer constructor wrapping the gateway.

3. Final Answer:

   Pass { subscriptions: false } in ApolloServer constructor, not in ApolloGateway -> Option B

4. Quick Check:

   Disable subscriptions in ApolloServer, not ApolloGateway [OK]

Hint: Disable subscriptions in ApolloServer, not ApolloGateway [OK]

Common Mistakes:

• Trying to disable subscriptions inside ApolloGateway
• Removing schema fields instead of config
• Setting subscriptions false per service