When offline, useQuery stays stuck on loading if an offline mutation was called first

Help
,
1

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.

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

I cannot seem to figure this one out.
Thanks for any ideas/assistance in advance!