Unsubscribing in GraphQL - Mini Project: Build & Apply

GraphQL Subscription Unsubscribing

📖 Scenario: You are building a real-time chat application using GraphQL subscriptions. Users can subscribe to new messages in a chat room. To avoid receiving unwanted messages, users need to unsubscribe from the subscription when they leave the chat room.

🎯 Goal: Build a GraphQL subscription setup that allows subscribing to new messages and then unsubscribing properly to stop receiving updates.

📋 What You'll Learn

Create a GraphQL subscription called messageAdded that listens for new messages.

Create a variable called subscription to hold the subscription object.

Use the subscribe method to start the subscription and assign it to subscription.

Call the unsubscribe method on subscription to stop receiving messages.

💡 Why This Matters

🌍 Real World

Real-time applications like chat apps, live sports scores, or stock price updates use GraphQL subscriptions to get live data.

💼 Career

Understanding how to subscribe and unsubscribe in GraphQL is essential for building efficient and user-friendly real-time web applications.

1

Define the GraphQL subscription for new messages

Write a GraphQL subscription called messageAdded that listens for new messages with fields id and content.

GraphQL

subscription messageAdded {
  # Your code here
}

Hint

Use the subscription keyword and specify the fields id and content inside messageAdded.

2

Create a variable to hold the subscription object

Create a variable called subscription to hold the subscription object returned by the subscribe method.

GraphQL

subscription messageAdded {
  messageAdded {
    id
    content
  }
}

// Create a variable called subscription to hold the subscription object
// Your code here

Hint

Use const subscription = client.subscribe({ query: MESSAGE_ADDED }); to start the subscription.

3

Subscribe to the messageAdded subscription

Use the subscribe method on client with the MESSAGE_ADDED query and assign the result to the variable subscription.

GraphQL

subscription messageAdded {
  messageAdded {
    id
    content
  }
}

const subscription = client.subscribe({ query: MESSAGE_ADDED });

// Your code here to handle subscription data

Hint

Call subscription.subscribe with next and error handlers to receive messages.

4

Unsubscribe from the subscription

Call the unsubscribe method on the subscription object to stop receiving new messages.

GraphQL

subscription messageAdded {
  messageAdded {
    id
    content
  }
}

const subscription = client.subscribe({ query: MESSAGE_ADDED });

subscription.subscribe({
  next(data) {
    console.log('New message:', data);
  },
  error(err) {
    console.error('Subscription error:', err);
  }
});

// Call unsubscribe on subscription to stop updates
// Your code here

Hint

Simply call subscription.unsubscribe() to stop receiving messages.