Subscription syntax in GraphQL - Mini Project: Build & Apply

GraphQL Subscription Syntax Basics

📖 Scenario: You are building a real-time chat application where users can see new messages instantly without refreshing the page.

🎯 Goal: Create a GraphQL subscription to listen for new chat messages as they arrive.

📋 What You'll Learn

Define a subscription called messageAdded

The subscription should return id, content, and author fields of the new message

Use the correct GraphQL subscription syntax

💡 Why This Matters

🌍 Real World

Real-time updates are essential in chat apps, live sports scores, and notifications.

💼 Career

Understanding GraphQL subscriptions is valuable for building interactive, real-time web applications.

1

Define the Subscription Type

Write the GraphQL schema definition for a subscription type named Subscription that includes a field called messageAdded which returns a Message type.

GraphQL

# Write the subscription type definition here

Hint

Use type Subscription { messageAdded: Message } to define the subscription.

2

Define the Message Type

Add a GraphQL type called Message with fields id (ID!), content (String!), and author (String!).

GraphQL

type Subscription {
  messageAdded: Message
}

# Define the Message type here

Hint

Define Message with the required fields and types.

3

Write the Subscription Query

Write a GraphQL subscription query named SubscribeToMessages that listens to messageAdded and requests the id, content, and author fields.

GraphQL

type Subscription {
  messageAdded: Message
}

type Message {
  id: ID!
  content: String!
  author: String!
}

# Write the subscription query here

Hint

Use subscription SubscribeToMessages { messageAdded { id content author } } syntax.

4

Complete the Subscription Setup

Add a comment above the subscription query explaining that this subscription listens for new messages in real-time.

GraphQL

type Subscription {
  messageAdded: Message
}

type Message {
  id: ID!
  content: String!
  author: String!
}

# Add a comment explaining the subscription
subscription SubscribeToMessages {
  messageAdded {
    id
    content
    author
  }
}

Hint

Add a clear comment starting with # above the subscription query.