Sync access to shared session from different swr hooks

[pke]

Given I have multiple swr hook based components and to do something meaningful with the API at first the access to the API must be authenticated (via user/password, refresh token) and then the actual request can happen.

Since several components can initate a request to the API there must be some sync mechanism, that only the first swr fetcher does the authentication and all other fetchers must wait for the result of the authentication to continue (successfull authenticated) or abort (failure to authenticate) their request.

So I came up with this pattern:

let sessionFetcher
function fetchSession() {
  if (sessionFetcher) {
    return sessionFetcher
  }
  return sessionFetcher = fetch("login").finally(() => sessionFetcher = undefined);
}

function fetchUser() {
  return fetchSession(() => fetch("/user"))
}

function fetchProjects() {
  return fetchSession(() => fetch("/projects"))
}

function User() {
  useSWR("user", fetchUser)
}

function Projects() {
  useSWR("user", fetchProjects)
}