Я начал использовать Apollo с тех пор, как начал экспериментировать с GraphQL в идее приложения, которую мы имеем в Bostwick Studio.

После часа игры с этим стеком я понял 2 важные вещи:

  1. Во всех примерах есть запрос / мутация на уровне компонентов.
  2. У вас есть только «загрузка» в запросах

Давайте взглянем!

Запрос / Мутация на уровне компонентов

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

Решение, которое я нашел, заключалось в создании HoC для каждого запроса и мутации, сохранении их в отдельной папке и названии их как преобразователь. Например, для такой мутации, какmutation updateUser(...) {...}, у меня будет компонент с именем UpdateUserMutation.js, легко, правда?

Как выглядит HoC? Ну, сначала вы должны знать, как создать HoC, вы можете сделать это в документации React: https://reactjs.org/docs/higher-order -components.html
Во-вторых, мы можем легко вернуть функцию как дочернюю, метод, который мы обычно используем, чтобы избежать конфликтов с props при использовании HoC.

Если вы хотите узнать об этом больше, взгляните на это:
https://dev-blog.apollodata.com/query-components-with-apollo-ec603188c157

Это пример статьи Куреева Алексея:

Загрузка реквизита для мутаций

Почему у нас нет «загрузки» мутаций? Проще говоря, Apollo предоставляет «данные», которые содержат логическое значение загрузки для запросов, пока мы монтируем компонент. Идея состоит в том, что мы хотим каким-то образом отобразить данные, но данные недоступны, поскольку HTTP-запрос является асинхронным, поэтому нам нужен флаг (загрузка), чтобы иметь возможность ждать, пока данные будут готовы.

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

Мутация загрузки HoC

Если нам нужен флаг загрузки для мутации, более одного раза означает, что мы должны что-то делать, мы не можем повторить код!

Лучшая идея в React? HoC :)

Это пример того, как вы можете реализовать это, например, HoC

Идея проста: мы создаем функцию, в данном случае она называется withMutationState, мы предоставляем компонент (оболочку) и возвращаем новый компонент, который будет отображать компонент оболочки, передавая новые свойства. Затем мы просто передаем свой собственный mutate вместо mutate Apollo, он вызовет mutate Apollo, но заключенный между флагом загрузки.

Наконец, мы можем использовать идею HoC для запросов / мутаций, которой Куреев Алексей поделился здесь

Готово!

Мы можем использовать это так

Надеюсь, вам понравится и пригодится :)