Revalidate API data in realtime with SWR

SWR is a library that provides React hooks for data fetching. It’s possible to revalidate your data in realtime by broadcasting events using Liveblocks.

An example usage of this may be a share dialog containing a list of users—when a new user is added to the dialog, we can broadcast an event telling other online users to refresh their user list.

Broadcasting events

A simple SWR hook that fetches a list of users may look similar to this:

function Component() {  const { data: users, mutate } = useSWR("/api/users", fetcher);
return ( <div> {users.map((user) => /* ... */)}: </div> );}

To create a function that allows us to update this data in realtime, we can broadcast an event telling other clients to revalidate their data with useBroadcastEvent:

const broadcast = useBroadcastEvent();
// Sending a custom REVALIDATE eventbroadcast({ type: "REVALIDATE" });

We can then listen for the event with useEventListener, and call the mutate function from SWR to update the data:

const { data: users, mutate } = useSWR("/api/users", fetcher);
useEventListener(({ event }) => { if (event.type === "REVALIDATE") { mutate(); }});

Putting it together

If we put everything together, we can display a list of users, broadcasting a revalidate event when a new user is added to the list.

import { useBroadcastevent, useEventListener } from "../liveblocks.config";
function Component() { // Data updates on every button click const { data, mutate } = useSWR("/api/user", fetcher);
// Listen for custom event useEventListener(({ event }) => { if (event.type === "REVALIDATE") { mutate(); } });
// Create broadcast hook const broadcast = useBroadcastEvent();
function addUser() { // Code to add a new user to your list // ...
// Broadcast the custom event broadcast({ type: "REVALIDATE" }); }
return ( <div> {users.map((user) => /* ... */)}: <button onClick={addUser}>Add new user</button> </div> );}

Great, data that revalidates in realtime at the click of a button! You can find an example of this technique being used in the Next.js Starter Kit.