How to delete cache record from Apollo GraphQL client with readQuery and writeQuery

Question

The Apollo GraphQL team says that readQuery and writeQuery are good for 95% of the use cases. I am using useMutation and update and want to remove an item from a cache without having to call refetchQueries. My code is as follows:

const [deleteSpeaker] = useMutation(DELETE_SPEAKER, {
  update(cache, { data: {deleteSpeaker}}) {
    const { speakers} = cache.readQuery({query: GET_SPEAKERS});
    cache.writeQuery({
      query: GET_SPEAKERS,
      data: { speakers: speakers.filter(speaker => speaker.id !== deleteSpeaker.id) }
    });
  },
});

What gets returned from readQuery leads me to think I should be filtering for speakers.datalist but when I do that, the cache does not update.

What is the correct way to update cache to reflect a removed record from the GET_SPEAKERS query.

export const DELETE_SPEAKER = gql`
      mutation DeleteSpeaker($speakerId: Int!) {
        deleteSpeaker(speakerId: $speakerId) {
          id
          first
          last
          favorite
        }
      }
    `;

and GET_SPEAKERS

export const GET_SPEAKERS = gql`
  query {
    speakers {
      datalist {
        id
        first
        last
        favorite
        company
      }
    }
  }
`;

just console.log value/structure read from cache and create new object with new, filtered content inside in 'immutable way' — xadm, Oct 21 '20 at 21:03

score 0 · Answer 1 · answered Aug 09 '22 at 06:24

reading apollo docs, this should be something lke:

const [deleteSpeaker] = useMutation(DELETE_SPEAKER, {
  update(cache, { data: {deleteSpeaker}}) {
    cache.modify({
      id: cache.identify(deleteSpeaker.id),
      fields: {
        comments(existingSpeakerRefs, { readField }) {
          return existingSpeakerRefs.filter(
            speaker => deleteSpeaker.id !== readField('id', speakerRef)
          );
        },
      },
    });
  },
});

How to delete cache record from Apollo GraphQL client with readQuery and writeQuery

1 Answers1