Refactor API fetch functions: implement useApiFetch composable for improved token handling and error management; update cfetch to streamline authorization logic and enhance error handling

app/composables/useApiFetch.ts

@@ -0,0 +1,49 @@
+import type { UseFetchOptions } from "#app"
+import defu from "defu"
+
+export function useApiFetch<DataT = any, ErrorT = any>(
+	url: string | Request | Ref<string | Request> | (() => string | Request),
+	options: UseFetchOptions<DataT, ErrorT> = {},
+	authorize: boolean = true
+) {
+	const baseUrl = import.meta.env.VITE_PUBLIC_BACKEND
+
+	if (!baseUrl) throw new Error("BACKEND URL not set")
+
+	const { sessionToken, refreshSessionToken } = useAuth()
+
+	const defaults: UseFetchOptions<DataT, ErrorT> = {
+		baseURL: baseUrl,
+
+		headers:
+			authorize && sessionToken.value
+				? { Authorization: `Bearer ${sessionToken.value}` }
+				: {},
+		onResponseError: async ({ response, options }) => {
+			if (response.status == 401 && authorize) {
+				const newToken = await refreshSessionToken()
+
+				if (!newToken) return
+
+				const newOptions = {
+					...options,
+					headers: {
+						...(options.headers || {}),
+						Authorization: `Bearer ${newToken}`,
+					},
+				}
+
+				// @ts-ignore
+				return await $fetch<DataT, ErrorT>(url, newOptions)
+			}
+		},
+	}
+
+	const config = defu(options || {}, defaults) as UseFetchOptions<
+		DataT,
+		ErrorT
+	>
+
+	// @ts-ignore
+	return useFetch<DataT, ErrorT>(url, config)
+}