# Building a Minimal Chat System with Hasura Using GraphQL in Flutter

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](https://geekyants.com/hire-flutter-developers/).

![Screenshot 2024-01-16 at 12.58.38 PM.png](https://geekyants.com/_next/image/?url=https%3A%2F%2Fstatic-cdn.geekyants.com%2Farticleblogcomponent%2F25218%2F2024-02-19%2F212666292-1708345576.png&w=3840&q=75 align="left")

## **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.

```plaintext
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
    

```plaintext

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

```plaintext
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

```plaintext
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

```plaintext
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

```plaintext
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

```plaintext
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.

```plaintext
@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

```plaintext
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.

```plaintext
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](https://geekyants.com/en-gb/customizable-app/build-custom-chat-and-messaging-app/) [app mea](https://geekyants.com/en-gb/customizable-app/build-custom-chat-and-messaging-app/)ns i[nstant upd](https://geekyants.com/en-gb/customizable-app/build-custom-chat-and-messaging-app/)ates 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.](https://geekyants.com/blog/building-a-minimal-chat-system-with-hasura-using-graphql-in-flutter/)