GraphQL на клиентской стороне с ApolloClient 3 RU

платный воркшоп

Дата: 14 июня 2020

Место: Санкт-Петербург, 9-я линия ВО, 34, БЦ Magnus, офис 303

Назад к воркшопам
Павел Черторогов, ps.kz

Павел Черторогов ps.kz nodkz

GraphQL-ниндзя, разработчик интернет-продуктов, опенсорс-мейнтейнер. С 2001 года основная специализация - веб-технологии. Обладает обширными практическими знаниями по бэкенду, фронтенду, администрированию и построению архитектуры. С конца 2015 года делает основной упор на изоморфные приложения. Летом 2016 начал разработку graphql-compose (генератора GraphQL-схем) в опенсорсе. Написал достаточно много материала на русском про GraphQL – https://github.com/nodkz/conf-talks. В 2019 начал формировать best practice по дизайну GraphQL-схем – https://graphql-rules.com.

Telegram — https://t.me/graphql_ru

Алексей Золотых, Infobip

Алексей Золотых Infobip zolotyh

Пишет на JavaScript c 2007 года. До перехода к JS работал верстальщиком, сверстал более 100 сайтов. Писал на jQuery, Backbone.js, Angular 1, Angular 2, React, Ext JS, PolymerJS. Любит пользовательские интерфейсы и кофе.

Перейти к покупке

Описание воркшопа

Воркшоп может дать существенный толчок в изучении GraphQL начинающим специалистам. А также заинтересовать и опытных разработчиков. Вас ждет много интересного материала простым и доступным языком.

С помощью Next.js, ApolloClient 3 и TypeScript напишем простое клиентское приложение. В нем запросы будут собираются «снизу-вверх» через GraphQL-фрагменты. Для построения грамотного DX, будем использовать генерацию тайп дефинишенов и проверять код статическим анализом. Именно так, как это похожим образом делает Facebook с Relay Modern. Next.js поможет нам со сборкой приложения и Server Side Rendering. Изюминкой воркшопа будет новый подход начала 2020 года в генерация типов и хуков через graphql-code-generator (подход был выработан вместе с Uri Goldshtein и Dotan Simha).

Воркшоп проводят:

  • Павел Черторогов — один из ведущих специалистов по GraphQL, который работает с ним больше 4-х лет и сделал более 15 докладов о данной технологии.
  • Алексей Золотых — teamlead Infobip, член программного коммитета HolyJS, спикер и самый крупный фронтендер.

Знакомство со стеком

  • Что такое GraphQL?
  • Пишем GraphQL-запросы руками:
    • GraphiQL, GraphQL Playground, Altair, Insomnia, OneGraph, Voyager;
    • интроспекция, документация;
    • query, mutation, subscription;
    • поля, аргументы;
    • алиасы полей;
    • переменные.
  • GraphQL фрагменты;
  • В болванку приложения тянем данные из GraphQL через обычный fetch:
    • дать ссылки на умные fetch-обертки для GraphQL.

Чтение данных с GraphQL-сервера через ApolloClient

  • Вводная презентация по архитектуре Apollo:
    • Network Layer (HttpLink и прочие миддлвары);
    • нормализованный Store (InMemoryCache);
    • разница в сторах ApolloClient 2, Relay, ApolloClient 3 (примеры ужасных сторов).
  • Пишем болванку приложения с mock-страницами:
    • ApolloClient 3;
    • React, React Hooks, ant-design;
    • Next.js: разработка, сборка, роутинг, SSR.
  • Настраиваем ApolloClient:
    • делаем запрос на сервер напрямую через ApolloClient;
    • что такое GraphQL-tag, оптимизация через babel-macros;
    • настройка Store через type & field policies.
  • Настройка VSCode:
    • настраиваем eslint для проверки GraphQL-запросов;
    • плагин GraphQL for VSCode Apollo GraphQL.
  • Настраиваем SSR для ApolloClient в Next.js.
  • Написание простого запроса на получение данных:
    • <Query>, useQuery(), useLazyQuery();
    • женим роутинг и GraphQL-запросы;
    • пишем свой React-хук для пагинации и роутинга.
  • GraphQL-фрагменты:
    • вводная презентация по Response & Fragment models;
    • разбиваем страницу на компоненты и фрагменты;
    • статическая типизация через дженерики (в хуках или TypedQuery);
    • Проверям статическую типизацию:
      • просим несуществующие поля;
      • меняем запрос/фрагмент;
      • «ломаем» сервер по заявкам трудящихся (меняем схему).
  • Кодогенерация:
    • настройка graphql-code-generator;
    • рефакторим код, выбрасываем ненужное.

Изменение данных на GraphQL-сервере через ApolloClient

  • Мутации:
    • <Mutation>, useMutation();
    • как мутации меняют данные в нормализованном сторе.
  • Подписки:
    • Обновляем данные по тайм-ауту через polling (недоподписки);
    • <Subscription>, useSubscription().

Разное

  • Аутентификация и авторизация.
  • Обработка ошибок.
  • RestQL курильщика и «волосатый» GraphQL нормального человека.
  • Правила построения GraphQL-схем.