Realtime Chat app with Vue and Hasura

So before VueConf I thought it will be a great idea to rewrite our React realtime chat app to VueJS, which features login, realtime chat inbox, typing indicator, online users

So here you go - the chat is up and running here

So in this blog post I want to describe what I actually did for rewriting that. I won't go deeper in data modeling cause that is perfectly explained in this blog post, but let me explain the steps I did for creating this in Vue.
For more in detail explanation how to use Vue with GraphQL you can check out my course here:

If you are really new to GraphQL you can check a bootcamp I did on my Youtube channel

And check our Hasura Youtube channel for more Hasura content

So the steps I did after Data modeling:

1. Add login functionality to Vue Router:

router.beforeEach((to, from, next) => {
  const isPublic = to.matched.some(record => record.meta.public);
  const onlyWhenLoggedOut = 
    to.matched.some(record => record.meta.onlyWhenLoggedOut)
  const loggedIn = !!TokenService.getToken();
  if (!isPublic && !loggedIn) {
    return next({
      path: "/login",
      query: { redirect: to.fullPath }
    });
  }
  if (loggedIn && onlyWhenLoggedOut) {
    return next('/')
  }
  next();
});

2. Setup Apollo Client with subscriptions.

You can learn more about that in the course

import VueApollo from "vue-apollo";
// Http endpoint
const httpLink = new HttpLink({
  uri: "https://realtime-chat.demo.hasura.app/v1alpha1/graphql"
})

const wsLink = new WebSocketLink({
  uri: "wss://realtime-chat.demo.hasura.app/v1alpha1/graphql",
  options: {
    reconnect: true
  }
});

const link = split(
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query);
    return kind === "OperationDefinition" && operation === "subscription";
  },
  wsLink,
  httpLink
);


const apolloClient = new ApolloClient({
  link,
  cache: new InMemoryCache(),
  connectToDevTools: true
});

Vue.use(VueApollo);

// Call this in the Vue app file
export function createProvider() {
  return new VueApollo({
    defaultClient: apolloClient,
    defaultOptions: {
      $loadingKey: "loading"
    }
  });
}

3. Getting online users

For displaying online users we want to emit online event every time user is logged in so in our Home route we have to emit online event using apollo mutation

created(){
    setInterval(
      async () => {
        await this.$apollo.mutate({
          mutation: require('../graphql/emitOnlineEvent.gql'),
          variables: {
            userId: this.userId
          }
        })
      },
      3000
    )
  }

4. Subscribing to messages

For getting the messages I created a query that will get all the messages and then subscribe to a new ones. I've explained how to deal with that in my Vue course too.

 apollo: {
      messages: {
        query: require('../graphql/fetchMessages.gql'),
        loadingKey: "loading",
        variables(){
          return {
            last_received_id: -1,
            last_received_ts: "2018-08-21T19:58:46.987552+00:00"
          }
        },
        update(data){
          const receivedmessages = data.message
          return receivedmessages
        },
        fetchPolicy: 'cache-and-network',
        subscribeToMore: {
          document: require('../graphql/subscribeToNewMessages.gql'),
          updateQuery: (previousResult, { subscriptionData }) => {
            if (previousResult) {
              return {
                message: [
                  ...previousResult.message,
                  ...subscriptionData.data.message
                ]
              }
            }
          }
        },
        error(){
          alert("Error occured")
        }
      }

5. Typing Indicator

We also needed user typing notifications so I created emitTyping event mutation that emitted event every few characters. That let us to keep track on typing users and show typing indicator whenever other user is typing

 watch: {
      text: function(value){
        const textLength = value.length;
        if ((textLength !== 0 && textLength % 5 === 0) || textLength === 1) {
          this.emitTypingEvent();
        }
      }
    },
    methods: {
      emitTypingEvent(){
        if(this.userId) {
          this.$apollo.mutate({
          mutation: require('../graphql/emitTypingEvent.gql'),
          variables: {
              userId: this.userId
          }
          })
        }
      },

In a nutshell that's about it. I had an amazing experience creating this app with VueJS and for more info on how and what decisions I did when coding this app you can check it either on my github
or in Hasura sample apps repository