Freeze query reactivity?

[tepid badge]

I’m building a mobile app with react native + expo.

The flow is like this:

Entity list -> entity detail view

And on the detail view I have a delete button. Once the button is pressed the currently viewing entity gets deleted and the user gets navigated back to the entity list.

But I’m getting an error because before the user can get sent back, convex is throwing an error that the currently viewing entity no longer exists (because it was just deleted)

So what’s the best way to handle this? Can I freeze the reactivity until the user is navigated back? Or what’s the recommended approach?

This seems like a pretty usual flow to me

[mighty merlin]

Hi @tepid badge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

This is a common scenario when using Convex's reactive queries: if you delete an entity while still viewing its detail page, the query for that entity will immediately update (or error) because the data is gone, potentially causing errors or unwanted UI states before navigation completes.

Recommended approaches based on the knowledge sources:

1. Handle Query Errors Gracefully:
   Convex queries will throw if the data is missing. The recommended way to handle this is to use a React error boundary around your detail view. This way, if the query errors (e.g., the entity is deleted), you can show fallback UI or trigger navigation back to the list.

   "If your query function hits an error, the error will be sent to the client and thrown from your useQuery call site. The best way to handle these errors is with a React error boundary component."
   Error Handling in Convex

2. Optimistic Navigation:
   After triggering the delete mutation, immediately navigate back to the list view before the mutation completes or before the query can react to the deletion. This avoids rendering the detail view after the entity is gone.

3. Freeze Reactivity (Not Directly Supported):
   There is no built-in way to "freeze" Convex query reactivity. However, you can work around this by conditionally skipping the query after deletion. For example, you can use the "skip" argument to useQuery to prevent it from running if you know the entity is being deleted or navigation is in progress:

   const shouldSkip = isDeleting || isNavigatingBack;
   const entity = useQuery(api.entities.get, shouldSkip ? "skip" : { id });
   

   Skipping queries with "skip"

4. Custom Hook for Stable Data:
   If you want to avoid flashes of undefined or errors, you can use a custom hook like useStableQuery to keep showing the last known good data until navigation completes. This pattern is described in the Convex docs and community resources:

   "You can implement a custom React hook that keeps track of the resulting data with React’s builtin useRef hook... only update the value returned once the query result is no longer undefined."
   useStableQuery pattern

Summary:
The most robust solution is to handle errors gracefully (with an error boundary or fallback UI) and/or navigate away from the detail view as soon as the delete action is triggered. There is no built-in way to "freeze" reactivity, but you can conditionally skip queries or use a stable data hook to avoid unwanted UI updates during this transition.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: