Getting stale data from cache

I’ve got queries and mutations working as hooks, and the mutations are even updating the cache correctly. However, the components using the updated queries get a stale result on the next render and see the update in subsequent renders.

I have a simple list-detail set of components with one route showing all items and another route showing the selected item. This sequence of operations will show stale data for the item when it’s loaded in a list but not when it’s loaded by itself:

1. load /#/items
2. click the fifth one to go to /#/item/5
3. activate a mutation on the item, e.g. a Disable button
4. the item will correctly show as “disabled” (up-to-date when single)
5. click the nav link to go back to /#/items
6. the fifth will still erroneously show as “enabled” (stale when in a list)
7. click any item
8. click the nav link to go back to /#/items again
9. the fifth will now correctly show as “disabled” (up-to-date on second viewing, even in a list)

Something similar happens when using client.resetStore() and client.clearStore(). Forcing an update on a visible component with a query gets the cached results without hitting the server. Navigating away and back so the component with the stale query data gets destroyed and recreated finally loads the data from the server.

I’m following all the examples I’ve found, but here’s the relevant code just in case:

// List.js

export default function Items() {
    const { data, error, loading } = useQuery(...);
    ... check loading and error ...
    return <ul>
        {data.items.map(item => 
            <li><a href={`/#/item/${item.id}`}>{item.name}</a></li>
        )};
    </ul>;
}

// Detail.js

export default function Detail({ params: { match: { id } } }) {
    const mutate = useMutation(...);
    return <button onClick={mutate}>Disable</button>;
}

I’d greatly appreciate any help or pointers on how to track down this issue in case I’m doing something wrong. Everything else is working fine so I think I’ve set it all up correctly. Any thoughts?

[G1itcher]

we’re seeing the exact same thing.

Triggering mutation and moving to a new page, at which point we call useQuery to get the new data, which is out of date at that point. By going back and forward again we can see that it gets the correct data.

[bdeterling]

I encountered this too and had to use the metadata hack to work around it. It seems like a pretty basic use case to query for something, edit it in a modal, update it, then expect the underlying page to show the updates. The Apollo cache is correct and I can’t think of a scenario where anyone would want useQuery to return something different than is in the cache. Perhaps it could run with cache-only any time skip is false and use the default fetchPolicy only when the variables change.