amplifyquery 1.0.15 → 1.0.17

package/dist/service.js

@@ -559,7 +559,10 @@ function createAmplifyService(modelName, defaultAuthMode) {
                 // Check cache first (if forceRefresh is false)
                 if (!options.forceRefresh) {
                     const cachedItems = query_1.queryClient.getQueryData(queryKey);
-                    if (cachedItems && cachedItems.length > 0) {
+                    const queryState = query_1.queryClient.getQueryState(queryKey);
+                    if (cachedItems &&
+                        cachedItems.length > 0 &&
+                        !(queryState === null || queryState === void 0 ? void 0 : queryState.isInvalidated)) {
                         console.log(`🍬 ${modelName} list using cache`, queryKey);
                         return cachedItems.filter((item) => item !== null);
                     }
@@ -1119,7 +1122,7 @@ function createAmplifyService(modelName, defaultAuthMode) {
         },
         // React Hook returning method - Reimplemented based on TanStack Query
         useHook: (options) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             const hookQueryClient = (0, react_query_1.useQueryClient)();
             // Determine query key
             const queryKey = (0, react_1.useMemo)(() => {
@@ -1167,16 +1170,82 @@ function createAmplifyService(modelName, defaultAuthMode) {
                 (_g = options === null || options === void 0 ? void 0 : options.customList) === null || _g === void 0 ? void 0 : _g.forceRefresh,
                 service,
             ]);
+            const realtimeEnabled = ((_h = options === null || options === void 0 ? void 0 : options.realtime) === null || _h === void 0 ? void 0 : _h.enabled) === true;
             const queryOptions = {
                 queryKey,
                 queryFn,
-                enabled: ((_h = options === null || options === void 0 ? void 0 : options.initialFetchOptions) === null || _h === void 0 ? void 0 : _h.fetch) !== false,
+                enabled: ((_j = options === null || options === void 0 ? void 0 : options.initialFetchOptions) === null || _j === void 0 ? void 0 : _j.fetch) !== false && !realtimeEnabled,
                 staleTime: 1000 * 30, // Keep fresh for 30 seconds (refresh more frequently)
                 refetchOnMount: true, // Refetch on component mount
                 refetchOnWindowFocus: false, // Don't auto-refetch on window focus
                 refetchOnReconnect: true, // Refetch on network reconnect
             };
+            const [isSynced, setIsSynced] = (0, react_1.useState)(undefined);
             const { data: items = [], isLoading, error, refetch, } = (0, react_query_1.useQuery)(queryOptions);
+            (0, react_1.useEffect)(() => {
+                var _a, _b, _c;
+                if (!realtimeEnabled)
+                    return;
+                if (options === null || options === void 0 ? void 0 : options.customList) {
+                    console.warn(`🍬 ${modelName} useHook realtime: customList is not supported.`);
+                    return;
+                }
+                const client = (0, client_1.getClient)();
+                const model = (_a = client.models) === null || _a === void 0 ? void 0 : _a[modelName];
+                if (!(model === null || model === void 0 ? void 0 : model.observeQuery)) {
+                    console.warn(`🍬 ${modelName} useHook realtime: observeQuery not available.`);
+                    return;
+                }
+                const observeOptions = Object.assign({}, (((_b = options === null || options === void 0 ? void 0 : options.realtime) === null || _b === void 0 ? void 0 : _b.observeOptions) || {}));
+                if (observeOptions.filter === undefined &&
+                    ((_c = options === null || options === void 0 ? void 0 : options.initialFetchOptions) === null || _c === void 0 ? void 0 : _c.filter)) {
+                    observeOptions.filter = options.initialFetchOptions.filter;
+                }
+                let isMounted = true;
+                const subscription = model.observeQuery(observeOptions).subscribe({
+                    next: ({ items: nextItems, isSynced: synced }) => {
+                        if (!isMounted)
+                            return;
+                        const safeItems = Array.isArray(nextItems)
+                            ? nextItems.filter(Boolean)
+                            : [];
+                        const previousItems = hookQueryClient.getQueryData(queryKey) || [];
+                        const previousIds = new Set(previousItems.map((item) => item === null || item === void 0 ? void 0 : item.id).filter(Boolean));
+                        const nextIds = new Set(safeItems.map((item) => item === null || item === void 0 ? void 0 : item.id).filter(Boolean));
+                        previousIds.forEach((id) => {
+                            if (!nextIds.has(id)) {
+                                hookQueryClient.removeQueries({
+                                    queryKey: itemKey(modelName, id),
+                                    exact: true,
+                                });
+                            }
+                        });
+                        hookQueryClient.setQueryData(queryKey, safeItems);
+                        safeItems.forEach((item) => {
+                            if (item === null || item === void 0 ? void 0 : item.id) {
+                                hookQueryClient.setQueryData(itemKey(modelName, item.id), item);
+                            }
+                        });
+                        setIsSynced(Boolean(synced));
+                    },
+                    error: (err) => {
+                        console.error(`🍬 ${modelName} useHook realtime subscribe error:`, err);
+                    },
+                });
+                return () => {
+                    var _a;
+                    isMounted = false;
+                    (_a = subscription === null || subscription === void 0 ? void 0 : subscription.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(subscription);
+                };
+            }, [
+                realtimeEnabled,
+                modelName,
+                queryKey,
+                hookQueryClient,
+                options === null || options === void 0 ? void 0 : options.customList,
+                (_k = options === null || options === void 0 ? void 0 : options.initialFetchOptions) === null || _k === void 0 ? void 0 : _k.filter,
+                (_l = options === null || options === void 0 ? void 0 : options.realtime) === null || _l === void 0 ? void 0 : _l.observeOptions,
+            ]);
             // Interface functions implementation
             const getItem = (0, react_1.useCallback)((id) => {
                 // Use useQueryData to get latest single item from current cache
@@ -1197,6 +1266,17 @@ function createAmplifyService(modelName, defaultAuthMode) {
             const createItem = (0, react_1.useCallback)((data) => __awaiter(this, void 0, void 0, function* () {
                 try {
                     const result = yield service.create(data);
+                    if (result) {
+                        // Keep hook cache in sync immediately
+                        hookQueryClient.setQueryData(queryKey, (oldData) => {
+                            const oldItems = Array.isArray(oldData) ? oldData : [];
+                            if (oldItems.some((item) => (item === null || item === void 0 ? void 0 : item.id) === result.id)) {
+                                return oldItems;
+                            }
+                            return [...oldItems, result];
+                        });
+                        hookQueryClient.setQueryData(itemKey(modelName, result.id), result);
+                    }
                     // Automatically refresh list after successful create
                     yield refetch();
                     return result;
@@ -1210,6 +1290,14 @@ function createAmplifyService(modelName, defaultAuthMode) {
             const updateItem = (0, react_1.useCallback)((data) => __awaiter(this, void 0, void 0, function* () {
                 try {
                     const result = yield service.update(data);
+                    if (result) {
+                        // Keep hook cache in sync immediately
+                        hookQueryClient.setQueryData(queryKey, (oldData) => {
+                            const oldItems = Array.isArray(oldData) ? oldData : [];
+                            return oldItems.map((item) => item && item.id === result.id ? result : item);
+                        });
+                        hookQueryClient.setQueryData(itemKey(modelName, result.id), result);
+                    }
                     // Automatically refresh list after successful update
                     yield refetch();
                     return result;
@@ -1223,6 +1311,14 @@ function createAmplifyService(modelName, defaultAuthMode) {
             const deleteItem = (0, react_1.useCallback)((id) => __awaiter(this, void 0, void 0, function* () {
                 try {
                     const result = yield service.delete(id);
+                    if (result) {
+                        // Keep hook cache in sync immediately
+                        hookQueryClient.setQueryData(queryKey, (oldData) => {
+                            const oldItems = Array.isArray(oldData) ? oldData : [];
+                            return oldItems.filter((item) => (item === null || item === void 0 ? void 0 : item.id) !== id);
+                        });
+                        hookQueryClient.setQueryData(itemKey(modelName, id), null);
+                    }
                     // Automatically refresh list after successful delete
                     yield refetch();
                     return result;
@@ -1252,6 +1348,7 @@ function createAmplifyService(modelName, defaultAuthMode) {
                 items,
                 isLoading,
                 error: error,
+                isSynced,
                 getItem,
                 refresh,
                 create: createItem,
@@ -1330,13 +1427,25 @@ function createAmplifyService(modelName, defaultAuthMode) {
             const deleteItem = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
                 try {
                     const result = yield deleteMutation.mutateAsync();
+                    if (result) {
+                        // Ensure the hook's query cache reflects deletion immediately
+                        hookQueryClient.setQueryData(singleItemQueryKey, null);
+                        hookQueryClient.invalidateQueries({
+                            queryKey: [modelName],
+                            refetchType: "active",
+                        });
+                        hookQueryClient.invalidateQueries({
+                            queryKey: singleItemQueryKey,
+                            refetchType: "active",
+                        });
+                    }
                     return result;
                 }
                 catch (error) {
                     console.error(`🍬 ${modelName} useItemHook delete error:`, error);
                     throw error;
                 }
-            }), [deleteMutation]);
+            }), [deleteMutation, hookQueryClient, modelName, singleItemQueryKey]);
             // Change loading state to false when isLoading is true and cached data exists
             const effectiveLoading = isLoading && !cachedData;
             // 캐시 정리를 위한 효과 최적화 (한 번만 실행)

package/dist/types.d.ts

@@ -20,6 +20,7 @@ export type StoreState<T> = {
 export type ModelHook<T> = {
     items: T[];
     isLoading: boolean;
+    isSynced?: boolean;
     error: Error | null;
     getItem: (id: string) => T | null | undefined;
     refresh: (options?: {
@@ -92,6 +93,10 @@ export interface AmplifyDataService<T> {
             args: Record<string, any>;
             forceRefresh?: boolean;
         };
+        realtime?: {
+            enabled?: boolean;
+            observeOptions?: Record<string, any>;
+        };
     }) => ModelHook<T>;
     useItemHook: (id: string) => ItemHook<T>;
     modelName: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amplifyquery",
-  "version": "1.0.15",
+  "version": "1.0.17",
   "description": "Amplify+Query",
   "keywords": [
     "Amplify",