Updating the local cache on delete

ListItems(updatefunction).js

update = async (cache, payload) => {
  // This function fires once the DELETE_LIST_ITEM_MUTATION is complete

  // Get the skip value for the current page so we can read the relevant
  // query from our cache. I've passed down page from Index.js and imported
  // perPage from our config file
  const queryVars = { skip: (this.props.page - 1) * PER_PAGE }

  // read cache for the page we need to change, GET_LIST_ITEMS_QUERY 
  // imported from Index.js
  const data = cache.readQuery({ 
    query: GET_LIST_ITEMS_QUERY, variables: queryVars 
  })

  // Filter the deleted ListItem out of the cached data 
  // server returns deleted ListItem
  const newListItems = data.listItems
    .filter(i => i.id !== payload.data.deleteListItem.id)

  // Write the current pages query with the deleted item 
  // filtered back to cache
  await cache.writeQuery({ 
    query: GET_LIST_ITEMS_QUERY, 
    data: { listItems: newListItems }, 
    variables: queryVars 
  })
}