Fix TypeError in AI Catalog Flows when GraphQL data is undefined
Summary
Fixes a TypeError: Cannot read properties of undefined (reading 'aiCatalogItems') in the AI Catalog Flows list page (ai_catalog_flows.vue).
Issue 3 in: https://gitlab.com/gitlab-org/gitlab/-/work_items/587498
Root Cause
The Apollo update and result callbacks access data.aiCatalogItems without null checks:
update: (data) => data.aiCatalogItems.nodes,
result({ data }) {
this.pageInfo = data.aiCatalogItems.pageInfo;
},
When the GraphQL query fails (network error, authorization failure, backend error), data can be undefined, causing the TypeError. The agents page (ai_catalog_agents.vue) already handles this correctly with optional chaining — the flows page was simply missing the same protection.
Fix
Added optional chaining and fallback defaults, matching the existing pattern in ai_catalog_agents.vue:
update: (data) => data?.aiCatalogItems?.nodes || [],
result({ data }) {
this.pageInfo = data?.aiCatalogItems?.pageInfo || {};
},
User Impact
-
Before: When a GraphQL error occurs on
/explore/ai-catalog/flows/, the page crashes with an unhandled TypeError, leaving a broken/blank state. - After: The page gracefully shows an empty list, remains functional, and the user can retry or navigate away.
MR acceptance checklist
- This MR does not add new JavaScript modules. (See JS-related restrictions)
Edited by Jannik Lehmann