Gateway composition in GraphQL - Mini Project: Build & Apply

Build a GraphQL Gateway with Schema Composition

📖 Scenario: You are building a GraphQL gateway that combines two separate services: Users and Products. Each service has its own schema. Your gateway will compose these schemas into one unified schema so clients can query both users and products from a single endpoint.

🎯 Goal: Create a GraphQL gateway schema by composing two service schemas: User and Product. You will define the initial schemas, add configuration for schema stitching, compose the schemas, and finalize the gateway schema.

📋 What You'll Learn

Create two GraphQL schemas as strings: userSchema and productSchema with specified types

Add a configuration variable gatewayConfig to hold schema stitching options

Compose the two schemas into one unified schema using makeExecutableSchema and mergeSchemas

Export the final composed schema as gatewaySchema

💡 Why This Matters

🌍 Real World

GraphQL gateway composition is used in microservice architectures to combine multiple GraphQL APIs into a single endpoint for clients.

💼 Career

Understanding schema composition is essential for backend developers working with GraphQL in distributed systems and API gateways.

1

Define User and Product schemas

Create two GraphQL schema strings called userSchema and productSchema. userSchema should define a User type with fields id: ID! and name: String!. productSchema should define a Product type with fields id: ID! and title: String!.

GraphQL

# Define userSchema and productSchema as GraphQL schema strings
# Your code here

Hint

Define userSchema and productSchema as template strings with the exact type definitions.

2

Add gateway configuration for schema stitching

Create a configuration object called gatewayConfig with a property schemas that is an array containing userSchema and productSchema.

GraphQL

const userSchema = `
  type User {
    id: ID!
    name: String!
  }
  type Query {
    users: [User]
  }
`;

const productSchema = `
  type Product {
    id: ID!
    title: String!
  }
  type Query {
    products: [Product]
  }
`;

// Create gatewayConfig with schemas array
# Your code here

Hint

Define gatewayConfig as an object with a schemas property that holds both schema strings.

3

Compose schemas into one executable schema

Use makeExecutableSchema from @graphql-tools/schema to create executable schemas from userSchema and productSchema. Then use mergeSchemas from @graphql-tools/merge to combine them into one schema. Assign the result to a variable called composedSchema.

GraphQL

const userSchema = `
  type User {
    id: ID!
    name: String!
  }
  type Query {
    users: [User]
  }
`;

const productSchema = `
  type Product {
    id: ID!
    title: String!
  }
  type Query {
    products: [Product]
  }
`;

const gatewayConfig = {
  schemas: [userSchema, productSchema]
};

import { makeExecutableSchema } from '@graphql-tools/schema';
import { mergeSchemas } from '@graphql-tools/merge';

// Compose schemas here
# Your code here

Hint

Create executable schemas from the schema strings, then merge them into one schema.

4

Export the final gateway schema

Export the composed schema by assigning composedSchema to a constant called gatewaySchema and export it as the default export.

GraphQL

const userSchema = `
  type User {
    id: ID!
    name: String!
  }
  type Query {
    users: [User]
  }
`;

const productSchema = `
  type Product {
    id: ID!
    title: String!
  }
  type Query {
    products: [Product]
  }
`;

const gatewayConfig = {
  schemas: [userSchema, productSchema]
};

import { makeExecutableSchema } from '@graphql-tools/schema';
import { mergeSchemas } from '@graphql-tools/merge';

const executableUserSchema = makeExecutableSchema({ typeDefs: userSchema });
const executableProductSchema = makeExecutableSchema({ typeDefs: productSchema });

const composedSchema = mergeSchemas({
  schemas: [executableUserSchema, executableProductSchema]
});

// Export gatewaySchema here
# Your code here

Hint

Assign composedSchema to gatewaySchema and export it as default.

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