Refetching an unmounted query results in stale data after remount.

[pleunv]

Hi guys!

I'm running into an issue with a mutation that should cause a refetch of a component that's currently unmounted. Brief scenario:

Lets say I've got 2 components, ListComponent and FormComponent. ListComponent is mapped to a list of items through MyListQuery, FormComponent has a createItem mutation that has MyListQuery added to its refetch list. When the form is displayed, the list component is unmounted. When the form is published and the mutation promise has been resolved, we redirect back to ListComponent. The code looks something like this:

// ListComponent.jsx

export default graphql(MyListQuery)(ListComponent);

// CreateFormComponent.jsx

const mutationOpts = ({ mutate }) => ({
  createItem: (item) => mutate({
    variables: { item },
    refetchQueries: ['MyListQuery']
  })
});

export default graphql(CREATE_MUTATION, mutationOpts)(CreateFormComponent);

After the form is submitted, the mutation has been performed and we redirect back to the list, I'm expecting the list to either contain the new item, or to show a loader when the query is still being refetched. However, it looks like MyListQuery gets removed from QueryManager.observableQueries[] since its component is unmounted. Because of this the QueryManager can't find a match when looking up the queries that need to be refetched. As a result ListComponent just fetches its result from cache as it is unaware of the fact that its query result is now stale.

Is there any way to solve this behavior without doing a forceFetch? Would it be a possibility to keep tracking queries even when they are unmounted, but flagging them as stale so that their refetch can be delayed until remount?

Intended outcome:

When a refetch happens on a unmounted component's query, the component should be aware of the stale query after remounting and refetch accordingly.

Actual outcome:

Currently queries stop being observed after being unmounted so this behavior does not work.

[calebmer]

This is a known issue that has had much prior discussion (see #1129 and #1224). In the meantime, we recommend not unmounting components whose data you want to stay fresh. Let me know if you have any more questions 👍

[pleunv]

I just tried out the new version of react-apollo and got rid of the forceFetches, however I'm still not getting the desired result with the aforementioned scenario. Should the recycling be compatible with refetchQueries (query names), or could it be something else I'm missing?

[calebmer]

Yeah, it should be compatible with refetchQueries…

Could you reproduce this error by forking react-apollo-error-template? It would go a long way in helping us debug the issue.

[pleunv]

My first attempt of reproducing it with a fairly similar approach actually works correctly... I must be overlooking something, will try to investigate a bit further.
Main differences are: no react-router, no graphql-loader, no 2 redux stores (1 apollo, 1 app-specific), but I doubt that has anything to do with it.