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

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

Дата: 8 апреля 2020 года, 10:00 - 19:00

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

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

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

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

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 и TypeScript мы напишем простое клиентское приложение. В нем запросы будут собираются «снизу-вверх» через GraphQL-фрагменты. Также построим грамотный DX, будем использовать генерацию тайп дефинишенов и проверять код статическим анализом. Именно так, как это похожим образом делает Facebook с Relay Modern. Next.js поможет нам со сборкой приложения и Server Side Rendering. Воркшоп проводит Павел Черторогов — один из ведущих специалистов по GraphQL, который работает с ним больше 4 лет и сделал более 15 докладов про данную технологию.

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

  • React, React Hooks, ant-design.
  • Next.js: разработка, роутинг, сборка, SSR.
  • Пишем болванку приложения с mock-страницами.
  • Пишем GraphQL-запросы руками:
    • GraphiQL, GraphQL Playground, Altair, Insomnia;
    • интроспекция, документация;
    • query, mutation, subscription;
    • поля, аргументы;
    • алиасы полей;
    • переменные.
  • В болванку приложения тянем данные из GraphQL через обычный fetch:
    • ссылки на умные-fetch обертки для GraphQL.
  • Настройка VSCode:
    • настраиваем eslint для проверки GraphQL-запросов;
    • плагин GraphQL for VSCode Apollo GraphQL.

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

  • Вводная презентация по архитектуре Apollo:
    • Network Layer (HttpLink);
    • нормализованный Store (InMemoryCache).
  • Настраиваем ApolloClient:
    • делаем запрос на сервер напрямую через ApolloClient;
    • что такое GraphQL-tag, оптимизация через babel-macros;
    • настройка Store через type & field policies.
      • Настраиваем SSR для ApolloClient в Next.js.
      • Написание простого запроса на получение данных:
    • , useQuery(), useLazyQuery();
    • женим роутинг и GraphQL-запросы;
    • пишем свой React-хук для пагинации и роутинга.
  • GraphQL-фрагменты:
    • вводная презентация по фрагметной модели
    • разбиваем страницу на компоненты и фрагменты
    • статическая типизация через дженерики (в хуках или TypedQuery)
  • Проверям статическую типизацию:
    • просим несуществующие поля;
    • меняем запрос/фрагмент;
    • «ломаем» сервер по заявкам трудящихся (меняем схему).

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

  • Мутации:
    • , useMutation();
    • как мутации меняют данные в нормализованном сторе.

      Подписки

  • Обновляем данные по таймауту через polling (недоподписки).
  • , useSubscription().

    Разное

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