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

852 views Asked by At

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
      }
    }
  }
`;
1

There are 1 answers

0
Tuval Rotem On

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)
          );
        },
      },
    });
  },
});