Session management with swr

[pke]

I recently looked a some of my code and it looked repetitive like this:

import { get, post, del, put, patch } from "./api"

export const useOrder = () => 
  const { session } = useSession()

  const { data: order, error, mutate, isValidating } = useSWR<Order>(
    session?.orderId ? [`/v2/order/${session.orderId}`, session.id] : null,
    (path, sessionId, check = false) => (
      get(path, sessionId)
        .then(transformOrder)
    )
  )

  const addProduct = useCallback((productId: string, quantity = 1) => {
    if (session) {
      return post("/v2/order/item", session.id, {
        productId, quantity,
      }).then(() => mutate())
    }
    return Promise.resolve(undefined)
  }, [session, mutate])

  const removeItem = useCallback((itemId: string) => {
    if (session) {
       return del("/v2/order/item/" + itemId, session?.id).then(() => mutate())
    }
    return Promise.resolve()
  }, [session, mutate])

  return {
    order,
    error,
    loading: !order && !error,
    addProduct,
    removeItem,
 }

All calls require a session (which can expire).

So seeing this code I thought I might refactor the code to have the session hook export the get, post etc functions argumented with the session ID. Then the session hook could also check for expired session server responses and refresh the session accordingly without the caller knowing about it. I also can't to the session handling on API level, because there the business logic of sessions is unknown.

So the refactored code would look like this:

import { get, post, del, put, patch } from "./api"

export const useOrder = () => 
  const { get, post, del, put, patch, orderId} = useSession()
  const { data: order, error, mutate, isValidating } = useSWR<Order>(
    orderId ? `/v2/order/${orderId}` : null,
    (path) => (
      get(path)
        .then(transformOrder)
    )
  )

  const addProduct = useCallback((productId: string, quantity = 1) => {
   return post("/v2/order/item", {
      productId, quantity,
    }).then(() => mutate())
  }, [post, mutate])

  const removeItem = useCallback((itemId: string) => {
    return del("/v2/order/item/" + itemId).then(() => mutate())
  }, [delk, mutate])

  return {
    order,
    error,
    loading: !order && !error,
    addProduct,
    removeItem,
 }

Then whenever an API method exposed by the useSession() runs into an expired session it can transparently refresh the session and performing the request again with the new session id. It lifts the burden of doing that from each individual API request.

Is this an actual pattern for using swr and accompanied manipulation functions?

[sergiodxa]

What I usually do is to keep the session in a httpOnly cookie, then at the begging of the app I use SWR to fetch the logged in user data (something like /api/me), if this request fails (because user is not logged in) I redirect to login, if it works I keep rendering the app.