#StackBounty: #reactjs #apollo #react-apollo #apollo-client How to handle cache update after mutation in multiple views?

Bounty: 150

This is more of a open question but hopefully it won’t get deleted.

I am using react and apollo although the question is more general.

Let’s say I have 3 distinct views in my app all using similar (but not the same) data.
All of them are using separate queries but each of the query uses common operation but with slightly different data returned.

Let’s say I have a mutation somewhere that adds something to data (think of a list of items and a new item being added).

Let’s say after mutation I want to update cache to reflect that change. I am using read/writeQuery to do the update.
With this setup I need to update 3 queries – this becomes a maintenance nightmare.

After some reading I figured I am doing this wrong – I have now created a single query – now I need to only update that single query after mutation and all of my views are updated automatically.
However the problem is that this query now has to download all the data that all 3 views combined need – feels like this is very inefficient, because some of the views will get data they’ll never use.

Is there a better way to do it?

Please note that read/writeFragment won’t work because they won’t update the underlying queries – check this answer for example: https://stackoverflow.com/a/50349323/2874705

Please let me know in comment if you need a more concrete example.

All in all I think in this setup I would just be better with a global state handling and avoid apollo cache all together – however I feel cheated cause apollo promised to solve the state problems 🙂

Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.