Building a realtime chat application with Javascript and GraphQL

27 Sep 2023

hashtags

Are you looking to build a robust and scalable chat application? Look no further! In this tutorial, we’ll explore how to utilize Javascript and the power of GraphQL to create a realtime chat application.

What is GraphQL?

GraphQL is an open-source query language and runtime that allows clients to request specific data from APIs. It provides a flexible syntax for describing the shape of the data required and allows clients to receive exactly what they need. GraphQL also enables real-time communication through subscriptions, making it an ideal choice for building chat applications.

Prerequisites

Before we dive into building the chat application, let’s ensure we have the necessary prerequisites in place:

Node.js: Make sure you have Node.js installed on your machine. You can download it from the official website.
NPM: NPM will be automatically installed along with Node.js.
GraphQL Server: To build our chat application, we’ll need a GraphQL server to handle client requests and subscriptions.

Setting up the GraphQL Server

To set up the GraphQL server, follow these steps:

Initialize a new Node.js project using npm init.
Install the necessary dependencies by running npm install graphql express apollo-server.
Create a new JavaScript file, say server.js, and import the necessary modules:

const { ApolloServer, PubSub } = require('apollo-server');
const { GraphQLScalarType } = require('graphql');
const { Kind } = require('graphql/language');
const pubsub = new PubSub();

Define your GraphQL schema and resolvers:

const typeDefs = `
  scalar Date

  type Message {
    id: ID!
    content: String!
    sender: String!
    createdAt: Date!
  }

  type Query {
    messages: [Message!]!
  }

  type Mutation {
    sendMessage(content: String!, sender: String!): Message!
  }

  type Subscription {
    newMessage: Message!
  }
`;

const resolvers = {
  Date: new GraphQLScalarType({
    name: 'Date',
    description: 'Custom scalar type for representing dates',
    parseValue(value) {
      return new Date(value);
    },
    serialize(value) {
      return value.getTime();
    },
    parseLiteral(ast) {
      if (ast.kind === Kind.INT) {
        return new Date(parseInt(ast.value, 10));
      }
      return null;
    },
  }),
  Query: {
    messages: () => Message.find().sort({ createdAt: 'asc' }),
  },
  Mutation: {
    sendMessage: async (root, { content, sender }) => {
      const message = await Message.create({ content, sender });
      pubsub.publish('NEW_MESSAGE', { newMessage: message });
      return message;
    },
  },
  Subscription: {
    newMessage: {
      subscribe: () => pubsub.asyncIterator('NEW_MESSAGE'),
    },
  },
};

Set up the Apollo Server:

const server = new ApolloServer({
  typeDefs,
  resolvers,
});

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

Start the server by running node server.js.

Congratulations! You now have a GraphQL server set up and running.

Building the Chat UI

To build the chat user interface, we can make use of popular frontend frameworks like React or Vue.js, along with Apollo Client for making GraphQL requests and subscriptions.

Example code for a React Chat Component:

import React, { useEffect, useState } from 'react';
import { useQuery, useMutation, useSubscription } from '@apollo/client';
import { GET_MESSAGES, SEND_MESSAGE, NEW_MESSAGE } from './graphql';

const Chat = () => {
  const [content, setContent] = useState('');
  const [sender, setSender] = useState('');

  const { loading, error, data } = useQuery(GET_MESSAGES);
  const [sendMessage] = useMutation(SEND_MESSAGE);

  useSubscription(NEW_MESSAGE, {
    onSubscriptionData: ({ subscriptionData }) => {
      const message = subscriptionData.data.newMessage;
      // Add the newly received message to the chat UI
    },
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!content || !sender) {
      return;
    }
    sendMessage({ variables: { content, sender } });
    setContent('');
  };

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <div>
      <div>
        {
          data.messages.map((message) => (
            <div key={message.id}>
              <strong>{message.sender}: </strong>
              {message.content}
            </div>
          ))
        }
      </div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Enter your name"
          value={sender}
          onChange={(e) => setSender(e.target.value)}
        />
        <input
          type="text"
          placeholder="Type your message"
          value={content}
          onChange={(e) => setContent(e.target.value)}
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
};

export default Chat;

Make sure you have the necessary dependencies installed and the GraphQL endpoints configured in graphql.js.

Conclusion

In this tutorial, we explored how to build a realtime chat application with Javascript and GraphQL. We set up a GraphQL server to handle client requests and subscriptions, and built a simple chat user interface using React and Apollo Client.

By leveraging the power of GraphQL and Javascript, you now have the foundation to build your own feature-rich chat application that can handle real-time communication between users. Happy coding! 🚀

#hashtags: #Javascript #GraphQL