Asynchronous Invalidation

[eggei]

I have a situation in my application where the frontend sends a request to update a resource, which triggers an asynchronous background task. When this task completes, it updates the resource in the database, and the UI needs to react to that change.

Here's an example: A user clicks a button to change the text shown in a lesson's video. The server responds with 200 and starts an asynchronous video generation task for the lesson. When finished, it sends a notification to the UI. However, useMutation won't invalidate the queries related to that mutation when video generation finishes, since it has already done so right after receiving the 200 response from the initial mutation request.

I've implemented a system for async invalidation where my custom hook watches for notification changes and triggers the related invalidations when a change occurs. I'll share some pseudo code below that explains my approach.

My question is: Am I overengineering this mechanism? Is there a simpler way to achieve this functionality? While my current system works, it feels overly complex and has edge cases. I'm curious if others have faced similar issues and how they've solved them.

---

This is how I run my custom mutation hook

const { mutate } = useCustomMutation('/resource', { invalidations: ['/resource'] })

This is how it handles the async invalidation decisions:

const useCustomMutation = (url, options) => {
  const mutationFn = () => {
    // logic that inspects response from server to determine whether mutation has started a background task
    // if so, saves it in UI state with invalidations that needs to happen
    // something like:
    if (resp.hasStartedBackgroundTasks()) {
       saveAppState({ 
         asyncTaskId: resp.backgroundTaskId, 
         runAsyncInvalidation: () => queryClient.invalidateQueries({ queryKey: invalidations }) 
      })
    }
  }

  return useMutation({ mutationFn })
}

Then, where I receive notifications, I run the async invalidations set in the app state:

useEffect(() => {
  if (notifications.includes(appState.asynTasksId}) {
    appState.runAsyncInvalidation()
  }
}, [notifications])

If needed, my stack is React + Ruby on Rails. And when I say background task, it is actually ActiveJob that is starting.

[TkDodo]

I would probably just have the mutation invalidate a query that then starts polling with refetchInterval: () => ... that refetches every second or so until the correct response is returned from that endpoint.

[eggei]

I really appreciate your response. Thank you for suggesting that approach!

The refetchInterval solution could work really well in certain scenarios. In fact, we thought of polling the data like that. However, apart from some other concerns in my specific case, I'm dealing with a high-volume system where many users frequently run mutations simultaneously - also, each process that each mutation starts takes (depending on action type) about 2 to 10 minutes.

I wanted to be mindful of the server load, since implementing automatic refetching could potentially generate a significant number of extra requests.

If I did refetch on an interval that is more like a minute or two. Maybe it would've help with server load but than it would mean making my user wait up to almost the interval time -in the worst case- which is not ideal.