I wonder what is the best (if even possible) way to do the following:
For example, let's imagine a page with two lists: all series and favorite series. I get those lists ordered by rating from the server with this query:
query {
series {
id
name
rating
}
user {
id
name
favoriteSeries {
id
name
rating
}
}
}
now, when the user marks a certain series from "all series" list as favorite it should be removed from "all" list and added to "favorite" list ordered by its rating. So when the user clicks the button the mutation happens, and I must use mutation's "update" field to handle changes in the cache. I know that I should use readQuery
, writeQuery
, readFragment
and writeFragment
for this but I can't decide which is better for this task.
On one hand, I can use readQuery
. In this case, I can easily remove a series from one array and put it into another, but what if I have pagination here and query props change? What query should I use to get all data from cache?
On the other hand, I can use readFragment
to get the exact series I want to move by its id. In this case, I have no idea how to change its relations to "all" and "favorite" lists. Also, I don't understand how to manage cache order in both cases.