Create Subscription and Render Result

Open src/data/online_fetch.dart and add the following code.

+static String fetchUsers = """
+ subscription fetchOnlineUsers {
+ online_users {
+ user {
+ name
+ }
+ }
+ }
+ """;

Open screens/tabs/dashboard/online.dart Now, Wrap the ListView with Subscription widget passing GraphQL subscription string.

Subscription(
options: SubscriptionOptions(
document: gql(
OnlineFetch.fetchUsers,
),
),
builder: (result) {
if (result.hasException) {
return Text(result.exception.toString());
}
if (result.isLoading) {
return Center(
child: const CircularProgressIndicator(),
);
}
return Expanded(
child: ListView.builder(
itemCount: onlineList.list.length,
itemCount: payload['online_users'].length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
title: Text(onlineList.list[index]),
title: Text(payload['online_users'][index]['user']['name']),
),
);
},
),
);
},
),

How does this work?

We are using the Subscription widget which gives payload (similar to data in the Query and Mutation widget) of the realtime data for the query we have made.

Refresh your 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.

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin