fix: add filters to fe cache key (#3656)

Author: ulemons

frontend/src/modules/member/pages/member-list-page.vue

@@ -149,11 +149,11 @@ const membersQueryKey = computed(() => [
   TanstackKey.MEMBERS_LIST,
   selectedProjectGroup.value?.id,
   queryParams.value.search,
+  filters.value, // Use filters.value directly to make it reactive
   queryParams.value.offset,
   queryParams.value.limit,
   queryParams.value.orderBy,
-  selectedProjectGroup.value?.id ? [selectedProjectGroup.value.id] : [],
-
+  queryParams.value.segments,
 ]);
 
 // Query for members list with caching
@@ -208,7 +208,7 @@ watch(membersData, (newData) => {
     memberStore.totalMembers = newData.count || 0;
     memberStore.savedFilterBody = {
       search: queryParams.value.search,
-      filter: queryParams.value.filter,
+      filter: filters.value,
       offset: queryParams.value.offset,
       limit: queryParams.value.limit,
       orderBy: queryParams.value.orderBy,
@@ -232,6 +232,7 @@ const fetch = ({
     offset: 0,
     limit: pagination.value.perPage,
     orderBy: orderBy || 'activityCount_DESC',
+    segments: selectedProjectGroup.value?.id ? [selectedProjectGroup.value.id] : [],
     ...body,
   };
 
@@ -252,6 +253,17 @@ const onPaginationChange = ({
   pagination.value.perPage = perPage;
 };
 
+// Watch for filter changes to ensure cache invalidation
+watch(
+  filters,
+  () => {
+    // Reset to first page when filters change
+    pagination.value.page = 1;
+    queryParams.value.offset = 0;
+  },
+  { deep: true },
+);
+
 watch(
   selectedProjectGroup,
   (newProjectGroup, oldProjectGroup) => {

frontend/src/modules/organization/pages/organization-list-page.vue

@@ -146,10 +146,11 @@ const organizationsQueryKey = computed(() => [
   TanstackKey.ORGANIZATIONS_LIST,
   selectedProjectGroup.value?.id,
   queryParams.value.search,
+  filters.value, // Use filters.value directly to make it reactive
   queryParams.value.offset,
   queryParams.value.limit,
   queryParams.value.orderBy,
-  selectedProjectGroup.value?.id ? [selectedProjectGroup.value.id] : [],
+  queryParams.value.segments,
 ]);
 
 // Query for organizations list with caching
@@ -204,7 +205,7 @@ watch(organizationsData, (newData) => {
     organizationStore.totalOrganizations = newData.count || 0;
     organizationStore.savedFilterBody = {
       search: queryParams.value.search,
-      filter: queryParams.value.filter,
+      filter: filters.value,
       offset: queryParams.value.offset,
       limit: queryParams.value.limit,
       orderBy: queryParams.value.orderBy,
@@ -248,6 +249,17 @@ const onPaginationChange = ({
   pagination.value.perPage = perPage;
 };
 
+// Watch for filter changes to ensure cache invalidation
+watch(
+  filters,
+  () => {
+    // Reset to first page when filters change
+    pagination.value.page = 1;
+    queryParams.value.offset = 0;
+  },
+  { deep: true },
+);
+
 watch(
   selectedProjectGroup,
   (newProjectGroup, oldProjectGroup) => {