Building a Minimal Chat System with Hasura Using GraphQL in Flutter
Ahona Das
In today's rapidly evolving technological landscape, the ability to create a minimal chat system has emerged as a fundamental skill for developers across various domains.
The importance of a well-designed chat system cannot be overstated, whether it's facilitating quick discussions among team members, providing customer support in real-time, or enabling social interaction among users.
This blog will guide you through building a simple chat application using Hasura, a real-time GraphQL engine.
Steps to Follow
What is GraphQL and subscription
Import GraphQL packages from pub.dev
create GraphQL client
Bloc state management
How do we implement a chat screen in which users can chat with each other?
Step 1: What is GraphQL and Subscriptions?
GraphQL makes getting data more accessible because clients can ask for what they need. Subscriptions let you see updates in real time by keeping a constant connection between your device and the server.
Step 2: Import GraphQL Package
To get started, import the GraphQL Flutter package from pub.dev. This powerful package seamlessly integrates GraphQL queries, mutations, and subscriptions into your Flutter app.
Step 3: Create GraphQL Client
Creating a GraphQL client in this project is necessary to efficiently fetch and manage data from a GraphQL server. It ensures the app can communicate effectively with the server, request specific data, and receive real-time updates, providing a seamless user experience.
Set up a GraphQL client with HTTP and WebSocket links, connecting it to your server URL.
import 'package:graphql_flutter/graphql_flutter.dart';
class GraphQLService {
static final GraphQLService _graphqlService = GraphQLService._internal();
factory GraphQLService() {
return _graphqlService;
}
GraphQLService._internal();
/// GraphQL client to handle queries and mutations operations
GraphQLClient client({String? uri, Map<String, String>? headers}) {
Map<String, String> defaultHeaders = {};
defaultHeaders.addAll(headers ?? {});
HttpLink link = HttpLink(
uri ?? "http://<IP ADDRESS OF SERVER URL>:<PORT NO.>/v1/graphql",
defaultHeaders: defaultHeaders,
);
final WebSocketLink websocketLink = WebSocketLink(
'ws://<IP ADDRESS OF SERVER URL>:<PORT NO.>/v1/graphql',
config: SocketClientConfig(
autoReconnect: true,
headers: headers,
inactivityTimeout: const Duration(seconds: 30),
),
);
Link currentLink =
Link.split((request) => request.isSubscription, websocketLink, link);
final client = GraphQLClient(
link: currentLink,
cache: GraphQLCache(
store: InMemoryStore(),
),
defaultPolicies: DefaultPolicies(
watchQuery: Policies(fetch: FetchPolicy.cacheAndNetwork),
watchMutation: Policies(fetch: FetchPolicy.cacheAndNetwork),
query: Policies(fetch: FetchPolicy.cacheAndNetwork),
mutate: Policies(fetch: FetchPolicy.cacheAndNetwork),
),
);
return client;
}
}
Step 4: Bloc State Management
Bloc state management in Flutter helps keep the user interface separate from the business logic by using Events, Blocs, and States. This makes the code easier to understand and maintain, and it's great for building bigger Flutter apps because it handles state changes efficiently.
In our app, we made a bloc like the one below.
Message Bloc:
The MessageBloc class manages messages in a Flutter app, connecting it to a GraphQL server. It retrieves messages and sends new ones, using variables like offset and limit for fetching messages in parts for implementing pagination. When fetching, it shows loading signs to keep users updated. If successful, it shows success, or failure with error messages. The _sendMessage function reliably sends messages, handling both success and failure scenarios.
Overall, the MessageBloc ensures smooth communication between users, managing messages effectively. Its features like pagination and error handling improve the user experience by making it more seamless and reliable.
- message_bloc.dart
class MessageBloc extends Bloc<MessageBlocEvent, MessageBlocState> {
QueryResult<Mutation_SENDMESSAGE>? sendMessage;
List<Object> messages = [];
int offset = 0;
int limit = 20;
bool isLoading = false;
MessageBloc() : super(MessageBlocInitialState()) {
on<GetMessage>(_getMessage);
on<SendMessage>(_sendMessage);
}
FutureOr<void> _getMessage(
GetMessage event, Emitter<MessageBlocState> emit) async {
try {
if (event.firstTime) {
emit(MessageBlocLoadingState());
offset = 0;
} else {
isLoading = true;
}
//fetch all messages according to offset
QueryResult<Query_GET_All_MESSAGE> message =
await event.client.query_GET_All_MESSAGE(
Options_Query_GET_All_MESSAGE(
variables: Variables_Query_GET_All_MESSAGE(
chat_id: event.chatId, offset: offset, limit: limit),
),
);
if (message.data != null) {
if (event.firstTime) {
messages = message.parsedData?.chat_messages ?? [];
} else {
messages.addAll(message.parsedData?.chat_messages ?? []);
}
if (message.parsedData?.chat_messages.isNotEmpty == true) {
offset = offset + limit;
}
isLoading = false;
emit(MessageBlocSuccessState());
} else {
isLoading = false;
if (isUserUpdated.data == null) {
emit(MessageBlocFailedState(
error: isUserUpdated.exception?.graphqlErrors[0].message ??
"Failed to update user status"));
} else {
emit(MessageBlocFailedState(
error: message.exception?.graphqlErrors[0].message ??
"Failed to fetch messages"));
}
}
} catch (e) {
isLoading = false;
emit(MessageBlocFailedState(error: e.toString()));
}
}
}
// Event handler to send a message
FutureOr<void> _sendMessage(SendMessage event, Emitter<ChatBlocState> emit) async {
try {
sendMessage = await event.client.mutate_SENDMESSAGE(
Options_Mutation_SENDMESSAGE(
variables: Variables_Mutation_SENDMESSAGE(
chatId: event.chatId,
chatMessage: event.message,
senderId: event.senderId,
),
),
);
if (sendMessage?.data != null) {
emit(SendMessageSuccessState());
} else {
emit(SendMessageFailedState(
error: sendMessage?.exception?.graphqlErrors[0].message ?? "Failed to send message",
));
}
} catch (e) {
emit(SendMessageFailedState(error: e.toString()));
}
}
message_bloc_event.dart
class MessageBlocEvent {}
// Event to get messages
class GetMessage extends MessageBlocEvent {
final GraphQLClient client;
final String chatId;
final bool firstTime;
GetMessage(
{required this.client, required this.chatId, required this.firstTime});
}
// Event to send a message
class SendMessage extends ChatBlocEvent {
final String chatId;
final String message;
final String senderId;
final GraphQLClient client;
SendMessage({
required this.chatId,
required this.message,
required this.senderId,
required this.client,
});
}
message_bloc_state.dart
class MessageBlocState {}
class MessageBlocInitialState extends MessageBlocState {}
class MessageBlocLoadingState extends MessageBlocState {}
class MessageBlocSuccessState extends MessageBlocState {}
class MessageBlocFailedState extends MessageBlocState {
final String error;
MessageBlocFailedState({required this.error});
}
//send message
class SendMessageSuccessState extends ChatBlocState {}
class SendMessageFailedState extends ChatBlocState {
final String error;
SendMessageFailedState({required this.error});
}
Step 5: How Do You Implement a Chat Screen in Which Users Can Chat with Each Other?
Query: This Query we are using for fetching previous messages
query GET_All_MESSAGE($chat_id: uuid!, $offset: Int!, $limit: Int!) {
chat_messages(where: {chat_id: {_eq: $chat_id}}, limit: $limit, order_by: {created_at: desc}, offset: $offset) {
chat_id
message
id
created_at
sender_id
}
}
Mutation: This mutation will be used on sending messages
mutation SENDMESSAGE($chatId: String!, $chatMessage: String!, $senderId: String!) {
sendmessage(input: {senderId: $senderId, chatMessage: $chatMessage, chatId: $chatId}) {
status
message
success
}
}
Subscription: This Subscription will be use for fetching last message of chat room with input as chat id
static String fetchMessages = '''
subscription ChatMessages(){
chat_messages(order_by: {created_at: desc}, limit: 1) {
chat_id
id
message
sender_id
}
}
''';
We add a listener to the _scrollController to detect when the user reaches the top of the screen, indicating a need for previous chats. Scrolling up triggers the event to fetch previous messages, ensuring smooth navigation and access to chat history.
EVENT: GetMessage
To implement pagination, the firstTime parameter in the GetMessage event controls message retrieval. When set to true, it fetches the first 20 messages, and when set to false, it fetches the next 20 previous messages, enabling smooth navigation and loading of chat history in the app.
@override
void initState() {
super.initState();
_scrollController.addListener(_scrollListener);
chatBloc = BlocProvider.of<ChatBloc>(context);
authBloc = BlocProvider.of<AuthBloc>(context);
messageBloc = BlocProvider.of<MessageBloc>(context);
messageBloc.add(GetMessage(
client: authBloc.state, chatId: chatId, firstTime: true));
}
@override
void dispose() {
_scrollController.removeListener(_scrollListener);
_scrollController.dispose();
super.dispose();
}
void _scrollListener() {
if (_scrollController.position.pixels == 0) {
firstTime = false;
messageBloc.add(GetMessage(
client: authBloc.state, chatId: chatId, firstTime: false));
setState(() {});
}
}
This is how you can use subscription for getting realtime message updates of this chat room
Subscription(
options: SubscriptionOptions(
document: gql(fetchMessages),
variables: {"chat_id": widget.chatId}),
builder: (QueryResult result) {
if (result.data?["chat_messages"].isNotEmpty == true) {
addNewMessageToList(Query_GET_All_MESSAGE_chat_messages(
id: result.data?["chat_messages"][0]["id"],
created_at: DateTime.now().toString(),
message: result.data?["chat_messages"][0]["message"],
sender_id: result.data?["chat_messages"][0]
["sender_id"]));
} else if (result.hasException) {
// Handle subscription errors
return Center(
child: Text(
'Subscription Error: ${result.exception?.graphqlErrors[0].message}'),
);
}
// reverse a list when we are displaying so that latest message should come at last message of screen.
return ListView.builder(
controller: _scrollController,
itemCount:
messageBloc.messages.reversed.length,
shrinkWrap: true,
physics:
const AlwaysScrollableScrollPhysics(),
itemBuilder: (context, index) {
// this checks,who send this message and get type by comparing of our user id
String type = messageBloc
.messages.reversed
.toList()[index]
.sender_id ==
userId
? "sender"
: "reciever";
// this formattedDate we are using in display dates between the messages
String? formattedDate;
if ((index - 1) > 0) {
DateTime current = DateTime.parse(
messageBloc.messages.reversed
.toList()[index]
.created_at);
DateTime next = DateTime.parse(
messageBloc.messages.reversed
.toList()[index - 1]
.created_at);
if (current.day != next.day) {
formattedDate =
DateFormat('E, d MMM yyyy')
.format(current);
}
} else if (index == 0) {
formattedDate =
DateFormat('E, d MMM yyyy').format(
DateTime.parse(messageBloc
.messages.reversed
.toList()[index]
.created_at));
}
//return chat bubble component which you can use to display
// item of this list, making like this if it is of type reciever align left if sender align right in a screen
);
}
)
If a message is received from the subscription, it's added to the list only if it's not already there. This prevents duplicates and ensures new messages are included in the existing list seamlessly.
void addNewMessageToList(Query_GET_All_MESSAGE_chat_messages message) {
List<Query_GET_All_MESSAGE_chat_messages> currentMessages =
messageBloc.messages;
messageBloc.messages = [];
bool isExist = currentMessages.any((element) => element.id == message.id);
if (!isExist) {
messageBloc.messages.add(message);
Future.delayed(Duration(milliseconds: 50), () {
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
});
}
messageBloc.messages.addAll(currentMessages);
_controller.clear();
}
Conclusion
Using GraphQL subscriptions in a Flutter chat app means instant updates without refreshing. It's like getting notifications for new messages, making chatting quick and effortlessly responsive.
This article was written by Sumit Soni, Software Engineer - I, for the GeekyAnts blog.
Subscribe to my newsletter
Read articles from Ahona Das directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by