feat: Migrate client-side user profile fetching and state management to React Query and simplify server-side database connection logic.

Author: thakurdotdev

client/src/Context/Context.jsx

@@ -1,42 +1,30 @@
-import { createContext, useEffect, useState } from "react"
-import axios from "axios"
-import { useContext } from "react"
-import { useMemo } from "react"
+import { useQueryClient } from "@tanstack/react-query"
+import { createContext, useContext, useEffect, useMemo, useState } from "react"
+import { profileKeys } from "@/api/auth/profile"
+import { useProfileQuery } from "@/hooks/queries/useProfileQuery"
 
 export const Context = createContext()
 
 export const useProfile = () => useContext(Context)
 
 export const ContextProvider = ({ children }) => {
-  const [user, setUser] = useState(null)
-  const [loading, setLoading] = useState(true)
+  const queryClient = useQueryClient()
+  const { data: user, isLoading: loading, refetch } = useProfileQuery()
   const [musicConfig, setMusicConfig] = useState({})
 
-  useEffect(() => {
-    if (user) return
-    getProfile()
-  }, [user])
-
   useEffect(() => {
     const dataFromStorage = localStorage.getItem("musicConfig")
     if (dataFromStorage) {
       setMusicConfig(JSON.parse(dataFromStorage))
     }
   }, [])
 
-  const getProfile = async () => {
-    try {
-      const response = await axios.get(`${import.meta.env.VITE_API_URL}/api/profile`, {
-        withCredentials: true,
-      })
-      if (response.status === 200) {
-        setUser(response.data.user)
-      }
-    } catch (error) {
-      console.error("Error fetching profile:", error.message)
-    } finally {
-      setLoading(false)
-    }
+  const setUser = (newUser) => {
+    queryClient.setQueryData(profileKeys.current(), newUser)
+  }
+
+  const getProfile = () => {
+    refetch()
   }
 
   const memoizedValue = useMemo(

client/src/Routes.jsx

@@ -14,10 +14,16 @@ import { Context } from "./Context/Context"
 import { ChatContext } from "./Context/ChatContext"
 import GroupMusic from "./Pages/Music/GroupMusic"
 import BottomPlayer from "./Pages/Music/BottomPlayer"
+import { useProfileSuspenseQuery } from "./hooks/queries/useProfileQuery"
 
 const Header = lazy(() => import("./components/LandingPage/Header"))
 const Footer = lazy(() => import("./components/LandingPage/Footer"))
 
+const ProfileLoader = ({ children }) => {
+  useProfileSuspenseQuery()
+  return children
+}
+
 // Lazy-load components
 const Login = lazy(() => import("./components/Auth/Login"))
 const PasskeyLogin = lazy(() => import("./components/Auth/PassKeyLogin"))
@@ -118,7 +124,9 @@ export const ProtectedRoutes = () => {
       >
         <div className="mt-[60px] h-[calc(100vh-60px)]">
           <Suspense fallback={<Fallback />}>
-            <Outlet />
+            <ProfileLoader>
+              <Outlet />
+            </ProfileLoader>
           </Suspense>
         </div>
       </main>

client/src/api/auth/profile.js

@@ -0,0 +1,13 @@
+import axios from "axios"
+
+export const profileKeys = {
+  all: ["profile"],
+  current: () => [...profileKeys.all, "current"],
+}
+
+export const fetchProfile = async () => {
+  const response = await axios.get(`${import.meta.env.VITE_API_URL}/api/profile`, {
+    withCredentials: true,
+  })
+  return response.data.user
+}

client/src/hooks/queries/useProfileQuery.js

@@ -0,0 +1,23 @@
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query"
+import { fetchProfile, profileKeys } from "@/api/auth/profile"
+
+export const useProfileQuery = (options = {}) => {
+  return useQuery({
+    queryKey: profileKeys.current(),
+    queryFn: fetchProfile,
+    staleTime: 1000 * 60 * 10,
+    gcTime: 1000 * 60 * 30,
+    retry: false,
+    ...options,
+  })
+}
+
+export const useProfileSuspenseQuery = (options = {}) => {
+  return useSuspenseQuery({
+    queryKey: profileKeys.current(),
+    queryFn: fetchProfile,
+    staleTime: 1000 * 60 * 10,
+    gcTime: 1000 * 60 * 30,
+    ...options,
+  })
+}

server/index.js

@@ -29,8 +29,12 @@ sequelize.authenticate().then(() => {
   })
 })
 
-process.on("SIGTERM", () => {
-  server.close(() => sequelize.close().finally(() => process.exit(0)))
+process.on("SIGTERM", async () => {
+  console.log("SIGTERM received, shutting down gracefully...")
+  server.close(async () => {
+    await sequelize.close()
+    process.exit(0)
+  })
 })
 
 process.on("uncaughtException", (err) => {

server/utils/sequelize.js

@@ -1,91 +1,22 @@
-// Force IPv4 first (critical for Render)
-const dns = require("dns")
-dns.setDefaultResultOrder("ipv4first")
-
 const { configDotenv } = require("dotenv")
 const Sequelize = require("sequelize")
 
 configDotenv()
 
-// Connection pool configuration
-const poolConfig = {
-  max: 20,
-  min: 5,
-  idle: 10000,
-  acquire: 30000,
-  evict: 30000,
-}
-
-// IMPORTANT: For Supabase pooler, use DATABASE_URL instead of separate params
 const sequelize = new Sequelize(process.env.DATABASE_URL, {
   dialect: "postgres",
-  protocol: "postgres",
   logging: false,
-
+  pool: {
+    max: 5,
+    min: 0,
+    idle: 30000,
+  },
   dialectOptions: {
     ssl: {
       require: true,
-      rejectUnauthorized: false, // ← FIX self-signed cert error
+      rejectUnauthorized: false,
     },
   },
-
-  pool: poolConfig,
-
-  retry: {
-    max: 3,
-    match: [
-      /ConnectionError/,
-      /SequelizeConnectionError/,
-      /SequelizeConnectionRefusedError/,
-      /SequelizeHostNotFoundError/,
-      /SequelizeHostNotReachableError/,
-      /SequelizeInvalidConnectionError/,
-      /SequelizeConnectionTimedOutError/,
-      /TimeoutError/,
-    ],
-  },
-})
-
-// Retry logic
-const connectWithRetry = async (retries = 5, delay = 5000) => {
-  let retryCount = 0
-
-  while (retryCount < retries) {
-    try {
-      await sequelize.authenticate()
-      console.log("Database Connected Successfully")
-      return
-    } catch (err) {
-      retryCount++
-      console.error(`Connection attempt ${retryCount} failed:`, err.message)
-
-      if (retryCount >= retries) {
-        console.error("Maximum retry attempts reached. Cannot connect to database.")
-        throw err
-      }
-
-      console.log(`Retrying in ${delay}ms...`)
-      await new Promise((resolve) => setTimeout(resolve, delay))
-    }
-  }
-}
-
-// Start connection
-connectWithRetry().catch((err) => {
-  console.error("Fatal database connection error:", err)
-  process.exit(1)
-})
-
-// Clean shutdown
-process.on("SIGINT", async () => {
-  try {
-    await sequelize.close()
-    console.log("Database connection closed due to app termination")
-    process.exit(0)
-  } catch (error) {
-    console.error("Error during database disconnection:", error)
-    process.exit(1)
-  }
 })
 
 module.exports = sequelize