Skip the award emoji cache update when the query is not cached

What does this MR do and why?

Fixes an uncaught TypeError on the work item and issue detail pages when a reaction is toggled before the reactions have loaded.

When the user adds or removes a reaction, app/assets/javascripts/work_items/components/work_item_award_emoji.vue runs the updateAwardEmoji mutation. Its update(cache) callback calls updateWorkItemAwardEmojiWidgetCache, which reads the award emoji query from the cache and updates it with produce.

cache.readQuery returns null when that query, with those exact variables, is not in the cache yet. That happens when the reaction is toggled before the award emoji query has resolved. produce(null, recipe) calls the recipe with null, so reading draftState.namespace threw TypeError: Cannot read properties of null (reading 'namespace'). Apollo logs errors thrown in a mutation update through invariant.error, so the console shows it as an uncaught error with a stack that points at vendor.dll.bundle.js.

In CI this logged the error in 1 example of spec/features/work_items/issues/user_interacts_with_awards_spec.rb.

Changes made:

  • work_item_award_emoji.vue — return early from the cache update when readQuery returns null. The refetch that follows the mutation still brings the list up to date, so nothing is lost.
  • work_item_award_emoji_spec.js — new block "when the award emoji query has not been cached yet". It mounts with a query handler that never resolves, awards an emoji, and asserts the mutation ran and no error was emitted. The test fails on the old code and passes with the fix.

How to set up and validate locally

  1. Open an issue.
  2. In DevTools, throttle the network to "Slow 3G" and reload.
  3. As soon as the reactions bar renders, click the thumbs up reaction before the page finishes loading.
  4. Check the console shows no reading 'namespace' TypeError, and that the reaction appears once the requests finish.
  5. Remove the throttling and toggle a reaction again.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

References

🤖 Generated with Claude Code

Merge request reports

Loading
Loading