Apollo useQuery stuck in loading = true condition after offline mutation

Question

16m I am trying to complete a robust offline React, PWA using Apollo.

I have a functional component that uses useQuery to retrieve a list of items. It is using the default fetchPolicy. When this component renders, it successfully retrieves the data. If I am online or offline it works just fine.

If I am offline and I make a call to useMutation to create a new item, the list updates correctly, since I am using optimisticResponse and the update feature of mutations.

The problem happens when I navigate away from the list component, so that it is no longer rendered, then I return. Upon returning, the functional component that list all of the items is rendered again, it is stuck in the loading=true condition since I invoked the mutation. All this time the app is still offline. While in this loading state, I try to create another item while offline. The list never optimistically updates in this situation.

What do I have to do to get this to work? Is there a fundamental flaw to my basic approach to making this an offline-first app?

Here is a summary of the steps that create the problem.

• Functional component executes a query and retrieves a list of items and renders them without issues.
• Place the app offline.
• While the list component is still rendered, invoke a mutation to create a new item while offline.
• Optimistically update the UI (by updating the cache) with no issues.
• Navigate away from the list component.
• Navigate back to the list component (forcing a rerender of the entire list component)
• The list component useQuery/loading value is stuck in true condition.
• Attempt to create another item the same way as before.
• The list does not optimistically update.

I cannot seem to figure this one out.