Удаление записи из списка, Apollo GraphQL Оптимистичная мутация пользовательского интерфейса

Question

Я ищу способ, с помощью которого оптимистичный пользовательский интерфейс удаляет элемент из списка.

Запрос списка:

myQuery{
 Foo:{
  Bar:{
    id
 }
}

удалить мутацию:

mutation deleteBar(input: barInput!){
 deleteBarItem: (responds Boolean for success)
}

Как структурировать optimisticResponse?

deleteBarItem({
 variables:{
  barInput:{
   id: idToBeDeleted
  }
 },
optimisticResponse:{
  ?????
},
update: (cache, { data}) => { ...manipulate the list in cache}
})

Answer 1

Вот статья среднего уровня с одним примером того, как использовать OptimisticResponse для удаления элемента из списка.

Было бы полезно увидеть вашу схему, но вот рабочий примериз игрушечного приложения для ведения дел Я построил с помощью OptimisticResponse, работающего для удаления элементов из списка:

optimisticResponse: {
  __typename: "Mutation",
  deleteResolution: {
    __typename: "Resolution",
    _id
  }
}

Вы можете проверить, работает ли OptimisticResponse, установив для вашей скорости сети значение «Медленный 3G» вконсоль разработчика и обеспечение немедленного удаления элемента.

Примечание: вы можете использовать фильтр в функции обновления вместо логического значения для чистого создания нового массива с удаленным элементом.Вот как я могу это сделать в приложении, связанном выше, где _id - это идентификатор удаляемого элемента, который передается в качестве опоры компоненту DeleteResolution:

resolutions = resolutions.filter(
  resolution => resolution._id !== _id
);

Answer 2

Спасибо xadm за предоставленный пример в комментариях к ссылке

deleteBarItem({
 variables:{
  barInput:{
   id: idToBeDeleted
  }
 },
optimisticResponse:{
  deleteBarItem: true,
  foo:{
   id: idToBeDeleted,
   __typename: "Bar"
  }
},
update: (cache, { data}) => { ...manipulate the list in cache}
})

Пара ключевых замечаний.Кэш: использует __typename и id для ссылки на объекты.Используя оптимистичный пользовательский интерфейс для «удаления» и Item, вам необходимо установить кэш с объектом, который не имеет никакой другой информации, связанной с ним.обновление: эта функция запускается дважды.Один раз с оптимистичными результатами, а затем снова, когда мутация возвращается.В моем примере мутации, возвращающей логическое значение, я добавил фильтр в список на основе этого логического значения, чтобы удалить удаленный элемент из списка или оставить его без изменений.