How to create initial session?

[pke]

I have several custom hooks that all depend on useSession() to annotate the key with the session token.

const { session } = useSession()
  const { data: order, error, revalidate } = useSWR<Order>(session ? [`/v2/order/${session.orderId}`, session.id] : null, get)

However at the apps start a new session should be created via post inside (?) useSession() hook:

const [ tempId, setTempId ] = useState(null)
const { data: session, mutate } = useSWR<Session>(tempId ? ["/session", tempId] : null, get)

useEffect(() => {
  async function createSession() {
     const newSession = await post("/session")
     setTempId(newSession.id)
     mutate(newSession)
  }
  createSession()
}, [])

There are several problems with that:

1. all hooks that useSession() trigger the creation of a new session, so multiple sessions are created on the server
2. I am using tempId to not trigger a fetch before the session is created
3. the created session is not mutated it seems. The dependent hooks can't seem to use it to perform their fetches.

What is the correct way to start and sync up such interconnected hooks?

[sergiodxa]

I would create the session once in the first component or even before rendering React, and then read it from context, I believe most of the time the sessions is pretty static and doesn't really change, except when you logout, right? Context would work for that, but if you can, somehow, get the session info from the API in a get request I would create a useSession hook using SWR to get the session data (this is what I usually do, to get the current user from the API)

[pke]

Thanks for your help.
The problem with this specific server is that it requires for all requests a temporary session to be created.
So the first POST /session to the server is to create a new temp session and when the user logs in eventually the server creates a new session (which would result in a mutate for the session hook) for the login POST /login.
Upon POST /logout the server returns a new temporary session.

What makes this flow even worse is that the server can timeout logged in users sessions. In that case the user would have to re-login (or we read the login credentials from a secure storage in the react native app).