Making authenticated calls with useSWR

[reilly3000]

I wanted desperately to utilize SWR' to make authenticated calls for an analytics dashboard I'm building, but was having a really difficult time finding a way to do in conjunction with next-firebase-auth and useEffect. I was originally trying to get the auth token first, pass it into a fetcher function, then use hooks to pass in the fetcher into useSWR. Instead, composing the fetcher as an inline async function did the trick. Mind you, I'm quite a novice at modern React and front-end state, so this may be obvious to most. I couldn't find a working example elsewhere, so I thought I would share this and hopefully save somebody a few hours:

function MyComponent() {
  const AuthUser = useAuthUser();

  const { data, error } = useSWR(query, async (url) => {
    const token = await AuthUser.getIdToken();

    const response = await fetch(url, {
      headers: {
        Authorization: token || "unauthenticated",
      },
    });

    return response.json();
  });

  if (error) {
    return <div>Error :(</div>;
  }

  if (!data) {
    return <div>loading...</div>;
  }
  
  return (
    <table>
      <thead>
        <tr>
          <th>URL</th>
          <th>Visitors</th>
          <th>Views Per Visit</th>
          <th>Return Rate</th>
        </tr>
      </thead>
      <tbody>
        {data.map((data, index) => (
          <tr key={index}>
            <td>
              {data.pathname}
              <a href={data.href} target="_blank" rel="noreferrer">
                &nbsp;&nbsp;↗️
              </a>
            </td>
            <td>{data.visitors}</td>
            <td>{data.pageviews / data.sessions}</td>
            <td>{data.sessions / data.visitors}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

export default withAuthUser({
  whenUnauthedBeforeInit: AuthAction.SHOW_LOADER,
  whenUnauthedAfterInit: AuthAction.REDIRECT_TO_LOGIN,
})(MyComponent);