Fetch every page of milestones on the roadmap
What does this MR do and why?
The roadmap fetched milestones in one GraphQL request without first, so the schema's page size limit of 100 applied and every milestone after the 100 due earliest was dropped without notice.
The query now selects pageInfo, and roadmap_shell.vue follows hasNextPage with fetchMore, requesting each cursor once. It stops after 20 requests, the cap inherited_ci_variables_app.vue uses, or once 2,000 milestones are held, and shows a warning alert. The alert is dismissed when the range or the milestone title filter changes, when milestones are hidden, and when the roadmap is left. A type policy merges the pages and skips any milestone whose id it already holds, the merge analytics/shared/graphql/client.js uses for labels, so a page that arrives twice is merged once. That happens when an epics sort change redraws the roadmap while a page is still loading. When a page fails, returning to the same range and filter shows the error alert again instead of a partial list alone.
Fixed path
flowchart TD
A["roadmap_shell.vue milestonesQueryVariables<br/>first: 100"] --> B["groupMilestonesEE<br/>selects pageInfo"]
B --> C["MilestoneConnection.nodes<br/>merges the page, deduped by id"]
C --> D{"result()<br/>pageInfo.hasNextPage?"}
D -->|"no"| E["every milestone in range is shown"]
D -->|"yes"| F{"under 20 requests<br/>and 2,000 milestones?"}
F -->|"yes"| G["fetchNextMilestonesPage()<br/>fetchMore with after: endCursor,<br/>once per cursor"]
G --> B
F -->|"no, 2,000 loaded"| H["createAlert, warning variant<br/>Maximum number of milestones loaded (2,000)"]References
- Closes #631411 (closed)
- Related to #426620
- Depends on !258975 (merged)
Screenshots or screen recordings
| Before | After | At the cap |
|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
How to set up and validate locally
- In a top-level group, create 101 milestones dated January to April this year.
- In its subgroup, create a December milestone and an epic dated this year.
- Open the subgroup's roadmap with
?layout=MONTHS&timeframe_range_type=CURRENT_YEAR&show_milestones=true. - Milestones counts 100 on
masterand 102 on this branch.
MR acceptance checklist
Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
- On
masterthe roadmap shows 100 of 102 milestones. With this change it shows 102 under Vue 2 and Vue 3, and the roadmap Jest specs pass under both, with the new ones failing without the change. ee/spec/features/groups/group_roadmap_spec.rbpasses with quarantined examples excluded, as CI runs it, along with the roadmap controller spec and the group milestones GraphQL and resolver specs.- The diff is over 500 lines, mostly specs.
graphql.jsis re-indented, so Hide whitespace changes gives the readable view.




