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.
Thanks for any ideas/assistance in advance!