Subscriptions to show online users

We cruised through our GraphQL queries and mutations. We queried for todos, added a new todo, updated an existing todo, removed an existing todo.

Now let's get to the exciting part.

GraphQL Subscriptions

We have a section of UI which displays the list of online users. So far we have made queries to fetch data and display them on the UI. But typically online users data is dynamic.

We can make use of GraphQL Subscription API to get realtime data from the graphql server to efficiently handle this.

But but but...

We need to tell the server that the user who is logged in is online. We have to poll our server to do a mutation which updates the last_seen timestamp value of the user.

We have to make this change to see yourself online first. Remember that you are already logged in, registered your data in the server, but not updated your last_seen value.?

The goal is to update every few seconds from the client that you are online. Ideally you should do this after you have successfully authenticated the user. So let's update some code to handle this.

Open src/components/OnlineUsers/OnlineUsersWrapper.tsx and add the following imports.

githubsrc/components/OnlineUsers/OnlineUsersWrapper.tsx
import React from "react";
+ import { gql } from "@apollo/client";
import OnlineUser from "./OnlineUser";

Now let's define the GraphQL mutation to update the last seen time of the user.

import React from "react";
import { gql } from "@apollo/client";
import OnlineUser from "./OnlineUser";
+ const UPDATE_LASTSEEN_MUTATION=gql`
+ mutation updateLastSeen ($now: timestamptz!) {
+ update_users(where: {}, _set: {last_seen: $now}) {
+ affected_rows
+ }
+ }
+ `;

As we did in previous steps, we will pass the above mutation to useMutation hook.

import React from "react";
- import { gql } from "@apollo/client";
+ import { gql, useMutation } from "@apollo/client";
...
const OnlineUsersWrapper = () => {
+ const [updateLastSeen] = useMutation(UPDATE_LASTSEEN_MUTATION);

We will need to trigger this mutation every 30 seconds.

We are going to make use of useEffect to implement this side effect. In useEffect, we will create a setInterval to update the last_seen of the user every 30 seconds.

const OnlineUsersWrapper = () => {
const [updateLastSeen] = useMutation(UPDATE_LASTSEEN_MUTATION);
+ useEffect(() => {
+ const onlineIndicator = setInterval(() => updateLastSeen({variables: { now: (new Date()).toISOString()}}), 30000);
+ return () => clearInterval(onlineIndicator);
+ });

Again, we are making use of the mutation to update the users table of the database.

Great! Now the metadata about whether the user is online will be available in the backend. Let's now do the integration to display realtime data of online users.

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin