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