@apvee/spfx-react-toolkit 1.2.1 → 2.0.0

package/lib/hooks/useSPFxOneDriveAppData.js

@@ -1,260 +1,450 @@
 // useSPFxOneDriveAppData.ts
 // Hook to manage JSON files in OneDrive appRoot folder with state management
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
 import { useSPFxMSGraphClient } from './useSPFxMSGraphClient';
-export function useSPFxOneDriveAppData(fileName, folderOrOptions, autoFetch) {
-    var _this = this;
-    var _a, _b;
-    if (autoFetch === void 0) { autoFetch = true; }
-    var client = useSPFxMSGraphClient().client;
-    var options = typeof folderOrOptions === 'object' && folderOrOptions !== null
-        ? folderOrOptions
-        : { folder: folderOrOptions, autoFetch: autoFetch };
-    var folder = options.folder;
-    var shouldAutoFetch = (_a = options.autoFetch) !== null && _a !== void 0 ? _a : true;
-    var defaultValue = options.defaultValue;
-    var createIfMissing = (_b = options.createIfMissing) !== null && _b !== void 0 ? _b : false;
-    // State management
-    var _c = useState(defaultValue), data = _c[0], setData = _c[1];
-    var _d = useState(false), isLoading = _d[0], setIsLoading = _d[1];
-    var _e = useState(undefined), error = _e[0], setError = _e[1];
-    var _f = useState(false), isWriting = _f[0], setIsWriting = _f[1];
-    var _g = useState(undefined), writeError = _g[0], setWriteError = _g[1];
-    var _h = useState(false), isNotFound = _h[0], setIsNotFound = _h[1];
+// ═══════════════════════════════════════════════════════════════════════════
+// PURE FUNCTIONS (extracted for stability and testability)
+// ═══════════════════════════════════════════════════════════════════════════
+/**
+ * Build Graph API path with optional folder namespace.
+ * Sanitizes folder name to prevent path traversal attacks.
+ *
+ * @param fileName - Name of the file
+ * @param folderName - Optional folder namespace
+ * @returns Full Graph API path for file content
+ */
+function buildApiPath(fileName, folderName) {
+    const basePath = '/me/drive/special/appRoot:';
+    if (folderName) {
+        // Sanitize folder name: only allow alphanumeric, hyphens, underscores
+        // This prevents path traversal (../) and other injection attacks
+        const safeFolderName = folderName.replace(/[^a-zA-Z0-9-_]/g, '-');
+        return `${basePath}/${safeFolderName}/${fileName}:/content`;
+    }
+    return `${basePath}/${fileName}:/content`;
+}
+/**
+ * Check if an error indicates a 404 / itemNotFound response from Graph API.
+ *
+ * @param err - The error to check
+ * @returns True if the error indicates file not found
+ */
+function isNotFoundError(err) {
+    const anyErr = err;
+    // Check status codes
+    if (anyErr?.statusCode === 404 || anyErr?.status === 404)
+        return true;
+    // Check error codes
+    const code = anyErr?.code ?? anyErr?.body?.error?.code;
+    if (code && /itemnotfound/i.test(code))
+        return true;
+    // Check error messages as fallback
+    const message = anyErr?.message ?? anyErr?.body?.error?.message;
+    if (message && /(\b404\b|not found|itemnotfound)/i.test(message))
+        return true;
+    return false;
+}
+/**
+ * Hook to manage JSON files in user's OneDrive appRoot folder
+ *
+ * Provides unified read/write operations for JSON data stored in OneDrive's special
+ * appRoot folder (accessible per-app, user-scoped storage).
+ *
+ * Features:
+ * - Automatic JSON serialization/deserialization
+ * - Separate loading states for read/write operations
+ * - Optional auto-fetch on mount
+ * - Folder/namespace support for file organization
+ * - Type-safe with TypeScript generics
+ * - Memory leak safe with mounted state tracking
+ * - Error handling for both read and write operations
+ *
+ * Requirements:
+ * - Microsoft Graph permissions: Files.ReadWrite or Files.ReadWrite.AppFolder
+ * - User must be authenticated
+ *
+ * @param fileName - Name of the JSON file (e.g., 'config.json', 'settings.json')
+ * @param folder - Optional folder/namespace identifier for file organization.
+ *                 Will be sanitized to prevent path traversal.
+ *                 Examples: 'my-app', instanceId (GUID), 'config-v2'
+ * @param autoFetch - Whether to automatically load file on mount. Default: true
+ *
+ * @returns Object with data, loading states, error states, and read/write functions
+ *
+ * @example Basic usage - auto-fetch from root
+ * ```tsx
+ * import type { MyConfig } from './types';
+ *
+ * function ConfigPanel() {
+ *   const { data, isLoading, error, write, isWriting } =
+ *     useSPFxOneDriveAppData<MyConfig>('config.json');
+ *
+ *   if (isLoading) return <Spinner label="Loading configuration..." />;
+ *   if (error) return <MessageBar messageBarType={MessageBarType.error}>
+ *     Failed to load: {error.message}
+ *   </MessageBar>;
+ *
+ *   const handleSave = async (newConfig: MyConfig) => {
+ *     try {
+ *       await write(newConfig);
+ *       console.log('Saved successfully!');
+ *     } catch (err) {
+ *       console.error('Save failed:', err);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <div>
+ *       <TextField
+ *         value={data?.title}
+ *         onChange={(_, val) => handleSave({ ...data, title: val })}
+ *         disabled={isWriting}
+ *       />
+ *       {isWriting && <Spinner label="Saving..." />}
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ * @example With folder namespace
+ * ```tsx
+ * // Store files in a dedicated folder
+ * const { data, write } = useSPFxOneDriveAppData<State>(
+ *   'state.json',
+ *   'my-app-v2'  // Files stored in appRoot:/my-app-v2/state.json
+ * );
+ * ```
+ *
+ * @example Per-instance storage (multi-instance support)
+ * ```tsx
+ * // Each WebPart instance has its own data
+ * const { id } = useSPFxInstanceInfo();
+ * const { data, write } = useSPFxOneDriveAppData<Settings>(
+ *   'settings.json',
+ *   id  // Files stored in appRoot:/abc-123-guid/settings.json
+ * );
+ * ```
+ *
+ * @example Lazy loading (manual load)
+ * ```tsx
+ * const { data, load, isLoading, write } = useSPFxOneDriveAppData<Cache>(
+ *   'cache.json',
+ *   'my-app',
+ *   false  // Don't auto-fetch
+ * );
+ *
+ * return (
+ *   <div>
+ *     <button onClick={load} disabled={isLoading}>
+ *       {isLoading ? 'Loading...' : 'Load Cache'}
+ *     </button>
+ *     {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
+ *   </div>
+ * );
+ * ```
+ *
+ * @example Multiple files in same namespace
+ * ```tsx
+ * function MyApp() {
+ *   const config = useSPFxOneDriveAppData<Config>('config.json', 'myapp');
+ *   const state = useSPFxOneDriveAppData<State>('state.json', 'myapp');
+ *   const cache = useSPFxOneDriveAppData<Cache>('cache.json', 'myapp');
+ *
+ *   // All files stored in appRoot:/myapp/
+ *   // Easy to manage and clean up as a group
+ * }
+ * ```
+ *
+ * @example Error handling and retry
+ * ```tsx
+ * function DataManager() {
+ *   const { data, error, load, writeError, write, isReady } =
+ *     useSPFxOneDriveAppData<MyData>('data.json');
+ *
+ *   if (error) {
+ *     return (
+ *       <MessageBar
+ *         messageBarType={MessageBarType.error}
+ *         actions={<button onClick={load}>Retry</button>}
+ *       >
+ *         Load failed: {error.message}
+ *       </MessageBar>
+ *     );
+ *   }
+ *
+ *   if (writeError) {
+ *     return (
+ *       <MessageBar messageBarType={MessageBarType.warning}>
+ *         Save failed: {writeError.message}
+ *       </MessageBar>
+ *     );
+ *   }
+ *
+ *   if (!isReady) return <Spinner />;
+ *
+ *   return <DataDisplay data={data} onSave={write} />;
+ * }
+ * ```
+ *
+ * @example CRUD-like operations
+ * ```tsx
+ * interface TodoList {
+ *   items: Array<{ id: string; text: string; done: boolean }>;
+ * }
+ *
+ * function TodoApp() {
+ *   const { data, write, isLoading, isWriting } =
+ *     useSPFxOneDriveAppData<TodoList>('todos.json', 'todo-app');
+ *
+ *   const addTodo = async (text: string) => {
+ *     const newItem = { id: crypto.randomUUID(), text, done: false };
+ *     await write({
+ *       items: [...(data?.items ?? []), newItem]
+ *     });
+ *   };
+ *
+ *   const toggleTodo = async (id: string) => {
+ *     await write({
+ *       items: data?.items.map(item =>
+ *         item.id === id ? { ...item, done: !item.done } : item
+ *       ) ?? []
+ *     });
+ *   };
+ *
+ *   const deleteTodo = async (id: string) => {
+ *     await write({
+ *       items: data?.items.filter(item => item.id !== id) ?? []
+ *     });
+ *   };
+ *
+ *   if (isLoading) return <Spinner />;
+ *
+ *   return (
+ *     <div>
+ *       <TodoList
+ *         items={data?.items ?? []}
+ *         onToggle={toggleTodo}
+ *         onDelete={deleteTodo}
+ *       />
+ *       <AddTodoForm onAdd={addTodo} disabled={isWriting} />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useSPFxOneDriveAppData(fileName, options) {
+    const { client, isReady: isClientReady, isInitializing: isClientInitializing, initError: clientInitError } = useSPFxMSGraphClient();
+    // ═══════════════════════════════════════════════════════════════════════════
+    // OPTIONS (stabilized with useMemo to prevent unnecessary re-renders)
+    // ═══════════════════════════════════════════════════════════════════════════
+    const resolvedOptions = useMemo(() => options ?? {}, [options]);
+    // Extract stable primitive values for dependency arrays
+    const folder = resolvedOptions.folder;
+    const shouldAutoFetch = resolvedOptions.autoFetch ?? true;
+    const defaultValue = resolvedOptions.defaultValue;
+    const createIfMissing = resolvedOptions.createIfMissing ?? false;
+    // ═══════════════════════════════════════════════════════════════════════════
+    // STATE MANAGEMENT
+    // ═══════════════════════════════════════════════════════════════════════════
+    const [data, setData] = useState(defaultValue);
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(undefined);
+    const [isWriting, setIsWriting] = useState(false);
+    const [writeError, setWriteError] = useState(undefined);
+    const [isNotFound, setIsNotFound] = useState(false);
+    // ═══════════════════════════════════════════════════════════════════════════
+    // REFS (for cleanup and stable references)
+    // ═══════════════════════════════════════════════════════════════════════════
     // Track component mounted state to prevent memory leaks
-    var isMounted = useRef(true);
-    useEffect(function () {
-        isMounted.current = true;
-        return function () {
-            isMounted.current = false;
+    const isMountedRef = useRef(true);
+    useEffect(() => {
+        return () => {
+            isMountedRef.current = false;
         };
     }, []);
-    /**
-     * Build Graph API path with optional folder namespace
-     * Sanitizes folder name to prevent path traversal attacks
-     */
-    var buildApiPath = useCallback(function (file, folderName) {
-        var basePath = '/me/drive/special/appRoot:';
-        if (folderName) {
-            // Sanitize folder name: only allow alphanumeric, hyphens, underscores
-            // This prevents path traversal (../) and other injection attacks
-            var safeFolderName = folderName.replace(/[^a-zA-Z0-9-_]/g, '-');
-            return "".concat(basePath, "/").concat(safeFolderName, "/").concat(file, ":/content");
-        }
-        return "".concat(basePath, "/").concat(file, ":/content");
-    }, []);
-    var isNotFoundError = useCallback(function (err) {
-        var _a, _b, _c, _d, _e, _f;
-        var anyErr = err;
-        if ((anyErr === null || anyErr === void 0 ? void 0 : anyErr.statusCode) === 404 || (anyErr === null || anyErr === void 0 ? void 0 : anyErr.status) === 404)
-            return true;
-        var code = (_a = anyErr === null || anyErr === void 0 ? void 0 : anyErr.code) !== null && _a !== void 0 ? _a : (_c = (_b = anyErr === null || anyErr === void 0 ? void 0 : anyErr.body) === null || _b === void 0 ? void 0 : _b.error) === null || _c === void 0 ? void 0 : _c.code;
-        if (code && /itemnotfound/i.test(code))
-            return true;
-        var message = (_d = anyErr === null || anyErr === void 0 ? void 0 : anyErr.message) !== null && _d !== void 0 ? _d : (_f = (_e = anyErr === null || anyErr === void 0 ? void 0 : anyErr.body) === null || _e === void 0 ? void 0 : _e.error) === null || _f === void 0 ? void 0 : _f.message;
-        if (message && /(\b404\b|not found|itemnotfound)/i.test(message))
-            return true;
-        return false;
-    }, []);
+    // Track if createIfMissing write has been attempted (to prevent multiple writes)
+    const createAttemptedRef = useRef(false);
+    // ═══════════════════════════════════════════════════════════════════════════
+    // WRITE CALLBACK (defined first, no dependency on load)
+    // ═══════════════════════════════════════════════════════════════════════════
     /**
      * Write data to OneDrive file
      * Creates file if it doesn't exist, updates if it does (upsert)
      * Updates isWriting and writeError states
      */
-    var write = useCallback(function (content) { return __awaiter(_this, void 0, void 0, function () {
-        var apiPath, jsonContent, err_1, error_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!client) {
-                        throw new Error('Graph client not available. Cannot write file.');
-                    }
-                    if (!fileName) {
-                        throw new Error('fileName is required. Cannot write file.');
-                    }
-                    setIsWriting(true);
-                    setWriteError(undefined);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, 4, 5]);
-                    apiPath = buildApiPath(fileName, folder);
-                    jsonContent = JSON.stringify(content);
-                    return [4 /*yield*/, client
-                            .api(apiPath)
-                            .header('Content-Type', 'application/json')
-                            .put(jsonContent)];
-                case 2:
-                    _a.sent();
-                    if (isMounted.current) {
-                        // Update local data to reflect successful write
-                        setData(content);
-                        setIsNotFound(false);
-                        // Clear read error if write succeeds (fresh state)
-                        setError(undefined);
-                    }
-                    return [3 /*break*/, 5];
-                case 3:
-                    err_1 = _a.sent();
-                    if (isMounted.current) {
-                        error_1 = err_1 instanceof Error ? err_1 : new Error(String(err_1));
-                        setWriteError(error_1);
-                        console.error('Failed to write file to OneDrive:', error_1);
-                    }
-                    // Re-throw to allow caller to handle
-                    throw err_1;
-                case 4:
-                    if (isMounted.current) {
-                        setIsWriting(false);
-                    }
-                    return [7 /*endfinally*/];
-                case 5: return [2 /*return*/];
+    const write = useCallback(async (content) => {
+        if (!client) {
+            if (isClientInitializing) {
+                throw new Error('Graph client is still initializing. Please wait and try again.');
+            }
+            if (clientInitError) {
+                throw new Error(`Graph client initialization failed: ${clientInitError.message}`);
+            }
+            throw new Error('Graph client not available. Cannot write file.');
+        }
+        if (!fileName) {
+            throw new Error('fileName is required. Cannot write file.');
+        }
+        setIsWriting(true);
+        setWriteError(undefined);
+        try {
+            const apiPath = buildApiPath(fileName, folder);
+            // Always stringify to ensure valid JSON
+            const jsonContent = JSON.stringify(content);
+            await client
+                .api(apiPath)
+                .header('Content-Type', 'application/json')
+                .put(jsonContent);
+            if (isMountedRef.current) {
+                // Update local data to reflect successful write
+                setData(content);
+                setIsNotFound(false);
+                // Clear read error if write succeeds (fresh state)
+                setError(undefined);
             }
-        });
-    }); }, [client, fileName, folder, buildApiPath]);
+        }
+        catch (err) {
+            if (isMountedRef.current) {
+                const writeErr = err instanceof Error ? err : new Error(String(err));
+                setWriteError(writeErr);
+                console.error('Failed to write file to OneDrive:', writeErr);
+            }
+            // Re-throw to allow caller to handle
+            throw err;
+        }
+        finally {
+            if (isMountedRef.current) {
+                setIsWriting(false);
+            }
+        }
+    }, [client, fileName, folder, isClientInitializing, clientInitError]);
+    // ═══════════════════════════════════════════════════════════════════════════
+    // LOAD CALLBACK (NO dependency on write - uses effect for createIfMissing)
+    // ═══════════════════════════════════════════════════════════════════════════
     /**
      * Load file from OneDrive
      * Updates data, isLoading, and error states
+     * Does NOT call write directly - createIfMissing is handled by separate effect
      */
-    var load = useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
-        var apiPath, fileContent, err_2, notFound, writeErr_1, error_2;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    if (!client) {
-                        console.warn('Graph client not available yet. Skipping load.');
-                        return [2 /*return*/];
+    const load = useCallback(async () => {
+        if (!client) {
+            if (isClientInitializing) {
+                console.info('Graph client is still initializing. Skipping load - will auto-retry when ready.');
+                return;
+            }
+            if (clientInitError) {
+                console.error('Graph client initialization failed:', clientInitError.message);
+                return;
+            }
+            console.warn('Graph client not available. Skipping load.');
+            return;
+        }
+        if (!fileName) {
+            console.warn('fileName is required. Skipping load.');
+            return;
+        }
+        // Reset createAttempted flag when load is called (fresh attempt)
+        createAttemptedRef.current = false;
+        setIsLoading(true);
+        setError(undefined);
+        setIsNotFound(false);
+        try {
+            const apiPath = buildApiPath(fileName, folder);
+            const fileContent = await client.api(apiPath).get();
+            if (isMountedRef.current) {
+                // Parse JSON if response is string, otherwise use as-is
+                if (typeof fileContent === 'string') {
+                    try {
+                        setData(JSON.parse(fileContent));
                     }
-                    if (!fileName) {
-                        console.warn('fileName is required. Skipping load.');
-                        return [2 /*return*/];
+                    catch (parseError) {
+                        throw new Error(`Failed to parse JSON: ${parseError instanceof Error ? parseError.message : 'Unknown error'}`);
                     }
-                    setIsLoading(true);
-                    setError(undefined);
-                    setIsNotFound(false);
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, 12, 13]);
-                    apiPath = buildApiPath(fileName, folder);
-                    return [4 /*yield*/, client.api(apiPath).get()];
-                case 2:
-                    fileContent = _a.sent();
-                    if (isMounted.current) {
-                        // Parse JSON if response is string, otherwise use as-is
-                        if (typeof fileContent === 'string') {
-                            try {
-                                setData(JSON.parse(fileContent));
-                            }
-                            catch (parseError) {
-                                throw new Error("Failed to parse JSON: ".concat(parseError instanceof Error ? parseError.message : 'Unknown error'));
-                            }
-                        }
-                        else {
-                            setData(fileContent);
-                        }
-                        setIsNotFound(false);
+                }
+                else {
+                    setData(fileContent);
+                }
+                setIsNotFound(false);
+            }
+        }
+        catch (err) {
+            if (isMountedRef.current) {
+                const notFound = isNotFoundError(err);
+                setIsNotFound(notFound);
+                if (notFound) {
+                    // Missing file is treated as a non-error.
+                    // Set data to defaultValue if provided, otherwise undefined
+                    if (defaultValue !== undefined) {
+                        setData(defaultValue);
+                    }
+                    else {
+                        setData(undefined);
                     }
-                    return [3 /*break*/, 13];
-                case 3:
-                    err_2 = _a.sent();
-                    if (!isMounted.current) return [3 /*break*/, 11];
-                    notFound = isNotFoundError(err_2);
-                    setIsNotFound(notFound);
-                    if (!notFound) return [3 /*break*/, 10];
-                    if (!(defaultValue !== undefined)) return [3 /*break*/, 8];
-                    setData(defaultValue);
-                    if (!createIfMissing) return [3 /*break*/, 7];
-                    _a.label = 4;
-                case 4:
-                    _a.trys.push([4, 6, , 7]);
-                    return [4 /*yield*/, write(defaultValue)];
-                case 5:
-                    _a.sent();
-                    return [3 /*break*/, 7];
-                case 6:
-                    writeErr_1 = _a.sent();
-                    // write() already updates writeError state
-                    console.error('Failed to create missing file in OneDrive:', writeErr_1);
-                    return [3 /*break*/, 7];
-                case 7: return [3 /*break*/, 9];
-                case 8:
-                    setData(undefined);
-                    _a.label = 9;
-                case 9:
                     setError(undefined);
                     console.info('OneDrive file not found. isNotFound=true');
-                    return [2 /*return*/];
-                case 10:
-                    error_2 = err_2 instanceof Error ? err_2 : new Error(String(err_2));
-                    setError(error_2);
-                    // Don't throw - allow component to handle error via state
-                    console.error('Failed to load file from OneDrive:', error_2);
-                    _a.label = 11;
-                case 11: return [3 /*break*/, 13];
-                case 12:
-                    if (isMounted.current) {
-                        setIsLoading(false);
-                    }
-                    return [7 /*endfinally*/];
-                case 13: return [2 /*return*/];
+                    // NOTE: createIfMissing is handled by separate useEffect
+                    return;
+                }
+                const loadError = err instanceof Error ? err : new Error(String(err));
+                setError(loadError);
+                console.error('Failed to load file from OneDrive:', loadError);
             }
-        });
-    }); }, [client, fileName, folder, buildApiPath, defaultValue, createIfMissing, isNotFoundError, write]);
-    // Auto-fetch on mount if enabled
-    useEffect(function () {
-        if (shouldAutoFetch && client && fileName) {
-            load().catch(function () {
+        }
+        finally {
+            if (isMountedRef.current) {
+                setIsLoading(false);
+            }
+        }
+    }, [client, fileName, folder, defaultValue, isClientInitializing, clientInitError]); // ← NO write, NO createIfMissing
+    // ═══════════════════════════════════════════════════════════════════════════
+    // EFFECTS
+    // ═══════════════════════════════════════════════════════════════════════════
+    // Auto-fetch on mount if enabled (wait for client to be ready)
+    useEffect(() => {
+        if (shouldAutoFetch && isClientReady && fileName) {
+            load().catch(() => {
                 // Error already handled in load() function
             });
         }
-    }, [shouldAutoFetch, client, fileName, load]);
+    }, [shouldAutoFetch, isClientReady, fileName, load]);
+    // Separate effect for createIfMissing - reacts to isNotFound state
+    // This breaks the circular dependency: load → write
+    useEffect(() => {
+        // Guard conditions:
+        // 1. File must be not found
+        // 2. createIfMissing must be enabled
+        // 3. defaultValue must be provided
+        // 4. Must not be currently writing (prevent double-write)
+        // 5. Must not have already attempted create (prevent infinite loop)
+        // 6. Must not be currently loading (wait for load to complete)
+        if (isNotFound &&
+            createIfMissing &&
+            defaultValue !== undefined &&
+            !isWriting &&
+            !createAttemptedRef.current &&
+            !isLoading) {
+            createAttemptedRef.current = true;
+            write(defaultValue).catch((writeErr) => {
+                // write() already updates writeError state
+                console.error('Failed to create missing file in OneDrive:', writeErr);
+            });
+        }
+    }, [isNotFound, createIfMissing, defaultValue, isWriting, isLoading, write]);
+    // ═══════════════════════════════════════════════════════════════════════════
+    // COMPUTED STATE & RETURN
+    // ═══════════════════════════════════════════════════════════════════════════
     // Computed state: ready when data loaded successfully
-    var isReady = !isLoading && !error && data !== undefined;
+    const isReady = !isLoading && !error && data !== undefined;
     return {
-        data: data,
-        isLoading: isLoading,
-        error: error,
-        isWriting: isWriting,
-        writeError: writeError,
-        isNotFound: isNotFound,
-        load: load,
-        write: write,
-        isReady: isReady,
+        data,
+        isLoading,
+        error,
+        isWriting,
+        writeError,
+        isNotFound,
+        load,
+        write,
+        isReady,
     };
 }
 //# sourceMappingURL=useSPFxOneDriveAppData.js.map