Let's say I have a very simple Angular component that just shows a list of names, has an input field that allows to filter the names that are displayed, allows to change the name of an entry and to add new entries.
The entries of the list is fetched from a GraphqQL server via Apollo Client (via the apollo-angular package). The Query is parameterized by the current value of the filter to avoid loading all elements from the server. So whenever the value of the input changes a refetch is performed updating the variable of the query.
Now on update or insert my approach was to perform the respective mutation which returns the modified or new entry and update the cache of Apollo Client using writeFragment with that information so that I don't need to refetch all data from the server again.
This works fine except that it obviously doesn't take the filter into account. I would nedd to skip adding an entry to the cache if it wouldn't be visible due to the current filter and after an update I potentially need to remove it from the cache if the new name doesn't match the filter anymore.
The backend always returns the modified or new entry and the frontend doesn't know the filter logic.
What I came up with is to not only return the entry from the modification but also whether it is visible or not. Is that how this is typically done? Or is there a better approach in general which avoids having to refetch all data in case of modifications to individual entries?