ReactNext.jsData fetching

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.

Related guides