cache.evict not works in optimistic UI

[pei-wang]

Intended outcome:
We upgraded our Apollo client from 3.4.16 to 3.7.0, we expect all work as expected.

Actual outcome:
We found our optimistic UI is broken for deletion.
we use cache.evict on the update callback. but after upgraded, cache.evict return false for the optimistic response which doesn't remove the object we want to delete.

How to reproduce the issue:
after spiked, we found it may related to the fix for a bug #8829.

I am reusing the repo from #7321 to reproduce the issue.
https://github.com/pei-wang/apollo-client-issue-reproduce/blob/d0a083107c0dd8d10d56c1c11c28156ac6f51642/src/components/Review.js#L134
so if cache.evict is only allowed to update the data of optimistic layers, how do we handle our case? 🤔 shall we avoid use cache.evict on the deletion for optimistic ui? I am wondering if there any guideline for this. Thanks.

Versions

System:
OS: macOS 12.6.1
Binaries:
Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
Yarn: 1.22.4 - ~/code/github/apollo-client-issue-reproduce/node_modules/.bin/yarn
npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
Browsers:
Chrome: 107.0.5304.110
Edge: 107.0.1418.42
Firefox: 105.0.1
Safari: 16.1
npmPackages:
@apollo/client: 3.7.0 => 3.7.0
apollo: ^2.30.2 => 2.30.2
apollo-cache-persist: 0.1.1 => 0.1.1
apollo-link-rest: 0.8.0-beta.0 => 0.8.0-beta.0

[zyulyaev]

We faced the same issue and I think I found the solution. Instead of using evict which seems to be a noop for optimistic layers, you can use modify to mark things as deleted. Here is an example from our code:

await apolloClient.mutate({
  mutation: DeleteTopicCommandDocument,
  variables: {
    id: topicId,
  },
  update: (cache, { data }) => {
    if (data?.deleteTopic.__typename === 'Success') {
      cache.modify({
        id: cache.identify({ __typename: 'Topic', id: topicId }),
        fields: (_, { DELETE }) => DELETE,
      })
    }
  },
  optimisticResponse: {
    deleteTopic: {
      __typename: 'Success',
    },
  },
})

[denfield-daveyonmayne]

Evict works but it needs __typename:

const evictCache = (cache, id) => {
        // Remove the deleted object from the cache
        cache.evict({ id: cache.identify({ __typename: '<TYPE_NAME>', id }) });
        // Run garbage collection to remove any other objects that are no longer referenced
        cache.gc();
   }

[z0d14c]

I ran into this too. The weird thing is it seems like evict doesn't even remove the item from the optimistic data cache. Is it because Apollo Cache doesn't have a way to represent deleted data in the optimistic data cache?