Zlit Tech: Рассвет GraphQL / Workshops Day
Apollo-client с фрагментами и статическим анализом
Павел Чернорогов @nodkz – GraphQL-гуру, консультант, тренер, разработчик интернет-продуктов, опенсорс-мейнтейнер и просто хороший человек – проведет мастер-класс по GraphQL для React-разработчиков.

Павел покажет, как правильно использовать GraphQL на стороне клиента в React-приложениях. У вас будет 5 часов, чтобы с помощью 'create-react-app', ApolloClient и TypeScript написать простое клиентское приложение. В нем запросы будут собираются «снизу-вверх» через GraphQL-фрагменты. Будем использовать генерацию тайп дефинишенов и проверять код статическим анализом. Именно так, как это делает Фейсбук с Relay Modern.


Программа воркшопа
11 мая / Wix Office
10:30 - 11:00
10:30 - 11:00
Registration Time
11:00
11:00
Знакомство и вступление
11:15 - 13:00
11:15 - 13:00
Часть 1: Пишем клиента на Apollo как это обычно делают все

11:15
11:15
Клонируем болванку React-приложения
  • npx create-react-app client --typescript
  • Подключаем react-bootstrap
  • Ставим react-router
  • Делаем меню и mock-страницы
11:30
11:30
Разбираем архитектуру ApolloClient
  • InMemoryCach
  • HttpLink
  • Делаем запрос на сервер напрямую через ApolloClient
12:00
12:00
Настройка VSCode
  • Настраиваем eslint для проверки GraphQL-запросов
  • Плагин GraphQL for VSCode
  • Установка в проекте @playlyfe/gql
  • Установка глобально Watchman
  • Написание конфига .gqlconfig
  • Кайфуем от автоподстановки и линтинга запросов
12:30
12:30
Подключаем ApolloClient к React

  • Ставим ApolloProvider
  • Разбираем компоненты Query и Mutation
  • Реализовываем OrderPage в связке с роутером
  • Пишем OrderList, OrderItem и пагинацию
13:00 - 13:30
13:00 - 13:30
Часть 2: На поддержку мозга обезьяны тратят 10% энергии тела, взрослый человек – 20%, младенцы – 60%
13:00
13:00
RestQL курильщика, и GraphQL нормального человека
  • GraphQL должен быть "волосатым"
  • Смотрим схему github в https://apis.guru/graphql-voyager/
  • Если фронтендер захотел по-маленькому... запросить данные, схема должна это позволять
13:15
13:15
Ущербность написания запроса целиком наверху (ей богу болячка RESTовиков)
  • Запрос должен быть составным и собираться снизу вверх
  • Накидали компонентов, собрали с них фрагменты и 80% запроса уже готово
  • Кто-то внизу зарефакторил компоненту чтобы отображать больше данных – вам наверху пофигу, все работает из коробки.
13:30 - 14:45
13:30 - 14:45
Клонируем болванку React-приложения
13:30
13:30
Переписываем RESTолло код на фрагменты
  • OrderPage, List, Item и Query
  • Еще раз кайфуем от автоподстановки и линтинга
  • Пробуем на вкус фрагментный подход, кайфуем от перспектив
14:00
14:00
Привязываем статический анализ к компонентам
  • Настраиваем apollo-codegen для генерации дефинишенов
  • Берем тайп дефинишены фрагментов и прикручиваем их к пропсам компонент
  • Делаем TypedQuery с указанием дженериков ответа и переменных
14:30
14:30
Ломаем сервер по заявкам трудящихся
  • Стараемся быстро найти поломанные места в клиенте
  • Радуемся тому, как нас контролируют машины
14:45 - 15:00
14:45 - 15:00
Часть 4: Бонус трэк: Мутации

Пилим мутацию
  • Создаем простую формочку на final-forms редактирования Orders
  • Пробуем на вкус когда Query вложен в мутацию с фрагментами (ням!)
  • Нормализация с dataIdFromObject()
15:00
15:00
The End
500 грн. за все воркшопы + основной день Zlit

Wix Office
ул. Паньковская 14

15 минут от м. Университет
Made on
Tilda