diff --git a/ee/app/assets/javascripts/dependencies/store/actions.js b/ee/app/assets/javascripts/dependencies/store/actions.js index 7bc5b5adf62b520a02a246306b138cfa8c8a0c8e..bb7da569e2f3fb37f290cc2a5e495049495b17d4 100644 --- a/ee/app/assets/javascripts/dependencies/store/actions.js +++ b/ee/app/assets/javascripts/dependencies/store/actions.js @@ -207,11 +207,20 @@ 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, 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 af8969f301edc463d1c116cb7681bacfe741ffe6..c4c691346769697c9db571caad050206cda77b95 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;