Как выполнять пакетные мутации с помощью клиента Apollo
Я пытаюсь использовать ApolloClient 2.1 с новым компонентом мутации.
Простые варианты использования работают, но теперь у меня есть что-то более сложное.
Я хочу выполнить запрос данных и поместить их в список, затем отсортировать этот список (здесь с помощью response-sortable-hoc) и после сортировки я хочу обновить новую позицию для всех элементов в списке.
Итак, основа примерно такая, которая работает для простых запросов:
const query = gql`
{
items( order:{by:"position", direction:"desc"}) {
id
name
position
}
}`
const ItemView extends Component {
onSortEnd = ({ oldIndex, newIndex }) => {
console.info("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 с динамическим количеством мутаций компоненту мутации? Или мне сделать это совсем по-другому?
Большое спасибо за любые подсказки
Ответы 2
Вам нужно будет составить несколько Мутаций вместе, чтобы добиться этого. Вы можете использовать для этого реагировать-усыновлять. Они даже обратились к этому здесь https://github.com/pedronauck/react-adopt#leading-with-multiple-params.
Вы также можете взглянуть на происходящее здесь обсуждение https://github.com/apollographql/react-apollo/issues/1867 и Ясонпаулос имеет пример, демонстрирующий это с помощью хуков.
Hi everyone! I believe that the new Apollo hooks, useQuery, useMutation, and useSubscription, adequately address this use case. To demonstrate this, I have converted @Cridda's example that uses react-adopt and modified it to use @apollo/react-hooks here: https://codesandbox.io/s/apollo-and-react-hooks-4vril
This example is by no means perfect, but it serves as a demonstration of how hooks can massively simplify some use cases.
Надеюсь это поможет!
Как уже упоминал Хемант, аннотация @compose в Apollo 2.1 - это «правильный» / традиционный способ решения этой проблемы. Если это не сработает для вас по какой-либо причине, возможно, есть другой более грубый / хакерский способ сделать это:
Если ваша модель Item имеет родительскую модель, вы можете мутировать несколько узлов с помощью одной мутации, передав дочерние элементы в качестве значений массива в действия connect / create / update.
К сожалению, ограничение здесь заключается в том, что нет возможности индивидуально идентифицировать дочерние узлы, подлежащие обновлению. Я имею в виду, что вы можете отфильтровать дочерний Items для мутации на основе критерия (например, postition = 2), но это позволит вам только мутировать отфильтрованные элементы до того же состояния; таким образом вы не сможете обновлять их по-разному.
Если мы позволим себе еще один грубый шаг, вы можете удалить узлы предметов, которые вы хотите обновить, прежде чем вызывать мутацию обновления - это позволит вам вызвать мутацию со всеми обновленными элементами под ключом create: в мутации, что приведет к позволяют указать каждый создаваемый элемент. Таким образом, количество элементов, которые вы можете создать, ограничивается только размером полезной нагрузки вашего запроса.
Есть много случаев, когда удаление и создание узлов неприемлемо (в отличие от их обновления) ... если вы используете этот метод, убедитесь, что удаление данных элемента таким образом не приведет к отрицательным побочным эффектам для вашего варианта использования.
У вас есть контроль над серверным API? Вы можете его изменить?