## Summary This child epic is part of [the Epic to update the frontend pipelines codebase](https://gitlab.com/groups/gitlab-org/-/epics/3181). As the CI frontend team continues to improve the pipeline Vue architecture, we should move from [the pipelines API endpoints](https://docs.gitlab.com/ee/api/pipelines.html) to [using GraphQL](https://docs.gitlab.com/ee/api/graphql/reference/#pipelines). ## Improvements This will help us create more efficient API requests, where don't request more than we need to receive. It also allows us to align our codebase with the overall vision to bring all API endpoints to GraphQL. ## Risks We miss necessary information that we were receiving from the pipelines API. We should be able to avoid this by maintaining current tests, and adding new tests to ensure we have all of the data we need. ## Involved components [See `/javascripts/pipelines/components/pipelines`](https://gitlab.com/gitlab-org/gitlab/-/blob/78b682985625eec11f10483a681c7c2525bca295/app/assets/javascripts/pipelines/components/pipelines.vue) for a good starting point. ## Optional: Intended side effects Better page performance - faster loading time. One key location to measure this is the loading time of the Pipelines Test Report. ## How Will We Do It? We will convert frontend and backend separately, though in roughly the same order. For the frontend, we will convert by: 1. Updating information passed through the mounting points `dataset` to use the Apollo cache (as described in https://docs.gitlab.com/ee/development/fe_guide/graphql.html#local-state-with-apollo and https://www.youtube.com/watch?v=9knwu87IfU8). 2. Converting REST API calls to also write to the local Apollo state, so that the query side can be consistent with GraphQL. This will have the benefit of outlining the expected query shapes for the backend. 3. Backend creates GraphQL endpoint/resolvers. 4. Replacing the REST calls once the GraphQL endpoint is available. We will begin with simpler components in order to work out the kinks. Candidates include: DAG visualization and the pipelines table.