From 6db24b7782fe2a2b4f27e6d5a7bb71b1ec62d270 Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Wed, 10 Sep 2025 14:26:31 +0200
Subject: [PATCH 1/2] Attempt to use keyargs for component filter

---
 .../dependencies/graphql/provider.js          | 24 ++++++++++++++++++-
 .../javascripts/dependencies/store/actions.js |  1 -
 .../javascripts/dependencies/store/utils.js   |  4 ++--
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/ee/app/assets/javascripts/dependencies/graphql/provider.js b/ee/app/assets/javascripts/dependencies/graphql/provider.js
index 9153c5252b359d..994b3b1f88eaf1 100644
--- a/ee/app/assets/javascripts/dependencies/graphql/provider.js
+++ b/ee/app/assets/javascripts/dependencies/graphql/provider.js
@@ -4,7 +4,29 @@ import createDefaultClient from '~/lib/graphql';
 
 Vue.use(VueApollo);
 
-const defaultClient = createDefaultClient();
+const defaultClient = createDefaultClient(
+  {},
+  {
+    cacheConfig: {
+      typePolicies: {
+        Project: {
+          fields: {
+            dependencies: {
+              keyArgs: ['sort', 'componentNames', 'componentVersions'],
+            },
+          },
+        },
+        Group: {
+          fields: {
+            dependencies: {
+              keyArgs: ['sort', 'componentNames', 'componentVersions'],
+            },
+          },
+        },
+      },
+    },
+  },
+);
 
 export default new VueApollo({
   defaultClient,
diff --git a/ee/app/assets/javascripts/dependencies/store/actions.js b/ee/app/assets/javascripts/dependencies/store/actions.js
index 7bc5b5adf62b52..dc26bc080531a6 100644
--- a/ee/app/assets/javascripts/dependencies/store/actions.js
+++ b/ee/app/assets/javascripts/dependencies/store/actions.js
@@ -211,7 +211,6 @@ export const fetchDependenciesViaGraphQL = ({ state, dispatch, commit }, params
     .query({
       query,
       variables,
-      fetchPolicy: 'network-only',
     })
     .then(({ data }) => {
       const { nodes: dependenciesData, pageInfo: responsePageInfo } = data.namespace.dependencies;
diff --git a/ee/app/assets/javascripts/dependencies/store/utils.js b/ee/app/assets/javascripts/dependencies/store/utils.js
index af8969f301edc4..c4c69134676969 100644
--- a/ee/app/assets/javascripts/dependencies/store/utils.js
+++ b/ee/app/assets/javascripts/dependencies/store/utils.js
@@ -1,4 +1,4 @@
-import createGraphQLClient from '~/lib/graphql';
+import apolloProvider from '../graphql/provider';
 
 export const extractGroupNamespace = (endpoint) => {
   const match = endpoint.match(/groups\/(.*)\/-\/dependencies.json/);
@@ -14,4 +14,4 @@ export const filterPathBySearchTerm = (data = [], searchTerm = '') => {
 export const hasDependencyList = ({ dependencies }) => Array.isArray(dependencies);
 export const isValidResponse = ({ data }) => Boolean(data && hasDependencyList(data));
 
-export const graphQLClient = createGraphQLClient();
+export const graphQLClient = apolloProvider.defaultClient;
-- 
GitLab


From 775d8a65c6539e02253f31e5eeed2625d6b61fde Mon Sep 17 00:00:00 2001
From: Samantha Ming <sming@gitlab.com>
Date: Wed, 10 Sep 2025 16:41:29 +0200
Subject: [PATCH 2/2] Remove keyArgs and use plain array instead

---
 .../dependencies/graphql/provider.js          | 24 +------------------
 .../javascripts/dependencies/store/actions.js | 10 ++++++++
 2 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/ee/app/assets/javascripts/dependencies/graphql/provider.js b/ee/app/assets/javascripts/dependencies/graphql/provider.js
index 994b3b1f88eaf1..9153c5252b359d 100644
--- a/ee/app/assets/javascripts/dependencies/graphql/provider.js
+++ b/ee/app/assets/javascripts/dependencies/graphql/provider.js
@@ -4,29 +4,7 @@ import createDefaultClient from '~/lib/graphql';
 
 Vue.use(VueApollo);
 
-const defaultClient = createDefaultClient(
-  {},
-  {
-    cacheConfig: {
-      typePolicies: {
-        Project: {
-          fields: {
-            dependencies: {
-              keyArgs: ['sort', 'componentNames', 'componentVersions'],
-            },
-          },
-        },
-        Group: {
-          fields: {
-            dependencies: {
-              keyArgs: ['sort', 'componentNames', 'componentVersions'],
-            },
-          },
-        },
-      },
-    },
-  },
-);
+const defaultClient = createDefaultClient();
 
 export default new VueApollo({
   defaultClient,
diff --git a/ee/app/assets/javascripts/dependencies/store/actions.js b/ee/app/assets/javascripts/dependencies/store/actions.js
index dc26bc080531a6..bb7da569e2f3fb 100644
--- a/ee/app/assets/javascripts/dependencies/store/actions.js
+++ b/ee/app/assets/javascripts/dependencies/store/actions.js
@@ -207,6 +207,16 @@ export const fetchDependenciesViaGraphQL = ({ state, dispatch, commit }, params
     ...buildGraphQLSortOptions(sortField, sortOrder),
   };
 
+  // Convert reactive Vue arrays to plain arrays to fix caching issue
+  // Without this, Apollo returns wrong cached data when filters change
+  // Ex. ['0.24.0', '1.6.7', __ob__: Observer2] → ['0.24.0', '1.6.7']
+  if (variables.componentVersions) {
+    variables.componentVersions = [...variables.componentVersions];
+  }
+  if (variables.componentNames) {
+    variables.componentNames = [...variables.componentNames];
+  }
+
   graphQLClient
     .query({
       query,
-- 
GitLab