Return an empty array when country/state fetch fails

David Hamp-Gonsalvesrequested to merge
618751-fix-country-state-resolver into master

What does this MR do?

The Apollo local resolvers for countries and states caught a failed fetch and returned the value of createAlert() — an alert object, not an array. The query therefore resolved successfully with a non-array value, and every caller doing data.countries.map(...) threw:

TypeError: e.countries.map is not a function
TypeError: e.states.map is not a function

This returns [] from the failure path instead. The user still sees the alert; the dropdown renders empty rather than the component throwing.

-        .catch(() => createAlert({ message: ERROR_FETCHING_COUNTRIES }));
+        .catch(() => {
+          createAlert({ message: ERROR_FETCHING_COUNTRIES });
+          return [];
+        });

Why fix the resolver rather than the callers

country_state_mixin backs six components, so a resolver-level fix covers all of them and keeps the query's contract ("this returns an array") intact:

  • registrations/components/free_welcome_form.vue
  • registrations/components/trial_welcome_form.vue
  • registrations/components/company_form.vue
  • trials/components/create_trial_form.vue
  • pages/gitlab_subscriptions/self_managed/trials/components/create_trial_form.vue
  • hand_raise_leads/hand_raise_lead/components/hand_raise_lead_modal.vue

A defensive data.countries ?? [] in the mixin would also stop the throw, but it would mask the failure at each call site instead of fixing the source.

Test gap this closes

The existing error specs asserted only that the alert fired, never what the resolver returned — which is how this shipped. Both error cases now assert the return value. Verified they fail without the fix and pass with it.

Out of scope

Whether an empty dropdown is the right UX, or the form should offer a retry, is a separate question raised in the issue.

References

How to set up and validate locally

  1. Block or fail the /-/countries request (devtools request blocking, or a 500).
  2. Visit /users/sign_up/welcome.
  3. Before: the country dropdown does not render and the console shows TypeError: e.countries.map is not a function. After: an alert appears and the dropdown renders empty.

Merge request reports