improve: use react-query for caching

src/index.js

@@ -1,13 +1,56 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App";
-import AuthProvider from "./AuthProvider";
+import AuthProvider, {AuthContext} from "./AuthProvider";
 import "bulma/css/bulma.min.css";
+import {QueryClient, QueryClientProvider} from "react-query"
 
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            retry: 2,
+            refetchOnWindowFocus: false,
+            staleTimeout: 5 * 60 * 1000,
+            onError: (error) => {
+                if (error.message === "Unauthorized"){
+                    const {logout} = queryClient
+                        .getQueryCache()
+                        .getAll()
+                        .find(query => query.queryKey.includes("auth"))?.state?.context || {};
+                    if (logout) {
+                        logout();
+                    }
+                }
+            }
+        },
+        mutations: {
+            retry: 1,
+        }
+    }
+});
+
+
+const EnhancedAuthProvider = ({children}) => {
+    const auth = React.useContext(AuthContext);
+    const logout = () => {
+        auth.logout();
+    };
+
+    React.useEffect(() => {
+        queryClient.setQueryDefaults("auths", {
+            context: {logout}
+        });
+    }, [logout]);
+    return children;
+}
 
 const root =  ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-    <AuthProvider>
-        <App />
-    </AuthProvider>
+    <QueryClientProvider client={queryClient}>
+        <AuthProvider>
+            <EnhancedAuthProvider>
+                <App />
+            </EnhancedAuthProvider>
+        </AuthProvider>
+    </QueryClientProvider>
 );