JSFoo: round the year submissions

JSFoo: round the year submissions

Submit talks on JavaScript and full stack engineering round the year

Make a submission

Submissions are closed for this project

Submit talks and workshops on:

  1. Full stack engineering
  2. JavaScript frameworks
  3. Architecture approaches and case studies
  4. JavaScript and IoT
  5. Web development
  6. JavaScript for hobbyists

We will find a forum to place your talk, any time during the year.

For more information, contact jsfoo.editorial@hasgeek.com or call 7676332020

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more

Shahidh K Muhammed


Using React Hooks & GraphQL Subscriptions to Build "Reusable" Realtime Feeds

Submitted Jan 24, 2019

React hooks are a super exciting feature, but considering how new it is, examples on how to use it to make the behaviour “reusable” within and across apps are still emerging.

This talk, which combines one of the most exciting developments in building modern apps for React developers - GraphQL subscriptions, with one of the most exciting new react APIs - React Hooks, would be a very real-world and practical use-case to discuss.

There are two things in particular we need to focus on for buildng applications that contain feeds (lists) that update in realtime.

One, as the realtime feed updates, we need to keep track of the new data that we are adding to the existing feed. For example, we might highlight new notifications that have appeared in a notification feed till the user “sees” them.

Second, ensuring that we have not missed any events. Using GraphQL subscriptions to power the realtime feed might sound ideal, but in real-world scenarios, we need to deal with the missing events. What if the app did not receive a GraphQL subscription event because of a network error?

Building a solution that addresses both of these issues is painful. Even more painful is having to build this solution again and again.

In this talk, we will take a look at how we can use React hooks to capture this behaviour addressing these two points and make it reusable so that we can build multiple realtime feed components in the app, or across apps very easily.


  • Small intro to React hooks and GraphQL Subscriptions
  • Typical patterns in building realtime feeds - lists that updates in response to events from the backend
  • Issues with the “traditional” way of building these components
  • Novel architecture using GraphQL Subscriptions and React hooks
  • Small live-demo towards the end highlighting concepts put forward in the talk

Speaker bio

Shahidh is an engineer at Hasura and maintains the open-source Hasura GraphQL Engine. A design engineer by training, he is a self-taught fullstack polyglot developer whose interests span GraphQL, Kubernetes and Serverless architectures. If not in front of his laptop, he is typically found in the kitchen, mostly making delicious Biriyani.





{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Muthu Kumar

Code Sharing between React Native and React Js

How is code sharing made possible. Write code once and share it with mobile and web apps. Ways and methods by which we make it possible more

03 Dec 2018