Create Subscription and Render Result

Let's create a ReScript module for online users subscription query

module OnlineUsersSubscription = %graphql(`
subscription getOnlineUsers {
online_users(order_by: [{ user: { name: asc } }]) {
id
user {
name
}
}
}
`)

We can integrate the subscription query in react query as shown below.

@react.component
let make = () => {
let onlineUsersResult = OnlineUsersSubscription.use()
switch onlineUsersResult {
| {loading: true} => <span> {React.string("Loading...")} </span>
| {data: Some({online_users})} => <OnlineUsers online_users={online_users} />
| {error: Some(_error)} => <span> {React.string("Error!")} </span>
}
}

How does this work?

Since OnlineUsersSubscription is a GraphQL subscription query, OnlineUsersSubscription.use() uses useSubscription React hook of Apollo. We are using the useSubscription React hook which returns properties (similar to useQuery and useMutation React hooks). The data property gives the result of the realtime data for the query we have made.

Refresh your react app and see yourself online! Don't be surprised; There could be other users online as well.

Awesome! You have completed implementations of a GraphQL Query, Mutation and Subscriptions.

Close

Get Started with GraphQL Now

Hasura Cloud gives you a fully managed, production ready GraphQL API as a service to help you build modern apps faster.
Ready to get started?
Start for free on Hasura Cloud or you could contact our sales team for a detailed walk-through on how Hasura may benefit your business.
Stay in the know
Sign up for full access to our community highlights, new features, and occasional baby animal gifs! Oh, and we have a strict no-spam rule. โœŒ๏ธ