GraphQL Chat App

Arausi Oghenekaro Daniel
2 min readJan 27, 2020

This is a contrived example, that was built out of curiosity. Better approaches to creating real-time experiences are included in the references below.

House Keeping

This project tech stack comprises of react and react-apollo for the frontend. The backend consists of apollo-server and express.

INTRODUCTION

The foundation of this application is based on WebSockets and graphQL subscriptions on both server and client. Subscriptions in GraphQL are a means for monitoring changes to a data bucket in real-time. Practically, they can be used by instantiating a new pubsub class as seen below. They are event-driven, and it’s listening to a defined event name or better said, are subscribed to an event name and publish through that event name the changes that occur. Hence the word pubsub for publishing and subscribing to data events to create real-time experiences.

full code below.

Github package.json

I took the html and bootstrap from this wonderful post by pusher which is where the idea behind doing this in react and react hooks stem from.

REFERENCES

[1]. Github Link for Chat App Here

[2]. https://www.apollographql.com/docs/react/data/subscriptions/

--

--