Unsubscribing in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What happens when you unsubscribe from a GraphQL subscription?

In a GraphQL subscription, what is the expected behavior after a client unsubscribes?

A The server stops sending data updates to the client.

B The server continues sending data updates until the client reconnects.

C The client automatically reconnects and resubscribes.

D The server deletes all data related to the subscription.

💡 Hint

Think about what unsubscribing means in a real-life newsletter subscription.

Unsubscribing means the client no longer wants to receive updates, so the server stops sending data.

❓ query_result

intermediate

Identify the output after unsubscribing

Given a GraphQL subscription that sends live chat messages, what will the client receive after unsubscribing?

GraphQL

subscription {
  newMessage {
    id
    content
  }
}

// Client unsubscribes after receiving 3 messages

A All messages continue to be received.

B An error message indicating subscription ended.

C Only messages with id less than 3 are received.

D No more messages after the third one.

💡 Hint

Unsubscribing stops the flow of new data.

After unsubscribing, the client stops receiving any new messages.

📝 Syntax

advanced

Which code snippet correctly unsubscribes from a GraphQL subscription?

Select the code snippet that properly unsubscribes from a GraphQL subscription using JavaScript.

GraphQL

const subscription = client.subscribe({ query: NEW_MESSAGES });
// Unsubscribe code here

A client.unsubscribe(subscription);

B subscription.unsubscribe();

C subscription.stop();

D client.stopSubscription(subscription);

💡 Hint

Look for the method directly on the subscription object.

The unsubscribe() method is called on the subscription object to stop receiving updates.

❓ optimization

advanced

Optimizing resource usage after unsubscribing

Why is it important for the server to clean up resources after a client unsubscribes from a GraphQL subscription?

A To prevent memory leaks and reduce unnecessary processing.

B To keep the subscription active for faster reconnection.

C To send a confirmation message to the client.

D To archive the subscription data for analytics.

💡 Hint

Think about what happens if unused subscriptions stay active.

Cleaning up resources prevents the server from wasting memory and CPU on inactive subscriptions.

🔧 Debug

expert

Debugging why unsubscribing does not stop updates

A client unsubscribes from a GraphQL subscription but still receives updates. What is the most likely cause?

A The network connection is lost.

B The server does not support subscriptions.

C The unsubscribe method was not called correctly on the subscription object.

D The client is using a query instead of a subscription.

💡 Hint

Check how the client handles the subscription object.

If unsubscribe() is not called properly, the server keeps sending updates.

Practice

1.

What does calling unsubscribe() on a GraphQL subscription do?

easy

A. It pauses the subscription but keeps the connection alive.

B. It restarts the subscription to receive updates again.

C. It deletes the subscription from the server permanently.

D. It stops receiving live updates from the subscription.

Solution

1. Step 1: Understand the purpose of unsubscribe()

   The unsubscribe() method is designed to stop live updates from a GraphQL subscription.

2. Step 2: Differentiate from other actions

   It does not restart, delete permanently, or pause the subscription; it simply stops updates.

3. Final Answer:

   It stops receiving live updates from the subscription. -> Option D

4. Quick Check:

   Unsubscribe() stops updates = D [OK]

Hint: Remember: unsubscribe() means stop updates completely [OK]

Common Mistakes:

• Thinking unsubscribe() restarts the subscription
• Confusing unsubscribe() with deleting the subscription
• Assuming unsubscribe() only pauses updates

2.

Which of the following is the correct syntax to stop a GraphQL subscription stored in variable sub?

const sub = client.subscribe({ query: MY_SUBSCRIPTION });
// Stop subscription here

easy

A. sub.stop();

B. unsubscribe(sub);

C. sub.unsubscribe();

D. client.unsubscribe(sub);

Solution

1. Step 1: Identify the unsubscribe method on subscription object

   The subscription object returned by client.subscribe() has an unsubscribe() method to stop it.

2. Step 2: Match correct syntax

   Calling sub.unsubscribe(); correctly stops the subscription. Other options are invalid method calls.

3. Final Answer:

   sub.unsubscribe(); -> Option C

4. Quick Check:

   Call unsubscribe() on subscription object = A [OK]

Hint: Use unsubscribe() method on the subscription variable [OK]

Common Mistakes:

• Using unsubscribe() as a standalone function
• Calling stop() instead of unsubscribe()
• Trying to unsubscribe via client object

3.

Given the code below, what will be logged after sub.unsubscribe() is called?

const sub = client.subscribe({ query: MY_SUBSCRIPTION });
sub.subscribe({
  next(data) { console.log('Received:', data); },
  error(err) { console.error('Error:', err); }
});

sub.unsubscribe();

// Later, server sends new data

medium

A. An error will be logged because subscription is closed.

B. No logs will appear after unsubscribe is called.

C. Logs will continue showing 'Received:' with new data.

D. Logs will show 'Received:' once more then stop.

Solution

1. Step 1: Understand unsubscribe effect on subscription callbacks

   Calling unsubscribe() stops the subscription and prevents further next callbacks.

2. Step 2: Predict logging behavior after unsubscribe

   Since subscription is stopped, no new data triggers console.log, so no logs appear after unsubscribe.

3. Final Answer:

   No logs will appear after unsubscribe is called. -> Option B

4. Quick Check:

   Unsubscribe stops callbacks = C [OK]

Hint: After unsubscribe, no more data callbacks occur [OK]

Common Mistakes:

• Expecting data logs after unsubscribe
• Assuming unsubscribe triggers an error
• Thinking one last data event logs after unsubscribe

4.

Identify the error in the code below that prevents unsubscribing correctly:

const subscription = client.subscribe({ query: NEW_MESSAGES });
subscription.next({
  next(data) { console.log(data); }
});

subscription.unsubscribe();

medium

A. Using subscription.next() instead of subscription.subscribe().

B. Calling unsubscribe() before subscribing.

C. Missing error callback in subscription.

D. Not assigning subscription to a variable.

Solution

1. Step 1: Check subscription method usage

   The subscription object uses subscribe() to listen for data, not next().

2. Step 2: Identify correct method to receive data

   Replacing subscription.next() with subscription.subscribe() fixes the issue and allows unsubscribe to work properly.

3. Final Answer:

   Using subscription.next() instead of subscription.subscribe(). -> Option A

4. Quick Check:

   Use subscribe(), not next(), to listen = B [OK]

Hint: Use subscribe() method to listen, not next() [OK]

Common Mistakes:

• Calling next() instead of subscribe()
• Unsubscribing before subscribing
• Ignoring error callback (not critical here)

5.

You have multiple active subscriptions stored in an array subs. How do you efficiently unsubscribe from all of them?

const subs = [sub1, sub2, sub3];
// Your code here

hard

A. subs.forEach(s => s.unsubscribe());

B. subs.unsubscribe();

C. for (let i = 0; i < subs.length; i++) { unsubscribe(subs[i]); }

D. subs.map(s => s.stop());

Solution

1. Step 1: Understand unsubscribing multiple subscriptions

   Each subscription object has an unsubscribe() method to stop it individually.

2. Step 2: Use array iteration to call unsubscribe on each

   Using subs.forEach(s => s.unsubscribe()); calls unsubscribe on all subscriptions efficiently.

3. Final Answer:

   subs.forEach(s => s.unsubscribe()); -> Option A

4. Quick Check:

   Call unsubscribe() on each subscription in array = A [OK]

Hint: Use forEach to unsubscribe all in array [OK]

Common Mistakes:

• Calling unsubscribe() on the array itself
• Using stop() method which does not exist
• Trying to call unsubscribe() without iteration