Intended outcome:
In the full-stack tutorial in the docs, the cache.modify function is used incorrectly. If you run the app from the tutorial you will see that this function:
const [mutate, { loading, error }] = useMutation(
CANCEL_TRIP,
{
variables: { launchId: id },
update(cache, { data: { cancelTrip } }) {
// Update the user's cached list of trips to remove the trip that
// was just canceled.
const launch = cancelTrip.launches[0];
cache.modify({
id: cache.identify({
__typename: 'User',
id: localStorage.getItem('userId'),
}),
fields: {
trips(existingTrips) {
const launchRef = cache.writeFragment({
data: launch,
fragment: gql`
fragment RemoveLaunch on Launch {
id
}
`
});
return existingTrips.filter(
(tripRef: Reference) => tripRef === launchRef
);
}
}
});
// @ts-ignore
console.log("CACHE", cache.data.data);
}
}
);
removes from the cache all trips assigned to a user. Instead this function should only remove the trip which was cancelled by the user.
Intended outcome: In the full-stack tutorial in the docs, the
cache.modify
function is used incorrectly. If you run the app from the tutorial you will see that this function:removes from the cache all trips assigned to a user. Instead this function should only remove the trip which was cancelled by the user.
https://www.apollographql.com/docs/tutorial/local-state/#enable-cart-and-booking-modifications
Actual outcome: Only cancelled trip should be removed from the cache.
How to reproduce the issue:
client
andserver
from thefinal
folder in separate terminals.User
object in the cache (using i.e. Apollo devtools). The trip list assigned to the user is empty.Versions
System: OS: macOS 11.2.3 Binaries: Node: 14.15.5 - /usr/local/bin/node Yarn: 1.22.10 - /usr/local/bin/yarn npm: 7.5.4 - /usr/local/bin/npm Browsers: Chrome: 90.0.4430.72 Firefox: 86.0 Safari: 14.0.3