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

We use cookies to collect data to improve your experience on our site. Read our Privacy Policy to learn more.