Apollo Client повторно запрашивает данные после мутации добавления, но не после удаления.

На чтение 3 мин Опубликовано 30.09.2024

Содержание

Вопрос или проблема
Ответ или решение
Проблема:
Решение:
Заключение:

Вопрос или проблема

У меня есть мутация, которая добавляет todo в список дел.

mutation AddTodo($data: AddTodoInput!) {
              addTodoToList(data: $data) {
                id
                todos{
                  id
                }
              }
            }

У меня есть другая мутация, которая удаляет todo:

mutation DeleteTodo($data: DeleteTodoInput!) {
              deleteTodoFromList(data: $data) {
                id
                todos{
                  id
                }
              }
            }

Это запрос для списка:

query List{
    id,
    todos {
       id
       name
    }
              
}

Удаление правильно удаляет todo и убирает его из списка без повторного запроса списка. Но когда я добавляю элемент, это вызывает повторный запрос. Поскольку я возвращаю список todos, это неожиданно. В чем проблема?

Потому что мой запрос AddTodo не запрашивал поле “name”, запрос List не имел имени нового todo и был вынужден повторно запросить список, чтобы получить имя.

Добавление поля “name” в мутацию AddTodo позволило избежать повторного запроса списка.

Удаление не вызвало повторный запрос, потому что оно удаляло элемент, и запросу List не нужна дополнительная информация о полях, которые не существуют.

Ответ или решение

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

Проблема:

Ваша мутация для добавления задачи (AddTodo) не включает поле name, что приводит к тому, что Apollo Client не может обновить кэш с новыми данными о задаче. Таким образом, когда элемент добавляется, список задач должен быть заново извлечен, так как кэш не содержит полной информации о добавленной задаче.

Решение:

Для исправления этой проблемы необходимо вернуть все нужные поля в мутации AddTodo. Ваш код должен выглядеть следующим образом:

mutation AddTodo($data: AddTodoInput!) {
  addTodoToList(data: $data) {
    id
    name  # добавлено поле name
    todos {
      id
      name
    }
  }
}

Теперь кэш будет обновляться с новыми данными о добавленной задаче, и повторный запрос к запросу для получения списка задач не будет необходим.

Что касается мутации для удаления задачи (DeleteTodo), ситуация отличается. Когда элемент удаляется, его данные больше не существуют, и в результате Apollo Client не требует дополнительных данных для обновления кэша списка. Такой подход хорошо работает, поскольку удаленный элемент просто исключается, и не нужен дополнительный запрос для обновления.

Заключение:

Таким образом, вам следует убедиться, что все необходимые поля возвращаются в мутации AddTodo, чтобы избежать нежелательной перезагрузки данных. Этот подход не только устранит проблему с повторным запросом, но и обеспечит более эффективное управление кэшом в Apollo Client.