Как сделать пакетные мутации с клиентом Apollo

Я пытаюсь использовать ApolloClient 2.1 с новым компонентом мутации.

Простые варианты использования работают, но теперь у меня есть кое-что более сложное.

Чего я хочу добиться, так это запросить данные и поместить их в список, затем отсортировать этот список (здесь через реагирующий на сортировку-hoc) и после сортировки я хочу обновить новую позицию для всех элементов в списке.

Итак, основа примерно такая: она работает для простых запросов:

const query = gql'
{
  items( order:{by:"position", direction:"desc"}) {
    id
    name
    position
  }
}'

const ItemView extends Component {
    onSortEnd = ({ oldIndex, newIndex }) => {
       console.log("Sort ended: ", oldIndex, newIndex);
    }

    render() {
     <Query query={query}>
        {({ loading, data, error }) => {
          if (loading) return <p>Loading...</p>;
          if (error) return <p>Error</p>;

          return (
            <ItemList items={data.items} onSortEnd={this.onSortEnd} />
          )
        }}
      </Query>
    }
}

Теперь я действительно борюсь во многих частях, чтобы сделать мутацию.

Я думаю, что мне нужно обернуть компонент мутации. Но как я могу предоставить GraphQL Query там, потому что я хочу сделать пакетную мутацию с похожим запросом, запускаемым несколько раз, например,

mutation {
  updateItem1: updateItem(id: 457092155, input: {position: 1}) {
    item {
      id
    }
    ok 
    errors

  },
  updateItem2: updateItem(id: 54489270, input: {position: 2}) {
    item {
      id
    }
    ok 
    errors

  },
  ... // much more mutations, one for each item in the list
}

Итак, мой главный вопрос: как передать мутацию GraphQL с динамическим количеством мутаций в компонент Mutation? Или я должен сделать это совершенно по-другому?

Большое спасибо за любые подсказки

Ответ 1

Вы должны составить несколько мутаций вместе, чтобы достичь этого. Для этого вы можете использовать реагировать-принимать. Они даже обратились к этому здесь https://github.com/pedronauck/react-adopt#leading-with-multiple-params.

Вы также можете взглянуть на обсуждение, проходящее здесь https://github.com/apollographql/react-apollo/issues/1867, и у jasonpaulos есть пример, демонстрирующий это с помощью хуков

Привет всем! Я считаю, что новые крючки Apollo, используйте Query, useMutation и useSubscription адекватно рассматривают этот вариант использования. к продемонстрировать это, я преобразовал пример @Cridda, который использует реагировать-принять и изменить его, чтобы использовать @apollo/реагировать-хуки здесь: https://codesandbox.io/s/apollo-and-react-hooks-4vril

Этот пример ни в коем случае не идеален, но он служит демонстрацией о том, как хуки могут значительно упростить некоторые варианты использования.

Надеюсь это поможет!

Ответ 2

Я дал здесь ответ об оригинальном API-интерфейсе на основе Promise для клиента Apollo, с которым проще работать при выполнении итеративных мутаций в определенной точке (например, в функции обратного вызова). Если у вас есть идентификатор и соответствующие позиции, вы можете асинхронно перебирать данные и выполнять мутацию для каждого элемента.