Как обновить пользовательский интерфейс после удаления мутации в Reaction-Apollo - PullRequest
Новая
       25

Как обновить пользовательский интерфейс после удаления мутации в Reaction-Apollo

0 голосов
/ 03 мая 2019

Я хочу, чтобы пользовательский интерфейс моего приложения обновлялся после запуска удаления мутации в компоненте реагирования apollo. Операция удаления прошла успешно, но пользовательский интерфейс не обновился после удаления мутации. Ниже приведена копия моего кода, есть что-то, что я не правильно понимаю? 

const deleteRoom = async (roomId, client = apolloClient) => {
  const user = await getUserDetails();
  const deleteResponse = await client.mutate({
    mutation: DELETE_ROOM,
    name: 'deleteRoom',
    variables: {
      roomId,
    },
    update: (cache, { data: roomDelete }) => {
      const data = cache.readQuery({
        query: GET_ROOMS_QUERY,
        variables: {
          location: user.location,
          office: '',
          page: 1,
          perPage: 8,
        },
      });
      data.allRooms.rooms = data.allRooms.rooms.filter(
        room => room.id !== roomDelete.deleteRoom.room.id,
      );
      console.log(data, '======');
      cache.writeQuery({
        query: GET_ROOMS_QUERY,
        data,
      });
    },
  });
  return deleteResponse;
};

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

N: B Когда я консоль регистрирую данные, они фактически удаляют удаленные данные после фильтрации их из массива. Обновленные данные - это то, что я записываю обратно в кеш

1 Ответ

0 голосов
/ 03 мая 2019

Это поведение описано в документах:

Разница между cache.writeQuery и client.writeQuery заключается в том, что версия клиента также выполняет широковещательную передачу после записи в кэш. Эта трансляция гарантирует, что ваши данные обновляются в слое представления после операции client.writeQuery. Если вы используете только cache.writeQuery, изменения могут не сразу отражаться в слое вида. Такое поведение иногда полезно в сценариях, где вы хотите выполнить несколько операций записи в кэш без немедленного обновления слоя представления.

Вы можете использовать опцию refetchQueries в mutate для принудительного обновления.

...