proper use of react-openapi for resource api calls

react-openapi/Admin.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useAuth, AuthPage } from "../react-auth";
 import { UploadProvider } from "./providers/UploadProvider";
 import AdminLayout from "./components/AdminLayout";
@@ -13,13 +12,9 @@ import {
   Route,
   useNavigate,
   useParams,
-  Navigate,
 } from "react-router-dom";
 
-const queryClient = new QueryClient();
-
-// Create a context for the app config
-export const ConfigContext = React.createContext<AppConfig | null>(null);
+import { ConfigContext } from "./providers/ConfigContext";
 
 function Dashboard({ basePath }: { basePath: string }) {
   const config = React.useContext(ConfigContext);
@@ -127,14 +122,17 @@ interface AdminProps {
 }
 
 export default function Admin({ basePath = "/admin", resourceOverrides = {}, profileConfig = {} }: AdminProps) {
-  const [config, setConfig] = React.useState<AppConfig | null>(null);
+  const existingConfig = React.useContext(ConfigContext);
+  const [config, setConfig] = React.useState<AppConfig | null>(existingConfig);
 
   React.useEffect(() => {
-    getAppConfig(resourceOverrides, profileConfig).then((cfg) => {
-      initializeApiClients(cfg.baseUrl, cfg.authBaseUrl);
-      setConfig(cfg);
-    });
-  }, [resourceOverrides, profileConfig]);
+    if (!existingConfig) {
+      getAppConfig(resourceOverrides, profileConfig).then((cfg) => {
+        initializeApiClients(cfg.baseUrl, cfg.authBaseUrl);
+        setConfig(cfg);
+      });
+    }
+  }, [resourceOverrides, profileConfig, existingConfig]);
 
   if (!config) {
     return (
@@ -151,13 +149,21 @@ export default function Admin({ basePath = "/admin", resourceOverrides = {}, pro
     );
   }
 
+  const content = (
+    <UploadProvider>
+      <AdminApp basePath={basePath} />
+    </UploadProvider>
+  );
+
+  // If we have an existing config, we are already inside a Provider and QueryClient
+  if (existingConfig) {
+    return content;
+  }
+
+  // Fallback for standalone usage
   return (
-    <QueryClientProvider client={queryClient}>
-      <ConfigContext.Provider value={config}>
-        <UploadProvider>
-          <AdminApp basePath={basePath} />
-        </UploadProvider>
-      </ConfigContext.Provider>
-    </QueryClientProvider>
+    <ConfigContext.Provider value={config}>
+      {content}
+    </ConfigContext.Provider>
   );
 }

react-openapi/components/GenericForm.tsx

@@ -11,7 +11,7 @@ import { useUpload } from '../providers/UploadProvider';
 import { useQueries } from '@tanstack/react-query';
 import { useResource } from '../hooks/useResource';
 import FormField from './fields/FormField';
-import { ConfigContext } from '../Admin';
+import { ConfigContext } from '../providers/ConfigContext';
 
 interface GenericFormProps {
   config: ResourceConfig;
@@ -67,7 +67,8 @@ export default function GenericForm({
   const relationDataMap = React.useMemo(() => {
     const map: Record<string, any[]> = {};
     allRelations.forEach((relName, index) => {
-        map[relName] = queries[index].data || [];
+      // @ts-ignore
+      map[relName] = queries[index].data || [];
     });
     return map;
   }, [allRelations, queries]);

react-openapi/components/ProfileView.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Box, Typography, Paper, CircularProgress, Alert } from '@mui/material';
 import { useResource } from '../hooks/useResource';
 import GenericForm from './GenericForm';
-import { ConfigContext } from '../Admin';
+import { ConfigContext } from '../providers/ConfigContext';
 
 export default function ProfileView() {
   const appConfig = React.useContext(ConfigContext);

react-openapi/hooks/useResource.ts

@@ -1,16 +1,21 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { api } from "../api/client";
 import { ResourceConfig } from "../types/config";
+import { ConfigContext } from "../providers/ConfigContext";
+import * as React from "react";
 
-export function useResource<T = any>(config: ResourceConfig) {
+export function useResource<T = any>(config: ResourceConfig | undefined) {
   const queryClient = useQueryClient();
-  const { name, endpoint, primaryKey } = config;
+  
+  // Return empty/disabled hooks if config is missing
+  const { name = '', endpoint = '', primaryKey = 'id' } = config || {};
 
   // --- READ ALL ---
   const useList = (params?: any) => 
     useQuery({
       queryKey: [name, "list", params],
       queryFn: async () => {
+        if (!endpoint) return { data: [], total: 0 };
         // @ts-ignore
         const res = await api.get<T[]>(endpoint, { params });
         const total = res.headers ? parseInt(res.headers['x-total-count'] || res.headers['X-Total-Count']) : undefined;
@@ -18,7 +23,8 @@ export function useResource<T = any>(config: ResourceConfig) {
             data: res.data, 
             total: isNaN(total as any) ? undefined : total 
         };
-      }
+      },
+      enabled: !!endpoint,
     });
 
   // --- READ ONE ---
@@ -26,18 +32,19 @@ export function useResource<T = any>(config: ResourceConfig) {
     useQuery({
       queryKey: [name, "detail", id],
       queryFn: async () => {
-        if (!id) return null;
+        if (!id || !endpoint) return null;
         // @ts-ignore
         const res = await api.get<T>(`${endpoint}/${id}`);
         return res.data;
       },
-      enabled: !!id,
+      enabled: !!id && !!endpoint,
     });
 
   // --- CREATE ---
   const useCreate = () =>
     useMutation({
       mutationFn: async (data: Partial<T>) => {
+        if (!endpoint) throw new Error("Endpoint not defined");
         // @ts-ignore
         const res = await api.post<T>(endpoint, data);
         return res.data;
@@ -51,6 +58,7 @@ export function useResource<T = any>(config: ResourceConfig) {
   const useUpdate = () =>
     useMutation({
       mutationFn: async ({ id, data }: { id: string; data: Partial<T> }) => {
+        if (!endpoint) throw new Error("Endpoint not defined");
         // @ts-ignore
         const res = await api.put<T>(`${endpoint}/${id}`, data);
         return res.data;
@@ -67,6 +75,7 @@ export function useResource<T = any>(config: ResourceConfig) {
   const useDelete = () =>
     useMutation({
       mutationFn: async (id: string) => {
+        if (!endpoint) throw new Error("Endpoint not defined");
         await api.delete(`${endpoint}/${id}`);
         return id;
       },
@@ -79,6 +88,7 @@ export function useResource<T = any>(config: ResourceConfig) {
   const getListQueryOptions = (params?: any) => ({
     queryKey: [name, "list", params],
     queryFn: async () => {
+      if (!endpoint) return { data: [], total: 0 };
       // @ts-ignore
       const res = await api.get<T[]>(endpoint, { params });
       const total = res.headers ? parseInt(res.headers['x-total-count'] || res.headers['X-Total-Count']) : undefined;
@@ -87,6 +97,7 @@ export function useResource<T = any>(config: ResourceConfig) {
           total: isNaN(total as any) ? undefined : total 
       };
     },
+    enabled: !!endpoint,
   });
 
   // --- READ ME ---
@@ -94,16 +105,19 @@ export function useResource<T = any>(config: ResourceConfig) {
     useQuery({
       queryKey: [name, "me"],
       queryFn: async () => {
+        if (!endpoint) return null;
         // @ts-ignore
         const res = await api.get<T>(`${endpoint}/me`);
         return res.data;
       },
+      enabled: !!endpoint,
     });
 
   // --- UPDATE ME ---
   const useUpdateMe = () =>
     useMutation({
       mutationFn: async (data: Partial<T>) => {
+        if (!endpoint) throw new Error("Endpoint not defined");
         // @ts-ignore
         const res = await api.put<T>(`${endpoint}/me`, data);
         return res.data;
@@ -125,3 +139,10 @@ export function useResource<T = any>(config: ResourceConfig) {
     getListQueryOptions,
   };
 }
+
+export function useResourceByName<T = any>(name: string) {
+  const config = React.useContext(ConfigContext);
+  const resourceConfig = config?.resources.find((r) => r.name === name);
+  return useResource<T>(resourceConfig);
+}
+

react-openapi/index.ts

@@ -2,3 +2,6 @@ export { default as Admin } from "./Admin";
 export { api, auth, initializeApiClients } from "./api/client";
 export { getAppConfig } from "./config";
 export type { AppConfig, ResourceConfig, ResourceField } from "./types/config";
+export { AppProvider } from "./providers/AppProvider";
+export { ConfigContext, useConfig } from "./providers/ConfigContext";
+export { useResource, useResourceByName } from "./hooks/useResource";

react-openapi/providers/AppProvider.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ConfigContext } from "./ConfigContext";
+import { getAppConfig } from "../config";
+import { initializeApiClients } from "../api/client";
+import { AppConfig } from "../types/config";
+import { Box, CircularProgress } from "@mui/material";
+
+const defaultQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+interface AppProviderProps {
+  children: React.ReactNode;
+  resourceOverrides?: Record<string, any>;
+  profileConfig?: any;
+  queryClient?: QueryClient;
+}
+
+export function AppProvider({
+  children,
+  resourceOverrides = {},
+  profileConfig = {},
+  queryClient = defaultQueryClient,
+}: AppProviderProps) {
+  const [config, setConfig] = React.useState<AppConfig | null>(null);
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    getAppConfig(resourceOverrides, profileConfig)
+      .then((cfg) => {
+        initializeApiClients(cfg.baseUrl, cfg.authBaseUrl);
+        setConfig(cfg);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("Failed to load OpenAPI configuration:", err);
+        setLoading(false);
+      });
+  }, [resourceOverrides, profileConfig]);
+
+  if (loading) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ConfigContext.Provider value={config}>
+        {children}
+      </ConfigContext.Provider>
+    </QueryClientProvider>
+  );
+}

react-openapi/providers/ConfigContext.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { AppConfig } from "../types/config";
+
+export const ConfigContext = React.createContext<AppConfig | null>(null);
+
+export function useConfig() {
+  const context = React.useContext(ConfigContext);
+  if (context === undefined) {
+    throw new Error("useConfig must be used within a ConfigProvider");
+  }
+  return context;
+}