Реакция Аполлона - множественные мутации

Question

Я использую реагировать-apollo@2.5.6

У меня есть компонент, когда вы щелкаете по нему, он будет основан на состоянии «выбрать» и запускает операцию add или remove.

В настоящее время я делаю это, чтобы функция 2 мутации была введена в мой компонент. Это правильный способ сделать это? Могу ли я использовать одну мутацию (HOC) вместо нескольких?

    <Mutation mutation={ADD_STUFF}>
      {(addStuff) => (
        <Mutation mutation={REMOVE_STUFF}>
          {(removeStuff) => {

А позже в завернутом компоненте я сделаю что-то подобное

                        onClick={(e) => {
                          e.preventDefault()

                          const input = {
                            variables: {
                              userId: user.id,
                              stuffId: stuff.id,
                            },
                          }

                          // Based on selected state, I will call either add or remove
                          if (isSelected) {
                            removeStuff(input)
                          } else {
                            addStuff(input)
                          }
                        }}

Спасибо

Answer 1

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

1. Использование функции клиента Apollo client.mutate для ручной мутации на основе состояния и установки свойств mutation и variables на основе нового состояния. Чтобы получить доступ к клиенту в текущем компоненте, необходимо передать клиент из родительского компонента, в котором он был создан, дочерним компонентам, в которых происходит мутация.
2. Использование одного Mutation компонента внутри render метода вашего компонента и установка атрибутов mutation и variables на основе переменной state.

Answer 2

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

Я думаючто вы должны создать одну мутацию для ADD_STUFF и REMOVE_STUFF, я бы создал мутацию ADD_OR_REMOVE_STUFF и выбрал бы поведение добавления или удаления в резольвере.

Наличие одной мутации легче поддерживать / расширять / понимать, еслилогика требует чего-то еще, кроме добавления / удаления, например, если вам нужно выбрать добавить / удалить / обновить / проверить / преобразовать, вы бы вложили 5 мутаций?

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

Answer 3

Все возможно, но обычно стоит времени и денег;) ... в этом случае простота, удобочитаемость, управляемость.

1-й раствор

Обычная мутация, например с именем 'change' с параметром changeType.

Конечно, это требует смены API - вам нужен новый преобразователь.

2-й раствор

Используя graphql-tag, вы можете построить любой запрос из строки. Получите вдохновение от этого ответа - с 'classic graphql HOC' pattern.

Это решение не требует изменения API.