Refactor cache functions to use explicit loaders

The commit refactors the previous implementation of using cache functions across several modules. They are now explicitly defined as loaders to improve readability and maintain a consistent style. This prevents the cache function calls from getting too nested and difficult to understand, especially in asynchronous cases. Additionally, the user session related hooks are deleted which were not used anymore.

apps/web/app/(marketing)/blog/[slug]/page.tsx

@@ -10,11 +10,13 @@ import { withI18n } from '~/lib/i18n/with-i18n';
 
 import { Post } from '../../blog/_components/post';
 
-const getPostBySlug = cache(async (slug: string) => {
+const getPostBySlug = cache(postLoader);
+
+async function postLoader(slug: string) {
   const client = await createCmsClient();
 
   return client.getContentItemBySlug({ slug, collection: 'posts' });
-});
+}
 
 export async function generateMetadata({
   params,

apps/web/app/(marketing)/docs/[...slug]/page.tsx

@@ -12,11 +12,13 @@ import { SitePageHeader } from '../../_components/site-page-header';
 import styles from '../../blog/_components/html-renderer.module.css';
 import { DocsCards } from '../_components/docs-cards';
 
-const getPageBySlug = cache(async (slug: string) => {
+const getPageBySlug = cache(pageLoader);
+
+async function pageLoader(slug: string) {
   const client = await createCmsClient();
 
-  return client.getContentItemBySlug({ slug, collection: 'documentation' });
-});
+  return client.getContentItemBySlug({ slug, collection: 'pages' });
+}
 
 interface PageParams {
   params: {

apps/web/app/(marketing)/docs/_lib/server/docs.loader.ts

@@ -2,7 +2,14 @@ import { cache } from 'react';
 
 import { createCmsClient } from '@kit/cms';
 
-export const getDocs = cache(async (language: string | undefined) => {
+/**
+ * @name getDocs
+ * @description Load the documentation pages.
+ * @param language
+ */
+export const getDocs = cache(docsLoader);
+
+async function docsLoader(language: string | undefined) {
   const cms = await createCmsClient();
 
   const { items: pages } = await cms.getContentItems({
@@ -12,4 +19,4 @@ export const getDocs = cache(async (language: string | undefined) => {
   });
 
   return pages;
-});
+}

apps/web/app/admin/accounts/[id]/page.tsx

@@ -31,7 +31,9 @@ async function AccountPage({ params }: Params) {
 
 export default AdminGuard(AccountPage);
 
-const loadAccount = cache(async (id: string) => {
+const loadAccount = cache(accountLoader);
+
+async function accountLoader(id: string) {
   const client = getSupabaseServerComponentClient({
     admin: true,
   });
@@ -47,4 +49,4 @@ const loadAccount = cache(async (id: string) => {
   }
 
   return data;
-});
+}

apps/web/app/home/(user)/_lib/server/load-user-workspace.ts

@@ -18,7 +18,9 @@ export type UserWorkspace = Awaited<ReturnType<typeof loadUserWorkspace>>;
  * Load the user workspace data. It's a cached per-request function that fetches the user workspace data.
  * It can be used across the server components to load the user workspace data.
  */
-export const loadUserWorkspace = cache(async () => {
+export const loadUserWorkspace = cache(workspaceLoader);
+
+async function workspaceLoader() {
   const client = getSupabaseServerComponentClient();
   const api = createAccountsApi(client);
 
@@ -45,4 +47,4 @@ export const loadUserWorkspace = cache(async () => {
     workspace,
     user,
   };
-});
+}

apps/web/app/home/(user)/billing/_lib/server/personal-account-billing-page.loader.ts

@@ -28,7 +28,11 @@ const BILLING_MODE = z
  * @returns The subscription data or the orders data and the billing customer ID.
  * This function is cached per-request.
  */
-export const loadPersonalAccountBillingPageData = cache((userId: string) => {
+export const loadPersonalAccountBillingPageData = cache(
+  personalAccountBillingPageDataLoader,
+);
+
+function personalAccountBillingPageDataLoader(userId: string) {
   const client = getSupabaseServerComponentClient();
   const api = createAccountsApi(client);
 
@@ -40,4 +44,4 @@ export const loadPersonalAccountBillingPageData = cache((userId: string) => {
   const customerId = api.getCustomerId(userId);
 
   return Promise.all([data, customerId]);
-});
+}

apps/web/app/home/[account]/_lib/server/team-account-billing-page.loader.ts

@@ -22,7 +22,13 @@ const BILLING_MODE = z
   .default('subscription')
   .parse(process.env.BILLING_MODE);
 
-export const loadTeamAccountBillingPage = cache((accountId: string) => {
+/**
+ * @name loadTeamAccountBillingPage
+ * @description Load the team account billing page data for the given account.
+ */
+export const loadTeamAccountBillingPage = cache(teamAccountBillingPageLoader);
+
+function teamAccountBillingPageLoader(accountId: string) {
   const client = getSupabaseServerComponentClient();
   const api = createAccountsApi(client);
 
@@ -34,4 +40,4 @@ export const loadTeamAccountBillingPage = cache((accountId: string) => {
   const customerId = api.getCustomerId(accountId);
 
   return Promise.all([data, customerId]);
-});
+}

apps/web/app/home/[account]/_lib/server/team-account-workspace.loader.ts

@@ -23,7 +23,9 @@ export type TeamAccountWorkspace = Awaited<
  *
  * @param accountSlug
  */
-export const loadTeamWorkspace = cache(async (accountSlug: string) => {
+export const loadTeamWorkspace = cache(workspaceLoader);
+
+async function workspaceLoader(accountSlug: string) {
   const client = getSupabaseServerComponentClient();
   const api = createTeamAccountsApi(client);
 
@@ -48,4 +50,4 @@ export const loadTeamWorkspace = cache(async (accountSlug: string) => {
     ...workspace.data,
     user,
   };
-});
+}

packages/features/admin/src/lib/server/loaders/admin-dashboard.loader.ts

@@ -11,9 +11,11 @@ import { createAdminDashboardService } from '../services/admin-dashboard.service
  * @description Load the admin dashboard data.
  * @param params
  */
-export const loadAdminDashboard = cache(() => {
+export const loadAdminDashboard = cache(adminDashboardLoader);
+
+function adminDashboardLoader() {
   const client = getSupabaseServerComponentClient({ admin: true });
   const service = createAdminDashboardService(client);
 
   return service.getDashboardData();
-});
+}

packages/supabase/src/hooks/use-auth-change-listener.ts

@@ -7,7 +7,6 @@ import { usePathname, useRouter } from 'next/navigation';
 import { useQueryClient } from '@tanstack/react-query';
 
 import { useSupabase } from './use-supabase';
-import { useRevalidateUserSession } from './use-user-session';
 
 /**
  * @name PRIVATE_PATH_PREFIXES
@@ -30,7 +29,6 @@ export function useAuthChangeListener({
   const client = useSupabase();
   const pathName = usePathname();
   const router = useRouter();
-  const revalidateUserSession = useRevalidateUserSession();
   const queryClient = useQueryClient();
 
   useEffect(() => {
@@ -61,7 +59,6 @@ export function useAuthChangeListener({
   }, [
     client.auth,
     router,
-    revalidateUserSession,
     pathName,
     appHomePath,
     privatePathPrefixes,

packages/supabase/src/hooks/use-user-session.ts

@@ -1,41 +0,0 @@
-import { useCallback } from 'react';
-
-import type { Session } from '@supabase/supabase-js';
-
-import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
-
-import { useSupabase } from './use-supabase';
-
-const queryKey = ['supabase:session'];
-
-export function useUserSession(initialSession?: Session | null) {
-  const supabase = useSupabase();
-
-  const queryFn = async () => {
-    const { data, error } = await supabase.auth.getSession();
-
-    if (error) {
-      throw error;
-    }
-
-    return data.session;
-  };
-
-  return useSuspenseQuery({
-    queryKey,
-    queryFn,
-    initialData: initialSession,
-  });
-}
-
-export function useRevalidateUserSession() {
-  const client = useQueryClient();
-
-  return useCallback(
-    () =>
-      client.invalidateQueries({
-        queryKey,
-      }),
-    [client],
-  );
-}