fix: Infinite API request loop on empty stores (#7613)

frontend/app/composables/partials/use-actions-factory.test.ts

@@ -13,9 +13,10 @@ describe("useStoreActions", () => {
 
   const mockStore = ref([]);
   const mockLoading = ref(false);
+  const mockInitialized = ref(false);
 
   test("deleteMany calls deleteOne for each ID and refreshes once", async () => {
-    const actions = useStoreActions("test-store", mockApi, mockStore, mockLoading);
+    const actions = useStoreActions("test-store", mockApi, mockStore, mockLoading, mockInitialized);
 
     mockApi.deleteOne = vi.fn().mockResolvedValue({ response: { data: {} } });
     mockApi.getAll = vi.fn().mockResolvedValue({ data: { items: [] } });
@@ -32,7 +33,7 @@ describe("useStoreActions", () => {
   });
 
   test("deleteMany handles empty array", async () => {
-    const actions = useStoreActions("test-store", mockApi, mockStore, mockLoading);
+    const actions = useStoreActions("test-store", mockApi, mockStore, mockLoading, mockInitialized);
 
     mockApi.deleteOne = vi.fn();
     mockApi.getAll = vi.fn().mockResolvedValue({ data: { items: [] } });
@@ -44,7 +45,7 @@ describe("useStoreActions", () => {
   });
 
   test("deleteMany sets loading state", async () => {
-    const actions = useStoreActions("test-store", mockApi, mockStore, mockLoading);
+    const actions = useStoreActions("test-store", mockApi, mockStore, mockLoading, mockInitialized);
 
     mockApi.deleteOne = vi.fn().mockResolvedValue({});
     mockApi.getAll = vi.fn().mockResolvedValue({ data: { items: [] } });
@@ -55,4 +56,25 @@ describe("useStoreActions", () => {
     await promise;
     expect(mockLoading.value).toBe(false);
   });
+
+  test("refresh sets initialized to true even when store returns empty results", async () => {
+    const localInitialized = ref(false);
+    const actions = useStoreActions("test-store", mockApi, mockStore, mockLoading, localInitialized);
+
+    mockApi.getAll = vi.fn().mockResolvedValue({ data: { items: [] } });
+
+    expect(localInitialized.value).toBe(false);
+    await actions.refresh();
+    expect(localInitialized.value).toBe(true);
+  });
+
+  test("refresh sets initialized to true when store returns items", async () => {
+    const localInitialized = ref(false);
+    const actions = useStoreActions("test-store", mockApi, mockStore, mockLoading, localInitialized);
+
+    mockApi.getAll = vi.fn().mockResolvedValue({ data: { items: [{ id: "1", name: "item" }] } });
+
+    await actions.refresh();
+    expect(localInitialized.value).toBe(true);
+  });
 });

frontend/app/composables/partials/use-actions-factory.ts

@@ -26,6 +26,7 @@ export function useReadOnlyActions<T extends BoundT>(
   api: BaseCRUDAPIReadOnly<T>,
   allRef: Ref<T[] | null> | null,
   loading: Ref<boolean>,
+  initialized: Ref<boolean>,
   defaultQueryParams: Record<string, QueryValue> = {},
 ): ReadOnlyStoreActions<T> {
   function getAll(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
@@ -69,6 +70,7 @@ export function useReadOnlyActions<T extends BoundT>(
       allRef.value = data.items;
     }
 
+    initialized.value = true;
     loading.value = false;
   }
 
@@ -89,6 +91,7 @@ export function useStoreActions<T extends BoundT>(
   api: BaseCRUDAPI<unknown, T, unknown>,
   allRef: Ref<T[] | null> | null,
   loading: Ref<boolean>,
+  initialized: Ref<boolean>,
   defaultQueryParams: Record<string, QueryValue> = {},
 ): StoreActions<T> {
   function getAll(page = 1, perPage = -1, params = {} as Record<string, QueryValue>) {
@@ -132,6 +135,7 @@ export function useStoreActions<T extends BoundT>(
       allRef.value = data.items;
     }
 
+    initialized.value = true;
     loading.value = false;
   }
 

frontend/app/composables/partials/use-store-factory.ts

@@ -16,10 +16,11 @@ export const useReadOnlyStore = function <T extends BoundT>(
   storeKey: string,
   store: Ref<T[]>,
   loading: Ref<boolean>,
+  initialized: Ref<boolean>,
   api: BaseCRUDAPIReadOnly<T>,
   params = {} as Record<string, QueryValue>,
 ) {
-  const storeActions = useReadOnlyActions(`${storeKey}-store-readonly`, api, store, loading);
+  const storeActions = useReadOnlyActions(`${storeKey}-store-readonly`, api, store, loading, initialized);
   const actions = {
     ...storeActions,
     async refresh() {
@@ -27,11 +28,12 @@ export const useReadOnlyStore = function <T extends BoundT>(
     },
     flushStore() {
       store.value = [];
+      initialized.value = false;
     },
   };
 
   // initial hydration
-  if (!loading.value && !store.value.length) {
+  if (!loading.value && !initialized.value) {
     actions.refresh();
   }
 
@@ -42,10 +44,11 @@ export const useStore = function <T extends BoundT>(
   storeKey: string,
   store: Ref<T[]>,
   loading: Ref<boolean>,
+  initialized: Ref<boolean>,
   api: BaseCRUDAPI<unknown, T, unknown>,
   params = {} as Record<string, QueryValue>,
 ) {
-  const storeActions = useStoreActions(`${storeKey}-store`, api, store, loading);
+  const storeActions = useStoreActions(`${storeKey}-store`, api, store, loading, initialized);
   const actions = {
     ...storeActions,
     async refresh() {
@@ -53,11 +56,12 @@ export const useStore = function <T extends BoundT>(
     },
     flushStore() {
       store.value = [];
+      initialized.value = false;
     },
   };
 
   // initial hydration
-  if (!loading.value && !store.value.length) {
+  if (!loading.value && !initialized.value) {
     actions.refresh();
   }
 

frontend/app/composables/store/use-category-store.ts

@@ -5,12 +5,16 @@ import { usePublicExploreApi, useUserApi } from "~/composables/api";
 
 const store: Ref<RecipeCategory[]> = ref([]);
 const loading = ref(false);
+const initialized = ref(false);
 const publicLoading = ref(false);
+const publicInitialized = ref(false);
 
 export function resetCategoryStore() {
   store.value = [];
   loading.value = false;
+  initialized.value = false;
   publicLoading.value = false;
+  publicInitialized.value = false;
 }
 
 export const useCategoryData = function () {
@@ -23,10 +27,10 @@ export const useCategoryData = function () {
 
 export const useCategoryStore = function (i18n?: Composer) {
   const api = useUserApi(i18n);
-  return useStore<RecipeCategory>("category", store, loading, api.categories);
+  return useStore<RecipeCategory>("category", store, loading, initialized, api.categories);
 };
 
 export const usePublicCategoryStore = function (groupSlug: string, i18n?: Composer) {
   const api = usePublicExploreApi(groupSlug, i18n).explore;
-  return useReadOnlyStore<RecipeCategory>("category", store, publicLoading, api.categories);
+  return useReadOnlyStore<RecipeCategory>("category", store, publicLoading, publicInitialized, api.categories);
 };

frontend/app/composables/store/use-cookbook-store.ts

@@ -5,17 +5,21 @@ import { usePublicExploreApi, useUserApi } from "~/composables/api";
 
 const cookbooks: Ref<ReadCookBook[]> = ref([]);
 const loading = ref(false);
+const initialized = ref(false);
 const publicLoading = ref(false);
+const publicInitialized = ref(false);
 
 export function resetCookbookStore() {
   cookbooks.value = [];
   loading.value = false;
+  initialized.value = false;
   publicLoading.value = false;
+  publicInitialized.value = false;
 }
 
 export const useCookbookStore = function (i18n?: Composer) {
   const api = useUserApi(i18n);
-  const store = useStore<ReadCookBook>("cookbook", cookbooks, loading, api.cookbooks);
+  const store = useStore<ReadCookBook>("cookbook", cookbooks, loading, initialized, api.cookbooks);
 
   const updateAll = async function (updateData: UpdateCookBook[]) {
     loading.value = true;
@@ -31,5 +35,5 @@ export const useCookbookStore = function (i18n?: Composer) {
 
 export const usePublicCookbookStore = function (groupSlug: string, i18n?: Composer) {
   const api = usePublicExploreApi(groupSlug, i18n).explore;
-  return useReadOnlyStore<ReadCookBook>("cookbook", cookbooks, publicLoading, api.cookbooks);
+  return useReadOnlyStore<ReadCookBook>("cookbook", cookbooks, publicLoading, publicInitialized, api.cookbooks);
 };

frontend/app/composables/store/use-food-store.ts

@@ -5,12 +5,16 @@ import { usePublicExploreApi, useUserApi } from "~/composables/api";
 
 const store: Ref<IngredientFood[]> = ref([]);
 const loading = ref(false);
+const initialized = ref(false);
 const publicLoading = ref(false);
+const publicInitialized = ref(false);
 
 export function resetFoodStore() {
   store.value = [];
   loading.value = false;
+  initialized.value = false;
   publicLoading.value = false;
+  publicInitialized.value = false;
 }
 
 export const useFoodData = function () {
@@ -24,10 +28,10 @@ export const useFoodData = function () {
 
 export const useFoodStore = function (i18n?: Composer) {
   const api = useUserApi(i18n);
-  return useStore<IngredientFood>("food", store, loading, api.foods);
+  return useStore<IngredientFood>("food", store, loading, initialized, api.foods);
 };
 
 export const usePublicFoodStore = function (groupSlug: string, i18n?: Composer) {
   const api = usePublicExploreApi(groupSlug, i18n).explore;
-  return useReadOnlyStore<IngredientFood>("food", store, publicLoading, api.foods);
+  return useReadOnlyStore<IngredientFood>("food", store, publicLoading, publicInitialized, api.foods);
 };

frontend/app/composables/store/use-household-store.ts

@@ -5,20 +5,24 @@ import { usePublicExploreApi, useUserApi } from "~/composables/api";
 
 const store: Ref<HouseholdSummary[]> = ref([]);
 const loading = ref(false);
+const initialized = ref(false);
 const publicLoading = ref(false);
+const publicInitialized = ref(false);
 
 export function resetHouseholdStore() {
   store.value = [];
   loading.value = false;
+  initialized.value = false;
   publicLoading.value = false;
+  publicInitialized.value = false;
 }
 
 export const useHouseholdStore = function (i18n?: Composer) {
   const api = useUserApi(i18n);
-  return useReadOnlyStore<HouseholdSummary>("household", store, loading, api.households);
+  return useReadOnlyStore<HouseholdSummary>("household", store, loading, initialized, api.households);
 };
 
 export const usePublicHouseholdStore = function (groupSlug: string, i18n?: Composer) {
   const api = usePublicExploreApi(groupSlug, i18n).explore;
-  return useReadOnlyStore<HouseholdSummary>("household-public", store, publicLoading, api.households);
+  return useReadOnlyStore<HouseholdSummary>("household-public", store, publicLoading, publicInitialized, api.households);
 };

frontend/app/composables/store/use-label-store.ts

@@ -5,10 +5,12 @@ import { useUserApi } from "~/composables/api";
 
 const store: Ref<MultiPurposeLabelOut[]> = ref([]);
 const loading = ref(false);
+const initialized = ref(false);
 
 export function resetLabelStore() {
   store.value = [];
   loading.value = false;
+  initialized.value = false;
 }
 
 export const useLabelData = function () {
@@ -22,5 +24,5 @@ export const useLabelData = function () {
 
 export const useLabelStore = function (i18n?: Composer) {
   const api = useUserApi(i18n);
-  return useStore<MultiPurposeLabelOut>("label", store, loading, api.multiPurposeLabels);
+  return useStore<MultiPurposeLabelOut>("label", store, loading, initialized, api.multiPurposeLabels);
 };

frontend/app/composables/store/use-tag-store.ts

@@ -5,12 +5,16 @@ import { usePublicExploreApi, useUserApi } from "~/composables/api";
 
 const store: Ref<RecipeTag[]> = ref([]);
 const loading = ref(false);
+const initialized = ref(false);
 const publicLoading = ref(false);
+const publicInitialized = ref(false);
 
 export function resetTagStore() {
   store.value = [];
   loading.value = false;
+  initialized.value = false;
   publicLoading.value = false;
+  publicInitialized.value = false;
 }
 
 export const useTagData = function () {
@@ -23,10 +27,10 @@ export const useTagData = function () {
 
 export const useTagStore = function (i18n?: Composer) {
   const api = useUserApi(i18n);
-  return useStore<RecipeTag>("tag", store, loading, api.tags);
+  return useStore<RecipeTag>("tag", store, loading, initialized, api.tags);
 };
 
 export const usePublicTagStore = function (groupSlug: string, i18n?: Composer) {
   const api = usePublicExploreApi(groupSlug, i18n).explore;
-  return useReadOnlyStore<RecipeTag>("tag", store, publicLoading, api.tags);
+  return useReadOnlyStore<RecipeTag>("tag", store, publicLoading, publicInitialized, api.tags);
 };

frontend/app/composables/store/use-tool-store.ts

@@ -9,12 +9,16 @@ interface RecipeToolWithOnHand extends RecipeTool {
 
 const store: Ref<RecipeTool[]> = ref([]);
 const loading = ref(false);
+const initialized = ref(false);
 const publicLoading = ref(false);
+const publicInitialized = ref(false);
 
 export function resetToolStore() {
   store.value = [];
   loading.value = false;
+  initialized.value = false;
   publicLoading.value = false;
+  publicInitialized.value = false;
 }
 
 export const useToolData = function () {
@@ -29,10 +33,10 @@ export const useToolData = function () {
 
 export const useToolStore = function (i18n?: Composer) {
   const api = useUserApi(i18n);
-  return useStore<RecipeTool>("tool", store, loading, api.tools);
+  return useStore<RecipeTool>("tool", store, loading, initialized, api.tools);
 };
 
 export const usePublicToolStore = function (groupSlug: string, i18n?: Composer) {
   const api = usePublicExploreApi(groupSlug, i18n).explore;
-  return useReadOnlyStore<RecipeTool>("tool", store, publicLoading, api.tools);
+  return useReadOnlyStore<RecipeTool>("tool", store, publicLoading, publicInitialized, api.tools);
 };

frontend/app/composables/store/use-unit-store.ts

@@ -5,10 +5,12 @@ import { useUserApi } from "~/composables/api";
 
 const store: Ref<IngredientUnit[]> = ref([]);
 const loading = ref(false);
+const initialized = ref(false);
 
 export function resetUnitStore() {
   store.value = [];
   loading.value = false;
+  initialized.value = false;
 }
 
 export const useUnitData = function () {
@@ -23,5 +25,5 @@ export const useUnitData = function () {
 
 export const useUnitStore = function (i18n?: Composer) {
   const api = useUserApi(i18n);
-  return useStore<IngredientUnit>("unit", store, loading, api.units);
+  return useStore<IngredientUnit>("unit", store, loading, initialized, api.units);
 };

frontend/app/composables/store/use-user-store.ts

@@ -6,10 +6,12 @@ import { BaseCRUDAPIReadOnly } from "~/lib/api/base/base-clients";
 
 const store: Ref<UserSummary[]> = ref([]);
 const loading = ref(false);
+const initialized = ref(false);
 
 export function resetUserStore() {
   store.value = [];
   loading.value = false;
+  initialized.value = false;
 }
 
 class GroupUserAPIReadOnly extends BaseCRUDAPIReadOnly<UserSummary> {
@@ -21,5 +23,5 @@ export const useUserStore = function (i18n?: Composer) {
   const requests = useRequests(i18n);
   const api = new GroupUserAPIReadOnly(requests);
 
-  return useReadOnlyStore<UserSummary>("user", store, loading, api, { orderBy: "full_name" });
+  return useReadOnlyStore<UserSummary>("user", store, loading, initialized, api, { orderBy: "full_name" });
 };