Apply filters to Vuex GraphQL query
Context
Once we have the new Vuex-action implemented, we want to apply the applied dependency-list filters to the GraphQL query.
Currently, the filters get added as query-strings to the REST-API call, but for the GraphQL version, we need to apply query arguments accordingly.
graph TD
A[User Action] --> B{Feature Flag<br>GraphQL Enabled?}
B -->|Yes| C[fetchDependenciesGraphQL]
B -->|No| D[fetchDependencies]
D --> E[queryParametersFor]
E --> F[REST API Call]
C --> G[graphQLVariablesFor]
G --> H[GraphQL Query]
subgraph "Existing REST Implementation"
D
E[queryParametersFor<br>Converts state to REST params]
F
end
subgraph "New GraphQL Implementation"
C
G[graphQLVariablesFor<br>Converts state to GraphQL variables]
H
end
I[State] --> E
I --> G
subgraph "Parameter Extraction Logic"
J[Common Parameters<br>- sort_by/sortBy<br>- sort/sortOrder<br>- filter<br>- searchFilterParameters]
E --> K[REST Format<br>- URL query params<br>- Pagination params]
G --> L[GraphQL Format<br>- Variables object<br>- Different field naming]
end
Note: The filters get stored on the Vuex state and are extracted and translated into a query-parameter object here: https://gitlab.com/gitlab-org/gitlab/-/blob/master/ee/app/assets/javascripts/dependencies/store/modules/list/actions.js#L81
Implementation Steps
- Add feature flag logic to filtered-search component to call the correct fetch-action
- Add filters to query
- Apply filter variables to Query within the fetch action
Edited by David Pisek