Playground API
Stop Waiting for the Backend • Part 25 of 121 min read•2026-09-20

Real-Time GraphQL Subscriptions in React & Apollo Client Without a Backend

Learn how to connect Apollo Client or URQL to hosted real-time GraphQL subscriptions over WebSocket using Playground API.

NK
Nilesh Kumar
Creator of Playground API
Real-Time GraphQL Subscriptions in React & Apollo Client Without a Backend

Real-Time GraphQL Subscriptions in React & Apollo Client Without a Backend

Setting up GraphQL Subscriptions on the client usually requires an elaborate Apollo Server or GraphQL Yoga backend with a Redis PubSub adapter and a WebSocket transport server (graphql-ws).

When you're building a UI prototype—like a live feed, collaborative task board, or trading ticker—setting up that infrastructure just to see if your React components update in real time slows you down.

Playground API now provides hosted GraphQL Subscriptions over WebSocket linked directly to stateful sandbox mutations!

1. The GraphQL Subscription Schema

Playground API exposes reactive subscription hooks for all standard resources:

graphql
1
subscription OnPostAdded {
2
postAdded {
3
id
4
title
5
body
6
user_id
7
created_at
8
}
9
}
10
11
subscription OnTodoUpdated {
12
todoUpdated {
13
id
14
title
15
completed
16
}
17
}

2. Connecting with Apollo Client & graphql-ws

Here is how you set up Apollo Client with WebSocket link transport:

typescript
1
import { ApolloClient, InMemoryCache, split, HttpLink } from '@apollo/client';
2
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
3
import { createClient } from 'graphql-ws';
4
import { getMainDefinition } from '@apollo/client/utilities';
5
6
const httpLink = new HttpLink({
7
uri: 'https://playground.nileslabs.com/graphql',
8
});
9
10
const wsLink = new GraphQLWsLink(
11
createClient({
12
url: 'wss://playground.nileslabs.com/graphql-ws',
13
})
14
);
15
16
const splitLink = split(
17
({ query }) => {
18
const definition = getMainDefinition(query);
19
return (
20
definition.kind === 'OperationDefinition' &&
21
definition.operation === 'subscription'
22
);
23
},
24
wsLink,
25
httpLink
26
);
27
28
export const client = new ApolloClient({
29
link: splitLink,
30
cache: new InMemoryCache(),
31
});

3. Consuming Subscriptions in a React Component

tsx
1
import { useSubscription, gql } from '@apollo/client';
2
3
const POST_ADDED_SUBSCRIPTION = gql
4
subscription {
5
postAdded {
6
id
7
title
8
body
9
}
10
}
11
;
12
13
export function LivePostFeed() {
14
const { data, loading } = useSubscription(POST_ADDED_SUBSCRIPTION);
15
16
return (
17
<div>
18
<h3>Live Post Feed</h3>
19
{loading && <p>Listening for real-time posts...</p>}
20
{data?.postAdded && (
21
<div className="card">
22
<h4>{data.postAdded.title}</h4>
23
<p>{data.postAdded.body}</p>
24
</div>
25
)}
26
</div>
27
);
28
}

4. Triggering Mutations & Live Updates

Whenever you (or another test runner) fire a GraphQL mutation or a standard REST POST /posts request in your session, Playground API broadcasts the event over the graphql-ws link in real time!

Try it in the interactive GraphQL Studio:

👉 https://playground.nileslabs.com/docs/graphql

Tags:#graphql#react#javascript#apollo
Series: Stop Waiting for the Backend
Part 25 of 12
Previous Article (#24)
Supercharging Frontend Development with the Playground API DevTools Extension
Next Article (#26)
How to Test CSV & Excel Export Buttons in React Without Writing Backend Exporters

Try Playground API in Your Own App

Stateful mock REST & GraphQL API with private sandbox overlays.

Quickstart GuideOpen Interactive Studio