Вы, вероятно, продолжаете слышать о GraphQL из различных источников в Интернете. Трудно не сделать этого. GraphQL - это спецификация для создания и использования API, она предлагается и имеет открытый исходный код Facebook и люди говорят, что это хорошая альтернатива подходу REST.

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

Как принять GraphQL?

Могу определенно сказать, что пока в вашей компании всего два человека - вы и ваш менеджер, подходите к нему с сумасшедшим огнем в глазах и говорите: «Привет, босс, мне нужны два backend разработчика, инженер по эксплуатации, пара Разработчики Android и iOS, и мы перепишем наш стек на GraphQL, он будет УДИВИТЕЛЬНЫМ! » не поможет вам в достижении этой цели. Вы должны научиться делать это постепенно, не нанося ядерных ударов по окружающему миру. Давайте посмотрим, что говорят об этом инженеры Facebook:

Значит, я могу использовать GraphQL на клиенте, не внедряя его на серверной части?, - спросите вы. Да, ты можешь! Мы в Showmax уже давно этим занимаемся.

Наша мотивация для перехода на GraphQL

Мы используем React в качестве фреймворка представления, и нам очень нравится его компонентная модель, которая обеспечивает необходимый объем инкапсуляции, так что при работе над определенной частью приложения нам не нужно хранить все приложение в оперативной памяти нашего мозга. Кроме того, мы расширяем компонентный подход к нашему решению стилизации CSS - мы используем JSS для совместного размещения компонентов и их соответствующих стилей CSS, устраняя при этом проблему конфликтов имен классов CSS. Поэтому, когда мы впервые услышали о GraphQL, мы сразу увидели возможность еще больше расширить подход совместного размещения, сохранив запросы / фрагменты GraphQL рядом с компонентами, которые их используют:

В приведенном выше примере используется Apollo GraphQL Client и его интеграция с React. Помимо совместного размещения запросов, используя мощь GraphQL, ApolloClient бесплатно предоставляет некоторые другие интересные функции для вашего внешнего приложения:

  • Нормализованное кеширование модели
  • Оптимистичные обновления пользовательского интерфейса
  • Разрешение данных во время рендеринга на стороне сервера
  • Автоматический опрос
  • Подписки в реальном времени

Учитывая все это, мы решили, что хотим использовать GraphQL для нашего приложения React, но, конечно, у нас не было бэкэнда GraphQL. Итак, мы начали разрабатывать нашу схему GraphQL как отдельный пакет, который собирались использовать в клиентском приложении в качестве уровня выборки данных.

Схема GraphQL на стороне клиента

Одна из величайших черт GraphQL заключается в том, что он не диктует вам, какой протокол связи использовать или как разрешать данные в вашей схеме. Другими словами, вам не нужно отправлять запросы через HTTP и / или получать данные для ответа из базы данных. Вот как может выглядеть ваша схема, если вы хотите использовать ее из браузера:

В определении корневого запроса мы объявили одно поле - movieById - типа Movie. Уловка, которая позволяет нам использовать эту схему в браузере, заключается в resolve методе. Этот метод используется исполнителем GraphQL для разрешения данных для запроса во время выполнения. Поскольку, как я упоминал выше, нет никаких ограничений на то, как вы можете реализовать это, вы можете использовать fetch API браузера для разрешения данных из существующей серверной службы REST.

Все, что осталось сделать для завершения интеграции приложения, - это настроить выбранную клиентскую библиотеку GraphQL для использования локально импортированной схемы вместо вызова конечной точки HTTP /graphql. Вот как такая конфигурация выглядит для ApolloClient:

Просто нужно предоставить экземпляр SchemaLink из пакета apollo-link-schema конструктору ApolloClient, передать ему вашу «локальную» схему, и вы можете начать использовать потрясающий API, который GraphQL и Apollo предоставляют в вашем приложении.

Ниже мы используем запрос movieById, который мы определили на одном из предыдущих шагов, для получения данных Movie в нашем компоненте MovieDetailPage. Результат декларативен и легко читается! Более того, вы можете использовать запрос GraphQL для генерации propTypes для ваших компонентов, указать различные политики выборки, которые определяют, как используется кеш при разрешении данных, включить автоматический опрос для запроса и многое другое.

Следующие шаги…

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

При этом, эта установка по-прежнему не использует все сильные стороны технологии: борьба с избыточной выборкой и предотвращение многократных обращений по сети при выборке всего набора данных для определенного представления. Но вы можете легко включить эти функции на следующих этапах внедрения GraphQL. Итак, что вы можете сделать с этого момента? Следующее, что вы можете сделать, это взять схему, которую вы использовали на клиенте, добавить node-fetch polyfill и развернуть ее на сервере NodeJS.

С помощью этого простого шага не только исчезнут проблемы с избыточной выборкой и множественными обратными обращениями, но и другие клиентские группы, такие как iOS, Android или SmartTV, могут начать использовать GraphQL и пожинать плоды.

После этого, если все команды в вашей организации согласны с тем, что GraphQL полезен для них, и вы хотели бы пойти ва-банк, вы можете полностью удалить свой старый REST API Gateway и заменить его на GraphQL, который будет напрямую общаться с отдельные микросервисы или базы данных.

Попытайся!

У GraphQL определенно есть свои плюсы и минусы, но я считаю, что у него есть хорошие шансы заменить REST как стандартную парадигму API де-факто. Если вам это нравится так же, как и нам в Showmax, вы можете попробовать использовать его в своей организации. Мое главное послание - Не бойтесь пробовать!

GraphQL разработан чрезвычайно хорошо, так что он позволяет командам постепенно внедрять его, сводя к минимуму нарушение работы других коллег. Я надеюсь, что эта статья поможет вам на пути к созданию отличных API-интерфейсов современным способом!

Если вы хотите увидеть больше, я создал репозиторий GitHub, который реализует рабочий пример настройки GraphQL на стороне клиента, о которой мы говорили в этой статье. Также я делал доклад на эту тему на конференции Webexpo в Праге в сентябре 2017 года, пожалуйста, посмотрите это видео, в нем есть немного больше деталей.

Поделитесь своей историей

Вы используете GraphQL в своей компании? Расскажите, пожалуйста, о своей истории усыновления, о том, какие идеи или уроки вы извлекли.